JS实现DataGrid中的全选效果

一、JS实现DataGrid中的全选效果

1.DataGrid

<asp:DataGrid ID="dgSelected" runat="server" DataKeyField="ID" CellPadding="3"
                            BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" BackColor="White" Width="100%"
                            AutoGenerateColumns="False" PageSize="20">
                            <SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#669999"></SelectedItemStyle>
                            <ItemStyle ForeColor="#000066" Font-Size="14px" HorizontalAlign="Center"></ItemStyle>
                            <HeaderStyle Font-Bold="True" Wrap="False" ForeColor="Black" CssClass="Lock_Header"
                                BackColor="#BADCF7" HorizontalAlign="Center"></HeaderStyle>
                            <FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
                            <Columns>
                                <asp:TemplateColumn HeaderStyle-Width="10px" ItemStyle-HorizontalAlign="Center">
                                    <HeaderTemplate>
                                        <input onclick="SelectAll(this, 0);" type="checkbox">
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="cbxSelected" runat="server"></asp:CheckBox>&#160;
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                                <asp:BoundColumn Visible="False" DataField="ID"></asp:BoundColumn>
                                <%--                                <asp:BoundColumn DataField="WorkflowName" SortExpression="WorkflowName" HeaderText="项目名称"></asp:BoundColumn>--%>
                                <asp:BoundColumn DataField="WorkflowName" SortExpression="WorkflowName" HeaderText="流程名称"></asp:BoundColumn>
                                <asp:BoundColumn DataField="WorkflowModel" SortExpression="WorkflowModel" HeaderText="所属流程"></asp:BoundColumn>
                                <asp:BoundColumn DataField="Sponsor_Dep" SortExpression="Sponsor_Dep" HeaderText="发起部门"></asp:BoundColumn>
                                <asp:BoundColumn DataField="Sponsor_time" SortExpression="Sponsor_time" HeaderText="发起时间"></asp:BoundColumn>
                                <asp:BoundColumn DataField="IsFiled" SortExpression="IsFiled" HeaderText="状态"></asp:BoundColumn>
                                <asp:BoundColumn DataField="LastModify_Dep" SortExpression="LastModify_Dep" HeaderText="最后处理部门"></asp:BoundColumn>
                                <asp:BoundColumn DataField="File_time" SortExpression="File_time" HeaderText="最后处理时间" DataFormatString="{0:yyyy/MM/dd}"></asp:BoundColumn>
                                <asp:TemplateColumn HeaderText="查看流程">
                                    <ItemTemplate>
                                        <a href="http://jcw.huaweisoft.com:8889/WebHost/SLWorkflowTestPage.html">查看</a>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                                <asp:TemplateColumn HeaderText="操作">
                                    <ItemTemplate>
                                        <a href="http://jcw.huaweisoft.com:8889/WebHost/SLWorkflowTestPage.html">处理</a>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                                <asp:TemplateColumn HeaderText="移除" Visible="false">
                                    <HeaderStyle Wrap="False" HorizontalAlign="Center" Width="40px"></HeaderStyle>
                                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                                    <ItemTemplate>
                                        <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="../../Images/DataGrid/remove_blue.png"
                                            ToolTip="移除" CommandName="Delete" CommandArgument="ID"></asp:ImageButton>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                            </Columns>
                            <PagerStyle NextPageText="下一页 &amp;gt;" PrevPageText="&amp;lt; 上一页" HorizontalAlign="Left"
                                ForeColor="#000066" BackColor="White" Mode="NumericPages"></PagerStyle>
                        </asp:DataGrid>

　　1.1 样式：

     <style>
#dgSelected td {
            border-width: 1px;
            border-style: solid;
            border-color: #797979;
        }
    </style>

　　1.2 JS

<script language="javascript" type="text/javascript">
        function SelectAll(o, index) {
            var dg = o.parentElement.parentElement.parentElement;
            for (var i = 0; i < dg.rows.length; i++) {
                var cbx = dg.rows[i].cells[index].children[0];
                if (!cbx.parentElement.parentElement.disabled) {
                    cbx.checked = o.checked;
                }
            }
        }
 </script>

2.操作

　　2.1 比如这里我要对DataGrid里的选中项进行操作

   protected void btnDeal_Click(object sender, EventArgs e)
        {
            foreach (DataGridItem item in this.dgSelected.Items)
            {
                string key = dgSelected.DataKeys[item.ItemIndex].ToString();
                bool isSelected = ((CheckBox)item.FindControl("cbxSelected")).Checked;
                if (isSelected)
                {
                    workflowBLL.UpdateIsFiled(key);
                }
            }
            Response.Redirect("Process.aspx");
        }

　　说明：DataKeys每行的关键字段，第一列的关键ID（前提给DataKeys赋值为ID）为DataKeys[0],以此类推，则每行的关键ID为DataKeys[item.itemIndex]