使用JS实现将GridView中的TextBox列的值博给GridView外的一个文本筐

      实现在GridView中的TextTextBox列中的Textbox每添加一值,在该TextBox失去焦点时,

GridView外面的TextBox自动添加该GridView中Textbox列中的TextBox添加的值,并过滤输入不是数字的情况

  效果如图:

   

已知【薪酬总额】的文本筐解析后<input  type="text"  name="txtAllValue"  id="txtAllValue"  />

   GridView中的TextBox模板列的id="txtones"( 非解析的id ),GridView解析后成的table    id="tbGridViews"; 

   在GridView的RowDataBind事件中:加如下代码

       private     void    GridView_RowDataBoind( object sender , EventArgs  e )

        {

               if ( e.Row.RowType==DataControlRowType.DataRow)

                 {

                      TextBox   tboxone  =  e.Row.FindControl("txtones")   as  TextBox ;

                      if ( tboxone != null )

                        {

                              tboxone.Attribute.Add( " onfocus " , " GetAllValues(); ") ;     // 模板中的TextBox添加获得焦点JS事件

                        }

                 }

        }

      前台JS代码实现如下

        < script   type="text/javascript">

              Function    GetAllValues()

                 {

                         var    tbGridView = document.getElementById( " tbGridViews" ) ;       // 得到解析GridVeiw的table

                         if( tbGridView )

                          {

                               var    oInput =tbGridView.getElementsByTagName( " input " ) ;        //  得到解析GridView的table中的所有input元素 

                               var   Lastvalue = 0;

                               for ( int  i=0 ; i < oInput.Length ; i++)                            //  遍历解析GridView的table中包含所有input元素的变量

                                 {

                                       if( oInput[i].type == "text ")                                //   判断GridView解析后的table中的input元素是否是text  文本筐

                                        {

                                             var   oValue = oInput[i].value ;                   // 得到文本筐的值

                                             if ( oValue =="" || isNaN ( oValue ))                          // 当文本筐的值为空或非数字时,默认该文本筐的值为0

                                                  oValue = 0;

                                             else

                                                 oValue=parseFloat( oValue ) ;               

                                             LastValue + = oValue ;              

                                       }

                                 }

                              var   allText = document.getElementById( " txtAllValue ") ;       // 得到薪酬总额文本筐  

                              if ( allText )

                                {

                                     allText.value = LastValue ;                            // 为薪酬总额文本筐博值

                                }

                          }

                 }

   为了合用户在GridView的TextBox模板中的TextBox输入的值为数字且大于0。首先编辑模板,在该模板中添加一个CompareValidator验证控件

设置其Text=“*”,ToolTip="请输入有效的数字" ,Operator ="GreaterThan" , ValueToCompare="0",Type="Double" ;

 

posted @   酒沉吟  阅读(709)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示