现在的位置: 首页 > 综合 > 正文

在客户端控制(CheckBox)  DataGrid 的 全选/取消全选

2012年12月03日 ⁄ 综合 ⁄ 共 3288字 ⁄ 字号 评论关闭

 DataGrid 代码:

<form id="Form1" method="post" runat="server">
            
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 448px; POSITION: absolute; TOP: 296px"
                runat
="server"></asp:TextBox>
            
<asp:DataGrid id="DataGrid1" style="Z-INDEX: 102; LEFT: 88px; POSITION: absolute; TOP: 48px" runat="server"
                BorderColor
="#999999" BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="3"
                GridLines
="Vertical">
                
<FooterStyle ForeColor="Black" BackColor="#CCCCCC"></FooterStyle>
                
<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#008A8C"></SelectedItemStyle>
                
<AlternatingItemStyle BackColor="Gainsboro"></AlternatingItemStyle>
                
<ItemStyle ForeColor="Black" BackColor="#EEEEEE"></ItemStyle>
                
<HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#000084"></HeaderStyle>
                
<Columns>
                    
<asp:TemplateColumn >
                        
<HeaderTemplate>
                            
<INPUT id="CheckAll" name="CheckAll" onclick="ChooseAll()" type="checkbox" >
                        
</HeaderTemplate>
                        
<ItemTemplate>
                            
                                
<asp:CheckBox id="CheckBox1" runat="server"></asp:CheckBox>
                        
</ItemTemplate>
                        
<HeaderStyle Wrap="False" ></HeaderStyle>
                    
</asp:TemplateColumn>
                
</Columns>
                
<PagerStyle HorizontalAlign="Center" ForeColor="Black" BackColor="#999999" Mode="NumericPages"></PagerStyle>
            
</asp:DataGrid>
        
</form>

 

JavaScript 代码:

 

    <script language="javascript" >
     
var checkFlag=true;
     
     
function ChooseAll()
     {
    
      
// alert(checkFlag);
       
       
      
if(checkFlag)
       {
       
var inputs = document.all.tags("INPUT");
        alert(inputs.length);
       
for (var i=0;i<inputs.length;i++)
            {
            
if(inputs[i].type=="checkbox" && inputs[i].id !="CheckAll")
              {
              inputs[i].checked
=true;
              }              
            }   
            checkFlag
=false;
       }
       
         
else
     {
      
var inputs=document.all.tags("INPUT");
       
for (var i=0;i<inputs.length;i++)
            {
            
if(inputs[i].type=="checkbox" && inputs[i].id !="CheckAll")
              {
              inputs[i].checked
=false;
              }              
            }  
            checkFlag
=true;

       }
    }
        </script>

删除确认:

 // <summary>
    // 让用户加以确认删除数据。
    // 
</summary>
    function DelRec()
    {
       var inputs = document.all.tags("input");
       var selectedLen = 0;
       for( var i=0;i 
< inputs.length; i ++)
       {
          if(inputs[i].type 
== "checkbox")
          {
             if( inputs[i].checked )
             {
                if(inputs[i].id !
= "CheckAll")
                {
                   selectedLen ++;
                }
             }
          }
       }
       if( selectedLen 
== 0 )
       {
          alert("请先选择您要删除的数据!");
       }
       else
       {
          var flag 
= confirm("您确定要删除所选择的这 " + selectedLen + " 条数据吗?");
          if(flag)
          {
             document.all("BtnDelRecord").click();  
          }
       }
    }

 

 

 

注意大小写,javasript很难调试,所以一定要注意大小写。

【上篇】
【下篇】

抱歉!评论已关闭.