• Javascript实现在DataGrid或DataList等容器上的CheckBox全选和取消


    1.   
          用C#等写的CheckBox需要回发到服务端执行,  
    而用JavaScript可以在直接客户端实现,效率高些 

    2.  DataGrid中的代码主要片段: 
     
                   <Columns> 
     
                           <HeaderTemplate>              //头模板代码 
                                         <asp:CheckBox  id="chkHeader"  runat="server"  AutoPostBack="False"      //AutoPostBack设为假,不需要回发 
     
                                                           onclick="javascript:SelectAll(this,'myDataGrid');"></asp:CheckBox>  //myDataGrid即为我的DataGrid的名称,使用时自行更换。
                           </HeaderTemplate> 
     
                         <ItemTemplate>                        //项模板代码 
                                         <asp:CheckBox  id="chkItem"  runat="server"></asp:CheckBox> 
                         </ItemTemplate> 
     
                   </Columns>

    3.在当页加入脚本: 
     
       <script language="javascript" type="text/javascript"> 
                 function SelectAll(tempControl,tempSpan) 
                 {
         //将除头模板中的其它所有的CheckBox取反
         var theBox=tempControl;
         var xState=theBox.checked;
         var strTemp=tempSpan;

         elem=theBox.form.elements; 
         for(i=0;i<elem.length;i++)
         {
          if(elem[i].type=="checkbox" && elem[i].id!=theBox.id && elem[i].name.substr(0,elem[i].name.indexOf(':'))==strTemp)
           {
            if(elem[i].checked!=xState)
            {
             elem[i].click();
            }
           }
         }
       }
      </script>

    4.当使用者选择好后台代码取得某列CheckBox的值: 
    for  (int  i  =  0;i  <this.DataGrid.Items.Count;i++) 

                   bool  blnIfSelect  =  ((CheckBox)this.DataGrid.Items[i].FindControl("chkItem")).Checked; 
                   ....;      //这是可以根据blnIfSelect进行各种操作了                   
    }

    PS:这个是.net 1.1的,2.0以后的需要把这句"elem[i].name.substr(0,elem[i].name.indexOf(':'))==strTemp" 改为"elem[i].name.substr(0, elem[i].name.indexOf('$')) == strTemp"

    用jQuery也能很方便的实现这个功能

  • 相关阅读:
    mysqldump
    设计模式
    设计模式
    设计模式
    设计模式
    PHP 调试
    PHP 调试
    Windows 下手工搭建 LNMP 环境
    设计模式
    设计模式
  • 原文地址:https://www.cnblogs.com/mib23/p/446708.html
Copyright © 2020-2023  润新知