Jquery实现Gridview全选功能
Jquery实现Gridview全选功能,用最少的代码实现Gridview全选功能，提供服务端事件和客户端事件。网络已经有很多种方法实现该功能，希望这个方法能对大家有些帮助，同时也是对自己的一种学习记录。
1.首先要引用Jquery库脚本，我在开发的时候使用的网络版，https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
如果自己开发需要可以下载到项目中，然后在引用页是一样可以的。
2.让GRIDVIEW解析的时候能够显示标准的TABLE结构，就是显示THEAD,TBODY,TFOOT这三个标签，在PreRender事件中设置
UseAccessibleHeader = true，同时让GridView1.HeaderRow.TableSection = TableRowSection.TableHeader，GridView1.FooterRow.TableSection = TableRowSection.TableFooter;这样GRIDVIEW在解析成HTML后就能按标准TABLE显示。
代码
<! 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 src ="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:GridView ID ="GridView1" runat ="server" CellPadding ="4" ForeColor ="#333333" GridLines ="None"
AutoGenerateColumns ="False" OnPreRender ="GridView1_PreRender" >
< Columns >
< asp:TemplateField >
< HeaderTemplate >
< input id ="chkAll" type ="checkbox" /></ HeaderTemplate >
< ItemTemplate >
< input id ="chkItem" value ='<%# Eval("id") % > ' runat="server" type="checkbox" />
</ ItemTemplate >
</ asp:TemplateField >
< asp:BoundField DataField ="id" HeaderText ="id" InsertVisible ="False" ReadOnly ="True"
SortExpression ="id" HeaderStyle-Width ="30px" ItemStyle-Width ="30px" >
< HeaderStyle Width ="30px" ></ HeaderStyle >
< ItemStyle Width ="30px" ></ ItemStyle >
</ asp:BoundField >
< asp:BoundField DataField ="productid" HeaderText ="productid" SortExpression ="productid"
HeaderStyle-Width ="120px" ItemStyle-Width ="120px" >
< HeaderStyle Width ="120px" ></ HeaderStyle >
< ItemStyle Width ="120px" ></ ItemStyle >
</ asp:BoundField >
< asp:BoundField DataField ="productname" HeaderText ="productname" SortExpression ="productname"
HeaderStyle-Width ="100px" ItemStyle-Width ="100px" >
< HeaderStyle Width ="100px" ></ HeaderStyle >
< ItemStyle Width ="100px" ></ ItemStyle >
</ asp:BoundField >
< asp:BoundField DataField ="categoryid" HeaderText ="categoryid" SortExpression ="categoryid"
HeaderStyle-Width ="120px" ItemStyle-Width ="120px" >
< HeaderStyle Width ="120px" ></ HeaderStyle >
< ItemStyle Width ="120px" ></ ItemStyle >
</ asp:BoundField >
< asp:BoundField DataField ="createtime" HeaderText ="createtime" SortExpression ="createtime"
HeaderStyle-Width ="150px" ItemStyle-Width ="150px" >
< HeaderStyle Width ="150px" ></ HeaderStyle >
< ItemStyle Width ="150px" ></ ItemStyle >
</ asp:BoundField >
</ Columns >
< RowStyle BackColor ="#EFF3FB" />
< FooterStyle BackColor ="#507CD1" Font-Bold ="True" ForeColor ="White" />
< 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" />
</ asp:GridView >
</ div >
< input id ="btnClient" type ="button" value ="客服端获取选择记录" />
< br />
< asp:Button ID ="btnServer" runat ="server" Text ="服务端获取选择记录" OnClick ="btnServer_Click" />
< br />
< asp:TextBox ID ="txtResult" runat ="server" Height ="110px" TextMode ="MultiLine" Width ="548px" ></ asp:TextBox >
</ form >
< script language ="javascript" type ="text/javascript" >
$( function () {
// 全选按钮选择，如果全选按钮为选择状态，遍历GRIDVIEW下面的第一列的CHECKBOX,设置选择状态
$( " #chkAll " ).click( function () {
$( ' #<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox ' ).attr( ' checked ' , this .checked);
});
// 遍历GRIDVIEW下面的第一列的CHECKBOX的选择状态如果选中状态和CHECKBOX个数相同则全选为选中状态，否则都为不选中状态
$( ' #<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox ' ).click( function () {
var expr1 = ' #<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox:checked ' ;
var expr2 = ' #<%=GridView1.ClientID %> >tbody >tr >td >input:checkbox ' ;
var selectAll = $(expr1).length == $(expr2).length;
$( ' #chkAll ' ).attr( ' checked ' , selectAll);
});
// 查找数据列表里面所有选中的记录
$( " #btnClient " ).click( function () {
var chkList = $( " input:checkbox:checked[name$=chkItem] " ); // Jquery模糊匹配 [att$=value]结尾是这个值
var arrayList = new Array();
for ( var i = 0 ; i < chkList.length; i ++ ) {
arrayList.push(chkList[i].value);
}
if (arrayList.length > 0 ) {
var ids = arrayList.join( " , " );
alert(ids);
} else {
alert( " 请选择记录！ " );
}
});
});
</ script >
</ body >
</ html >
后台代码：
代码
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace SwireBev.Framework {
public partial class JqueryGridView : System.Web.UI.Page {
protected void Page_Load( object sender, EventArgs e)
{
if ( ! Page.IsPostBack)
{
this .GridView1.DataSource = GetProducts();
this .GridView1.DataBind();
}
}
private ProductCollection GetProducts()
{
ProductCollection _pc = new ProductCollection();
for ( int i = 1 ; i < 15 ; i ++ )
{
_pc.Add(
new Product { id = i.ToString(), categoryid = i.ToString(), createtime = System.DateTime.Now.ToString(),
productid = i.ToString(), productname = i.ToString() }
);
}
return _pc;
}
protected void GridView1_PreRender( object sender, EventArgs e)
{
this .GridView1.UseAccessibleHeader = true ;
this .GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
this .GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
protected void btnServer_Click( object sender, EventArgs e) {
this .txtResult.Text = string .Empty;
if (GridView1.Rows.Count > 0 ) {
foreach (GridViewRow row in GridView1.Rows) {
HtmlInputCheckBox _chkItem = (HtmlInputCheckBox)row.FindControl( " chkItem " );
if (_chkItem != null && _chkItem.Checked) {
this .txtResult.Text += _chkItem.Value + " , " ;
}
}
if ( this .txtResult.Text.Length > 0 ) {
this .txtResult.Text = this .txtResult.Text.Substring( 0 , this .txtResult.Text.Length - 1 );
}
}
}
}
public class ProductCollection : ICollection < Product >
{
List < Product > _Products;
public ProductCollection()
{
_Products = new List < Product > ();
}
#region ICollection<Product> Members
public void Add(Product item)
{
_Products.Add(item);
}
public void Clear()
{
_Products.Clear();
}
public bool Contains(Product item)
{
return _Products.Contains(item);
}
public void CopyTo(Product[] array, int arrayIndex)
{
throw new NotImplementedException();
}
public int Count
{
get { return _Products.Count; }
}
public bool IsReadOnly
{
get { return true ; }
}
public bool Remove(Product item)
{
return _Products.Remove(item);
}
#endregion
#region IEnumerable<Product> Members
public IEnumerator < Product > GetEnumerator()
{
return _Products.GetEnumerator();
}
#endregion
#region IEnumerable Members
System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return _Products.GetEnumerator();
}
#endregion
}
public class Product
{
public string id
{
get ;
set ;
}
public string productid
{
get ;
set ;
}
public string productname
{
get ;
set ;
}
public string categoryid
{
get ;
set ;
}
public string createtime
{
get ;
set ;
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace SwireBev.Framework {
public partial class JqueryGridView : System.Web.UI.Page {
protected void Page_Load( object sender, EventArgs e)
{
if ( ! Page.IsPostBack)
{
this .GridView1.DataSource = GetProducts();
this .GridView1.DataBind();
}
}
private ProductCollection GetProducts()
{
ProductCollection _pc = new ProductCollection();
for ( int i = 1 ; i < 15 ; i ++ )
{
_pc.Add(
new Product { id = i.ToString(), categoryid = i.ToString(), createtime = System.DateTime.Now.ToString(),
productid = i.ToString(), productname = i.ToString() }
);
}
return _pc;
}
protected void GridView1_PreRender( object sender, EventArgs e)
{
this .GridView1.UseAccessibleHeader = true ;
this .GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
this .GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
protected void btnServer_Click( object sender, EventArgs e) {
this .txtResult.Text = string .Empty;
if (GridView1.Rows.Count > 0 ) {
foreach (GridViewRow row in GridView1.Rows) {
HtmlInputCheckBox _chkItem = (HtmlInputCheckBox)row.FindControl( " chkItem " );
if (_chkItem != null && _chkItem.Checked) {
this .txtResult.Text += _chkItem.Value + " , " ;
}
}
if ( this .txtResult.Text.Length > 0 ) {
this .txtResult.Text = this .txtResult.Text.Substring( 0 , this .txtResult.Text.Length - 1 );
}
}
}
}
public class ProductCollection : ICollection < Product >
{
List < Product > _Products;
public ProductCollection()
{
_Products = new List < Product > ();
}
#region ICollection<Product> Members
public void Add(Product item)
{
_Products.Add(item);
}
public void Clear()
{
_Products.Clear();
}
public bool Contains(Product item)
{
return _Products.Contains(item);
}
public void CopyTo(Product[] array, int arrayIndex)
{
throw new NotImplementedException();
}
public int Count
{
get { return _Products.Count; }
}
public bool IsReadOnly
{
get { return true ; }
}
public bool Remove(Product item)
{
return _Products.Remove(item);
}
#endregion
#region IEnumerable<Product> Members
public IEnumerator < Product > GetEnumerator()
{
return _Products.GetEnumerator();
}
#endregion
#region IEnumerable Members
System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return _Products.GetEnumerator();
}
#endregion
}
public class Product
{
public string id
{
get ;
set ;
}
public string productid
{
get ;
set ;
}
public string productname
{
get ;
set ;
}
public string categoryid
{
get ;
set ;
}
public string createtime
{
get ;
set ;
}
}
}