GridView js实现全选 (分页保持选择状态)
js 代码如下:
//单选择
function AddRemoveValues(oChk,theForm)
{
if(oChk.checked)
{
theForm.HdnSelectedValues.value += ",'" + oChk.value+"'";
}
else
{
theForm.HdnSelectedValues.value = theForm.HdnSelectedValues.value.replace(",'" + oChk.value+"'","");
//HdnSelectedValues为页面上隐藏选择内容的信息 <asp:HiddenField ID="HdnSelectedValues" runat="server" />
}
}
///全选
function CheckAll(checkbox,theForm)
{
var elements = theForm.elements;
for(var i = 0;i < elements.length;i++)
{
if(elements[i].type == "checkbox" && elements[i].id != checkbox.id)
{
elements[i].checked = checkbox.checked;
AddRemoveValues(elements[i],theForm);
}
}
}
后台代码关键代码：
/// <summary>
/// 选择数据
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_DataBound(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
if (HdnSelectedValues.Value.IndexOf((row.FindControl("chkSelect") as HtmlInputCheckBox).Value) >= 0)
{
HtmlInputCheckBox ChkSelected = (row.FindControl("chkSelect") as HtmlInputCheckBox);
ChkSelected.Checked = true;
}
}
}
页面代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>文书档案</title>
<script type="text/javascript" src="js/chkcontrol.js"></script>
</head>
<body>
<form id="ArViewFrm" method="post" runat="server">
<div align="center">
<table width="780" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="AliceBlue" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" GridLines="Vertical" Width="100%" HorizontalAlign="Left" ForeColor="Black"
OnDataBound="GridView1_DataBound">
<FooterStyle BackColor="#CCCCCC" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="LightSteelBlue" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type='checkbox' id='All' name='All' onclick="CheckAll(this,document.ArViewFrm)" runat=server/>全选
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkSelect" onclick="javascript:AddRemoveValues(this, document.ArViewFrm);" name="chkSelect" runat=server
value='<%# Eval("RecID")%> '/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
<asp:HiddenField ID="HdnSelectedValues" runat="server" />
</form>
//单选择
function AddRemoveValues(oChk,theForm)
{
if(oChk.checked)
{
theForm.HdnSelectedValues.value += ",'" + oChk.value+"'";
}
else
{
theForm.HdnSelectedValues.value = theForm.HdnSelectedValues.value.replace(",'" + oChk.value+"'","");
//HdnSelectedValues为页面上隐藏选择内容的信息 <asp:HiddenField ID="HdnSelectedValues" runat="server" />
}
}
///全选
function CheckAll(checkbox,theForm)
{
var elements = theForm.elements;
for(var i = 0;i < elements.length;i++)
{
if(elements[i].type == "checkbox" && elements[i].id != checkbox.id)
{
elements[i].checked = checkbox.checked;
AddRemoveValues(elements[i],theForm);
}
}
}
后台代码关键代码：
/// <summary>
/// 选择数据
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void GridView1_DataBound(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
if (HdnSelectedValues.Value.IndexOf((row.FindControl("chkSelect") as HtmlInputCheckBox).Value) >= 0)
{
HtmlInputCheckBox ChkSelected = (row.FindControl("chkSelect") as HtmlInputCheckBox);
ChkSelected.Checked = true;
}
}
}
页面代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>文书档案</title>
<script type="text/javascript" src="js/chkcontrol.js"></script>
</head>
<body>
<form id="ArViewFrm" method="post" runat="server">
<div align="center">
<table width="780" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="AliceBlue" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" GridLines="Vertical" Width="100%" HorizontalAlign="Left" ForeColor="Black"
OnDataBound="GridView1_DataBound">
<FooterStyle BackColor="#CCCCCC" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="LightSteelBlue" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type='checkbox' id='All' name='All' onclick="CheckAll(this,document.ArViewFrm)" runat=server/>全选
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkSelect" onclick="javascript:AddRemoveValues(this, document.ArViewFrm);" name="chkSelect" runat=server
value='<%# Eval("RecID")%> '/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
<asp:HiddenField ID="HdnSelectedValues" runat="server" />
</form>
