GridView的全选／取消全选（二）－－完美联动版（源码，截图）

最新推荐文章于 2024-07-07 23:10:31 发布

weixin_30856965

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量51

点赞数

文章标签： xhtml ui c#

原文链接：http://www.cnblogs.com/jdmei520/archive/2008/07/30/1256219.html

版权

特点：
1.与http://www.126.com/邮箱的效果相当。GridView的行与CheckBox，CheckBox列自身(与列头checkbox)实现联动选择效果。
2.实用行强，界面友好，用户用好。
截图如下：
r_Gridview选择联动版1.bmp
有一个行未选择

r_Gridview选择联动版2.bmp
点击未选的行后（全选）

代码如下：

dszq.aspx
1

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dszq.aspx.cs" Inherits="dszq" %>
2

<!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

/**//
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

//鼠标移出
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

/**//// 点击行选择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

//---------------用于选择与全选的一致性
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.cs
1

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

public partial class dszq : System.Web.UI.Page
13

{
14

Page_Load#region Page_Load
15

protected void Page_Load(object sender, EventArgs e)
16

{
17

if (!IsPostBack)
18

{
19

GVBind();
20

}
21

}
22

#endregion
23

GVBind#region GVBind
25

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

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

#endregion
46

RowDataBound#region RowDataBound
48

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

//给每个checkbox绑定setCheck事件(JS)
56

checkbox1.Attributes.Add("onclick", "setCheck(" + e.Row.ClientID + "," + e.Row.RowIndex + ",this)");
57

checkbox1.Attributes.Add("ondblclick", " return false;");//但是没有避免掉默认的执行行事件
58

//鼠标经过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

e.Row.Attributes["style"] = "cursor:hand";
65

}
67

}
68

#endregion
69

}
70

示例下载
声明：本人源码，无私贡献，帮助需要的人。如果转载请注明出处。

转载于:https://www.cnblogs.com/jdmei520/archive/2008/07/30/1256219.html

weixin_30856965

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GridView的全选／取消全选（二）－－完美联动版（源码，截图）

特点：1.与http://www.126.com/邮箱的效果相当。GridView的行与CheckBox，CheckBox列自身(与列头checkbox)实现联动选择效果。2.实用行强，界面友好，用户用好。截图如下：有一个行未选择点击未选的行后（全选）代码如下：dszq.aspx1<%@PageLanguage="C#"AutoEventWireup="true"CodeFi...
复制链接

扫一扫