一、JS实现DataGrid中的全选效果
1.DataGrid
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>  </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="下一页 &gt;" PrevPageText="&lt; 上一页" HorizontalAlign="Left" ForeColor="#000066" BackColor="White" Mode="NumericPages"></PagerStyle> </asp:DataGrid>
1.1 样式:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> #dgSelected td { border-width: 1px; border-style: solid; border-color: #797979; } </style>
1.2 JS
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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里的选中项进行操作
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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]