GridView的全选／取消全选（二）－－完美联动版（源码，截图）
GridView的全选／取消全选－－完美联动版（源码，截图）
特点：与http://www.126.com/邮箱的效果相当。
特点：
1.与http://www.126.com/邮箱的效果相当。GridView的行与CheckBox，CheckBox列自身(与列头checkbox)实现联动选择效果。
2.实用行强，界面友好，用户用好。
截图如下：
有一个行未选择
点击未选的行后（全选）
代码如下：
dszq.aspx1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dszq.aspx.cs" Inherits="dszq" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
<html xmlns="http://www.w3.org/1999/xhtml">5
<head runat="server">6
<title>GridView选择联动版-东山再起-</title>7
</head>8
<body>9
<form id="form1" runat="server">10
<div>11
<asp:GridView ID="mygridview" PageSize="20" runat="server" AutoGenerateColumns="False"12
BorderWidth="0px" BackColor="#6ba5d8" CellPadding="2" CellSpacing="1" Font-Size="12px"13
Width="100%" OnRowDataBound="mygridview_RowDataBound" EmptyDataText="暂无信息！">14
<Columns>15
<asp:BoundField DataField="A" HeaderText="A" />16
<asp:BoundField DataField="B" HeaderText="B" />17
<asp:BoundField DataField="C" HeaderText="C" />18
<asp:BoundField DataField="D" HeaderText="D" />19
<asp:TemplateField>20
<HeaderTemplate>21
<font face="宋体">22
<asp:CheckBox ID="CheckBox2" onclick="SelectAll(this);" runat="server"></asp:CheckBox></font>23
</HeaderTemplate>24
<ItemTemplate>25
<asp:CheckBox ID="CheckBox1" Height="100%" runat="server" Width="100%"></asp:CheckBox>26
</ItemTemplate>27
<ItemStyle Width="20px" />28
</asp:TemplateField>29
</Columns>30
<RowStyle BackColor="White" Height="20px" HorizontalAlign="Center" VerticalAlign="Middle"31
Wrap="False" />32
<EmptyDataRowStyle BackColor="#EFF3FB" HorizontalAlign="Center" Height="20px" />33
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />34
<PagerStyle BackColor="#E0E0E0" HorizontalAlign="Right" />35
<HeaderStyle BackColor="#6699cc" Font-Bold="True" ForeColor="White" Height="22px" />36
<AlternatingRowStyle BackColor="#EFF3FB" />37
</asp:GridView>38
</div>39
</form>40
</body>41
</html>42
43
<script type="text/javascript">44
/**//////////////////////////////////////////////45
///////////GridView-东山再起/////////////////46
/////////////2007-10-20//////////////////////47
var e; 48
//鼠标移入49
function mouseOver(row,nowRadio)50
{51
e=row.style.backgroundColor; 52
row.style.backgroundColor='#99ccff';53
}54
55
//鼠标移出56
function mouseOut(row,rowindex,nowRadio)57
{ 58
if(nowRadio.checked==true)59
{60
row.style.backgroundColor='#99ccff';61
}62
else 63
{64
if(rowindex%2==0)65
{66
row.style.backgroundColor='AliceBlue';67
}68
else 69
{70
row.style.backgroundColor='#ffffff';71
}72
}73
} 74
75
/**//// 点击行选择checkbox效果76
function setCheck(row,rowIndex,nowCheckbox) //行，行号，选择框77
{ 78
nowCheckbox.checked=!(nowCheckbox.checked);79
if( nowCheckbox.checked==false)80
{81
if(rowIndex%2==0)82
{83
row.style.backgroundColor='AliceBlue';84
}85
else 86
{87
row.style.backgroundColor='#ffffff';88
}89
}90
else 91
{92
row.style.background='#99ccff'; 93
}94
95
//---------------用于选择与全选的一致性96
var ck2;97
var myForm=document.forms[0];98
for(var i=0;i<myForm.length;i++)99
{ 100
objRadio=myForm.elements[i];101
if(objRadio.type=="checkbox" &&objRadio.name.indexOf("CheckBox2")>-1)102
{103
ck2=objRadio;104
}105
} 106
var contact=IsContact(nowCheckbox); 107
if(contact==true)108
{ck2.checked=true; }109
else 110
{ ck2.checked=false; }111
//------------------112
}113
114
115
function IsContact(nowRadio)116
{ 117
contact=true;118
nowstate= nowRadio.checked;119
var myForm,objRadio;120
myForm=document.forms[0];121
for(var i=0;i<myForm.length;i++)122
{123
if(myForm.elements[i].type=="checkbox")124
{125
objRadio=myForm.elements[i];126
if(objRadio!=nowRadio && objRadio.name.indexOf("CheckBox1")>-1) 127
{128
if(objRadio.checked!=nowstate)129
{130
return false;131
}132
}133
}134
}135
136
return nowstate;137
138
} 139
140
141
142
/**////checkbox 取反143
function SelectAll(tempControl)144
{145
//将头模板中的其它所有的 checkbox 取反146
//alert(tempControl.parentElement.parentElement.parentElement.parentElement.parentElement.id);147
var elem=tempControl.parentElement.parentElement.parentElement.parentElement.parentElement.getElementsByTagName("input");148
var theBox=tempControl;149
xState=theBox.checked; 150
for(i=0;i<elem.length;i++)151
if(elem[i].type=="checkbox" && elem[i].id!=theBox.id)152
{ 153
if(elem[i].checked!=xState)154
elem[i].click();155
// elem[i].checked=xState;156
}157
158
} 159
160
</script>161
162
dszq.aspx.cs1
using System;2
using System.Data;3
using System.Configuration;4
using System.Collections;5
using System.Web;6
using System.Web.Security;7
using System.Web.UI;8
using System.Web.UI.WebControls;9
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class dszq : System.Web.UI.Page13
{14
Page_Load#region Page_Load15
protected void Page_Load(object sender, EventArgs e)16
{17
if (!IsPostBack)18
{19
GVBind();20
}21
}22
#endregion23
24
GVBind#region GVBind25
protected void GVBind()26
{27
DataTable dt = new DataTable();28
dt.Columns.Add("A", typeof(string));29
dt.Columns.Add("B", typeof(string));30
dt.Columns.Add("C", typeof(string));31
dt.Columns.Add("D", typeof(string));32
33
for (int i = 0; i < 10; i++)34
{35
DataRow dr = dt.NewRow();36
dr[0] = "A" + i.ToString();37
dr[1] = "B" + i.ToString();38
dr[2] = "C" + i.ToString();39
dr[3] = "D" + i.ToString();40
dt.Rows.Add(dr);41
}42
mygridview.DataSource = dt.DefaultView;43
mygridview.DataBind();44
}45
#endregion46
47
RowDataBound#region RowDataBound48
protected void mygridview_RowDataBound(object sender, GridViewRowEventArgs e)49
{50
if (e.Row.RowIndex != -1)51
{52
CheckBox checkbox1 = ((CheckBox)(e.Row.Cells[3].FindControl("CheckBox1")));53
e.Row.Attributes.Add("onclick", "setCheck(this," + e.Row.RowIndex + "," + checkbox1.ClientID + ")");54
55
//给每个checkbox绑定setCheck事件(JS)56
checkbox1.Attributes.Add("onclick", "setCheck(" + e.Row.ClientID + "," + e.Row.RowIndex + ",this)");57
checkbox1.Attributes.Add("ondblclick", " return false;");//但是没有避免掉默认的执行行事件58
59
//鼠标经过Row时的效果60
string Index = Convert.ToString(e.Row.RowIndex + 1); // 颜色错位了，用这个来调节的61
e.Row.Attributes.Add("onmouseover", "mouseOver(this," + checkbox1.ClientID + ")");62
e.Row.Attributes.Add("onmouseout", "mouseOut(this," + Index + "," + checkbox1.ClientID + ")");63
64
e.Row.Attributes["style"] = "cursor:hand";65
66
}67
}68
#endregion69
}70
示例下载
声明：本人源码，无私贡献，帮助需要的人。如果转载请注明出处。
浙公网安备 33010602011771号