使用服务端和客户端两种方法 模拟网易邮箱实现全选,全不选的功能

  服务端和客户端的差别是 服务端在每次全选或全不选是都要刷新界面 而客户端不会

 

服务端:

前台

<div>
   
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"         //使用的是guidview控件
            DataKeyNames="id" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="xwname" HeaderText="xwname"
                    SortExpression="xwname" />
                <asp:BoundField DataField="fwl" HeaderText="fwl" SortExpression="fwl" />
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"
                    ReadOnly="True" SortExpression="id" />
                <asp:BoundField DataField="url" HeaderText="url" SortExpression="url" />
                <asp:CheckBoxField DataField="isnull" HeaderText="isnull"
                    SortExpression="isnull" />
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True"
                            oncheckedchanged="CheckBox1_CheckedChanged" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox2" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br />
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:xinlangConnectionString %>"
            SelectCommand="SELECT * FROM [zT_huati]"></asp:SqlDataSource>
   
    </div>

后台:

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox ck1 = sender as CheckBox;
            foreach (GridViewRow gvr in GridView1.Rows) {
                (gvr.Cells[5].FindControl("checkbox2") as CheckBox).Checked = ck1.Checked;
            }
        }

 

 

 

客户端:

客户端的没用后台 主要是用javascript; 来实现

 

<head runat="server">
    <title></title>
    <script type="text/javascript">                                         //js
        function aaa(sender) {
   
            var grd = document.getElementById("GridView1");
            for (var i = 1; i < grd.rows.length; i++) {
                grd.rows[i].cells[5].getElementsByTagName("input")[0].checked = sender.checked;
            }
            }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
  
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataKeyNames="id" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="xwname" HeaderText="xwname"
                    SortExpression="xwname" />
                <asp:BoundField DataField="fwl" HeaderText="fwl" SortExpression="fwl" />
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"
                    ReadOnly="True" SortExpression="id" />
                <asp:BoundField DataField="url" HeaderText="url" SortExpression="url" />
                <asp:CheckBoxField DataField="isnull" HeaderText="isnull"
                    SortExpression="isnull" />
                <asp:TemplateField>
                    <HeaderTemplate>
                        <input id="Checkbox2" type="checkbox" onclick="aaa(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input id="Checkbox1" type="checkbox" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br />
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:xinlangConnectionString %>"
            SelectCommand="SELECT * FROM [zT_huati]"></asp:SqlDataSource>
  
    </div>

你可能感兴趣的:(使用服务端和客户端两种方法 模拟网易邮箱实现全选,全不选的功能)