ASP.NET GridView实现Checkbox全选、单选及行高亮显示

GridView实现Checkbox全选与高亮显示

Insus.NET再次演示如何在Gridview中使用CheckBox实现单选与全选功能，并对选中行进行高亮显示，以便用户直观地看到当前选中的行。本例采用前端脚本Javascript来实现这一效果。首先来看Insus.NET实现的效果：

Insus.NET原本是从数据库获取数据并绑定至GridView控件的，为了便于学习asp.net的网友操作，这里采用对象存储数据的方式。

首先创建一个对象，[对联]的对象：

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for Couplets
/// </summary>
namespace Insus.NET
{ 
public class Couplets
{ 
private int _ID;
private string _Type;
private string _Content;
public int ID
{ 
get { return _ID; }
set { _ID = value; }
} 
public string Type
{ 
get { return _Type; }
set { _Type = value; }
} 
public string Content
{ 
get { return _Content; }
set { _Content = value; }
} 
public Couplets()
{ 
// 
// TODO: Add constructor logic here
// 
} 
public Couplets(int id, string type, string content)
{ 
this._ID = id;
this._Type = type;
this._Content = content;
} 
} 
} 

对象准备好，它是空的，所以还得为刚才创建好的对象填充数据，让它成为真正的实体。

 
public List<Couplets> GetData()
{ 
List<Couplets> couplets = new List<Couplets>();
Couplets c = new Couplets(1, "四字联", "一元复始；万象更新。");
couplets.Add(c);
c = new Couplets(2, "四字联", "风调雨顺；国盛人和。");
couplets.Add(c);
c = new Couplets(3, "四字联", "风调雨顺；国盛人和。");
couplets.Add(c);
c = new Couplets(4, "五字联", "金蛇含瑞草；紫燕报新春。");
couplets.Add(c);
c = new Couplets(5, "五字联", "龙年留胜绩；蛇岁展宏猷。");
couplets.Add(c);
c = new Couplets(6, "七字联", "壬辰传捷龙辞旧；癸巳报春蛇迎新。");
couplets.Add(c);
c = new Couplets(7, "七字联", "山高水远人增志；蛇接龙年地满春。");
couplets.Add(c);
c = new Couplets(8, "七字联", "小龙起舞神州地；祖国腾飞大治年。");
couplets.Add(c);
c = new Couplets(9, "七字联", "金山水漫双蛇舞；绿野春归百鸟鸣。");
couplets.Add(c);
return couplets;
} 

在Default.aspx网页上拉一个GridView控件。

 
<asp:GridView ID="GridViewCouplets" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" ToolTip="全选" onclick="SelectedAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" onclick="SelectedSingle(this);" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
ID
</HeaderTemplate>
<ItemStyle HorizontalAlign="Right" />
<ItemTemplate>
<%# Eval("ID") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Type
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Type") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Content
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Content") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

接下来，还得通过Default.aspx.cs页面为GridView绑定数据。

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Insus.NET;
public partial class _Default : System.Web.UI.Page
{ 
protected void Page_Load(object sender, EventArgs e)
{ 
if (!IsPostBack)
Data_Binding();
} 
private void Data_Binding()
{ 
this.GridViewCouplets.DataSource = GetData();
this.GridViewCouplets.DataBind();
} 
} 

在上面的html代码中，可以看到有两个CheckBhox，一个是放在GridView的HeaderTemplate模版上为了全选，另一个是放在ItemTemplate模版上为了单选。

每一个CheckBox都有一个OnClick事件，可参考如下Javascript代码：

 
<script type="text/javascript">
function SelectedAll(cb) {
cb.checked = cb.checked ? false : true;
var gv = document.getElementById('<%=GridViewCouplets.ClientID %>');
var rc = gv.rows.length;
for (var i = 1; i < rc; i++) {
var input = gv.rows[i].cells[0].getElementsByTagName("input");
if (input[0].type == "checkbox" && input[0].checked) {
input[0].checked = false;
gv.rows[i].style.backgroundColor = "";
} 
} else {
input[0].checked = true;
gv.rows[i].style.backgroundColor = "#66ff33;";
} 
} 
} 
}
}
}
row.style.backgroundColor = "#66ff33;";
} 
var row = cb.parentNode.parentNode;
if (cb.checked) {
} 
} 
row.style.backgroundColor = "#66ff33;";