GridView中实现全选功能
在GridView中新建一个模板列,放入一个复选框,单击这个复选框可以选中全部数据行,但现在遇到个问题,这个全选代码如何写?页面代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="728GW.aspx.cs" Inherits="_728GW" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataKeyNames="LID" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" OnRowCreated="GridView1_RowCreated" OnRowDataBound="GridView1_RowDataBound"
PageSize="8">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:BoundField DataField="LID" HeaderText="LID" InsertVisible="False" ReadOnly="True"
SortExpression="LID" />
<asp:BoundField DataField="LDate" HeaderText="LDate" SortExpression="LDate" />
<asp:BoundField DataField="UID" HeaderText="UID" SortExpression="UID" />
<asp:BoundField DataField="Lbzh" HeaderText="Lbzh" SortExpression="Lbzh" />
<asp:BoundField DataField="Ltype" HeaderText="Ltype" SortExpression="Ltype" />
<asp:BoundField DataField="ZCID" HeaderText="ZCID" SortExpression="ZCID" />
<asp:BoundField DataField="HDate" HeaderText="HDate" SortExpression="HDate" />
<asp:TemplateField HeaderText="全选">
<HeaderTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Text="全选" AutoPostBack="True" OnCheckedChanged="CheckBox3_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="itemchk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
<EmptyDataTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EmptyDataTemplate>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyOAConnectionString %>"
DeleteCommand="DELETE FROM [zcly] WHERE [LID] = @LID" InsertCommand="INSERT INTO [zcly] ([ZCID], [LDate], [HDate], [UID], [Lbzh], [Ltype], [tt]) VALUES (@ZCID, @LDate, @HDate, @UID, @Lbzh, @Ltype, @tt)"
SelectCommand="SELECT * FROM [zcly]" UpdateCommand="UPDATE [zcly] SET [ZCID] = @ZCID, [LDate] = @LDate, [HDate] = @HDate, [UID] = @UID, [Lbzh] = @Lbzh, [Ltype] = @Ltype, [tt] = @tt WHERE [LID] = @LID">
<DeleteParameters>
<asp:Parameter Name="LID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="ZCID" Type="Int32" />
<asp:Parameter Name="LDate" Type="DateTime" />
<asp:Parameter Name="HDate" Type="DateTime" />
<asp:Parameter Name="UID" Type="Int32" />
<asp:Parameter Name="Lbzh" Type="String" />
<asp:Parameter Name="Ltype" Type="String" />
<asp:Parameter Name="tt" Type="String" />
<asp:Parameter Name="LID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="ZCID" Type="Int32" />
<asp:Parameter Name="LDate" Type="DateTime" />
<asp:Parameter Name="HDate" Type="DateTime" />
<asp:Parameter Name="UID" Type="Int32" />
<asp:Parameter Name="Lbzh" Type="String" />
<asp:Parameter Name="Ltype" Type="String" />
<asp:Parameter Name="tt" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="隐藏列" />
<asp:Button ID="Button2" runat="server" Text="显示全部列" OnClick="Button2_Click" />
<asp:Button ID="Button4" runat="server" OnClick="Button4_Click" Text="隐藏全部" />
<asp:Button ID="Button3" runat="server" Text="删除被选中列" />
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList><br />
当前为<asp:Label ID="Label1" runat="server" Text="Label"><%=GridView1.PageIndex+1 %></asp:Label>页 共<asp:Label ID="Label2"
runat="server" Text="Label"><%=GridView1.PageCount %></asp:Label>页</div>
</form>
</body>
</html>
全选复选框的代码如下:
//全选复选框
protected void CheckBox3_CheckedChanged(object sender,EventArgs e)
{
foreach(GridViewRow gr in GridView1.Rows)
{
CheckBox chk = (CheckBox)gr.Cells[7].FindControl("itemchk");
if(!chk.Checked)
{
chk.Checked = true;
}
else
{
chk.Checked = false;
}
}
}
问题是:当前选中的行选中后,如果单击全选,被选中的变为未选中,如何实现在当前已有选中项的情况下,把未选中的勾选,如果全部选中了,则取消全选? --------------------编程问答--------------------
--------------------编程问答-------------------- foreach,FindControl,业务逻辑要自己去处理，并不复杂 --------------------编程问答-------------------- 问题出在这
<script language="javascript" type="text/javascript">
function selectAll(obj)
{
var theTable = obj.parentElement.parentElement.parentElement;
var i;
var j = obj.parentElement.cellIndex;
for(i=0;i<theTable.rows.length;i++)
{
var objCheckBox = theTable.rows[i].cells[j].firstChild;
if(objCheckBox.checked!=null)objCheckBox.checked = obj.checked;
}
}
</script>
<asp:GridView ID="gvCheckList" runat="server" AutoGenerateColumns="False" OnSelectedIndexChanging="gvCheckList_SelectedIndexChanging"
CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%" AllowPaging="true" PageSize="15" OnPageIndexChanging="gvCheckList_PageIndexChanging" OnRowEditing="gvCheckList_RowEditing" OnDataBound="gvCheckList_DataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="ckbOne" runat="server" Checked="false" Text='<%# Container.DataItemIndex+1 %>' />
</ItemTemplate>
<HeaderTemplate>
<input id="ckbAll" type="checkbox" onclick="selectAll(this);" />本页全选
</HeaderTemplate>
</asp:TemplateField>
<asp:BoundField DataField="C_recno" HeaderText="题号" />
<asp:BoundField DataField="I_CheckState" HeaderText="审核状态" />
<asp:BoundField DataField="C_NewChecker" HeaderText="原审核人" />
<asp:TemplateField HeaderText="操作">
<ItemTemplate>
<asp:LinkButton ID="lbtnINfo" runat="server" CausesValidation="False" CommandName="Edit" Enabled="false" Text="试题详情"></asp:LinkButton>
<asp:LinkButton ID="lbtnCheck" runat="server" CausesValidation="false" CommandName="Select"
Text="审核"></asp:LinkButton>
</ItemTemplate>
<ItemStyle Width="150px" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
protected void CheckBox3_CheckedChanged(object sender,EventArgs e)
{
foreach(GridViewRow gr in GridView1.Rows)
{
CheckBox chk = (CheckBox)gr.Cells[7].FindControl("itemchk");
if(!chk.Checked)
{
chk.Checked = true;
}
else
{
chk.Checked = false;
}
}
}
你要先判断CheckBox3是否选中来执行CheckBox chk = (CheckBox)gr.Cells[7].FindControl("itemchk"); 是选中还是取消 --------------------编程问答-------------------- 给你介绍一个可靠的写法：
你的“全选”CheckBox应该设计在GridView外边，例如左下方。假设它的id是chkSelectAll。然后我们假设你的GridView中的那个CheckBox的id是CheckBox1，GridView的id是GridView1。两段简洁的代码加上一个页面局部变量完成这个任务：
private string SelectAllScript = string.Empty;
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var chk = (CheckBox)e.Row.FindControl("CheckBox1");
SelectAllScript += chk.UniqueID + ".checked=" + this.chkSelectAll.UniqueID + ".checked;";
}
}
protected void GridView1_DataBound(object sender, EventArgs e)
{
this.chkSelectAll.Attributes["onclick"] = SelectAllScript;
}
说明：在你设计界面时，你可能调整列模板，并且每一行中完全可能有其它CheckBox。上面的写法使用FindControl("CheckBox1")，因此可以准确地找到选择控件。而最后为chkSelectAll的客户端事件设置了准确的脚本，更是又简单又无需查询。 --------------------编程问答-------------------- 如果你的javascript真的学的好，不妨学我，动态生成javascript。不要到aspx或者ascx上手写脚本代码，那往往逻辑很麻烦、执行起来也并不可靠。 --------------------编程问答-------------------- 当然啦，如果你的GridView1的行在编辑等模式下没有CheckBox1控件，那么应该在“ SelectAllScript += ”这句之前判断一下chk是否为空。这里只是演示要说明的原理。 --------------------编程问答-------------------- http://www.cnblogs.com/xiaoxijin/archive/2007/12/28/1018958.html --------------------编程问答-------------------- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="728GW.aspx.cs" Inherits="_728GW" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页 </title>
<script language="javascript" type="text/javascript">
function chooseAll(sender)
{
var inputs = document.all.tags("INPUT");
// 遍历页面上所有的 input
for (var i = 0; i < inputs.length; i++)
{
//如果此input元素的类型为checkbox，并且其id中包含chkSelect
if (inputs[i].type == "checkbox" && inputs[i].id.indexOf("chkSelect") >= 0)
{
//设置此复选框的checked与全选复选框相同
inputs[i].checked = document.getElementById(sender).checked;
inputs[i].onclick();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataKeyNames="LID" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" OnRowCreated="GridView1_RowCreated" OnRowDataBound="GridView1_RowDataBound"
PageSize="8">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:TemplateField>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server"/>
</HeaderTemplate>
</asp:TemplateField>
<asp:BoundField DataField="LID" HeaderText="LID" InsertVisible="False" ReadOnly="True"
SortExpression="LID" />
<asp:BoundField DataField="LDate" HeaderText="LDate" SortExpression="LDate" />
<asp:BoundField DataField="UID" HeaderText="UID" SortExpression="UID" />
<asp:BoundField DataField="Lbzh" HeaderText="Lbzh" SortExpression="Lbzh" />
<asp:BoundField DataField="Ltype" HeaderText="Ltype" SortExpression="Ltype" />
<asp:BoundField DataField="ZCID" HeaderText="ZCID" SortExpression="ZCID" />
<asp:BoundField DataField="HDate" HeaderText="HDate" SortExpression="HDate" />
<asp:TemplateField HeaderText="全选">
<HeaderTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Text="全选" AutoPostBack="True" OnCheckedChanged="CheckBox3_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="itemchk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
<EmptyDataTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EmptyDataTemplate>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=" <%$ ConnectionStrings:MyOAConnectionString %>"
DeleteCommand="DELETE FROM [zcly] WHERE [LID] = @LID" InsertCommand="INSERT INTO [zcly] ([ZCID], [LDate], [HDate], [UID], [Lbzh], [Ltype], [tt]) VALUES (@ZCID, @LDate, @HDate, @UID, @Lbzh, @Ltype, @tt)"
SelectCommand="SELECT * FROM [zcly]" UpdateCommand="UPDATE [zcly] SET [ZCID] = @ZCID, [LDate] = @LDate, [HDate] = @HDate, [UID] = @UID, [Lbzh] = @Lbzh, [Ltype] = @Ltype, [tt] = @tt WHERE [LID] = @LID">
<DeleteParameters>
<asp:Parameter Name="LID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="ZCID" Type="Int32" />
<asp:Parameter Name="LDate" Type="DateTime" />
<asp:Parameter Name="HDate" Type="DateTime" />
<asp:Parameter Name="UID" Type="Int32" />
<asp:Parameter Name="Lbzh" Type="String" />
<asp:Parameter Name="Ltype" Type="String" />
<asp:Parameter Name="tt" Type="String" />
<asp:Parameter Name="LID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="ZCID" Type="Int32" />
<asp:Parameter Name="LDate" Type="DateTime" />
<asp:Parameter Name="HDate" Type="DateTime" />
<asp:Parameter Name="UID" Type="Int32" />
<asp:Parameter Name="Lbzh" Type="String" />
<asp:Parameter Name="Ltype" Type="String" />
<asp:Parameter Name="tt" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="隐藏列" />
<asp:Button ID="Button2" runat="server" Text="显示全部列" OnClick="Button2_Click" />
<asp:Button ID="Button4" runat="server" OnClick="Button4_Click" Text="隐藏全部" />
<asp:Button ID="Button3" runat="server" Text="删除被选中列" />
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList> <br />
当前为 <asp:Label ID="Label1" runat="server" Text="Label"> <%=GridView1.PageIndex+1 %> </asp:Label>页 共 <asp:Label ID="Label2"
runat="server" Text="Label"> <%=GridView1.PageCount %> </asp:Label>页 </div>
</form>
</body>
</html>
protected void GridView11_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
CheckBox chkAll = (CheckBox)e.Row.FindControl("chkAll");
chkAll.Attributes.Add("onclick", "chooseAll('" + chkAll.ClientID + "')");
}
} --------------------编程问答-------------------- JS代码
function SelectCheckAll(obj)
{
var e=document.getElementsByName('cbx_select');
for(var i=0;i <e.length;i++)
{
e[i].checked = obj.checked;
}
}
<asp:TemplateField FooterText="是否选中" HeaderText="是否选中">
<ItemTemplate>
<input name="cbx_select" type="checkbox" value='<%#DataBinder.Eval(Container.DataItem,"ID")%>'/>
</ItemTemplate>
<HeaderTemplate>
<input id="cbx_CheckAll" type="checkbox" onclick= "SelectCheckAll(this)"/>
</HeaderTemplate>
<HeaderStyle Width="10px" />
</asp:TemplateField>
补充：.NET技术 , ASP.NET
