javascript实现datagrid客户端checkbox列的全选,反选

简介:
1 /* 分页
2 参数说明:
3 prefix:前缀;chkAll:全选框;chkSingle:单选框ID
4
5 使用方法:
6 if(e.Item.ItemType == ListItemType.Header)
7 {
8 ((CheckBox)e.Item.Cells[1].FindControl("chkAll")).Attributes.Add("onclick","CheckAll('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
9 }
10*/

11 function CheckAll(prefix,chkAll,chkSingle)
12 {
13 var indexChkAll;
14 if(prefix.length != 0)
15 {
16 indexChkAll = prefix + "__ctl2_" + chkAll;
17 }

18 else
19 {
20 indexChkAll = chkAll;
21 }

22 var objChkAll = document.getElementById(indexChkAll);
23 var tempObj;
24 for(var i=0;i<document.forms[0].elements.length;i++)
25 {
26 tempObj = document.forms[0].elements[i];
27 if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
28 {
29 tempObj.checked = objChkAll.checked;
30 }

31 }

32}

33 /* 分页
34 参数说明:
35 prefix:前缀;chkAll:全选框;chkSingle:单选框ID
36
37 使用方法:
38 if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
39 {
40 ((CheckBox)e.Item.Cells[1].FindControl("chkSingle")).Attributes.Add("onclick","CheckSingle('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
41 }
42*/

43 function CheckSingle(prefix,chkAll,chkSingle)
44 {
45 var indexChkAll;
46 if(prefix.length != 0)
47 {
48 indexChkAll = prefix + "__ctl2_" + chkAll;
49 }

50 else
51 {
52 indexChkAll = chkAll;
53 }

54 var objChkAll = document.getElementById(indexChkAll);
55 var tempObj;
56 var allCount = 0;
57 var checkCount = 0;
58 for(var i=0;i<document.forms[0].elements.length;i++)
59 {
60 tempObj = document.forms[0].elements[i];
61 if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
62 {
63 if(tempObj.checked)
64 {
65 checkCount++;
66 }

67 else
68 {
69 objChkAll.checked = false;
70 //break;
71 }

72 allCount++;
73 }

74 }

75 if(checkCount != allCount)
76 {
77 objChkAll.checked = false;
78 }

79 else
80 {
81 if(allCount != 0)
82 {
83 objChkAll.checked = true;
84 }

85 }

86}

87 /*
88 参数说明:
89 prefix:前缀;chkAll:全选框;chkSingle:单选框ID
90 type:1【全选】,2【反选】,3【取消】
91
92 使用方法:
93 this.btnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',1);");
94 this.btnUnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',2);");
95 this.btnCancelSelect.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',3);");
96*/

97 function CheckType(prefix,chkAll,chkSingle,type)
98 {
99 var indexChkAll;
100 if(prefix.length != 0)
101 {
102 indexChkAll = prefix + "__ctl2_" + chkAll;
103 }

104 else
105 {
106 indexChkAll = chkAll;
107 }

108 var objChkAll = document.getElementById(indexChkAll);
109 var tempObj;
110 var allCount = 0;
111 var checkCount = 0;
112 for(var i=0;i<document.forms[0].elements.length;i++)
113 {
114 tempObj = document.forms[0].elements[i];
115 if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
116 {
117 switch(type)
118 {
119 case 1:
120 tempObj.checked = true;
121 break;
122 case 2:
123 tempObj.checked = !tempObj.checked;
124 break;
125 case 3:
126 tempObj.checked = false;
127 break;
128 }

129 if(tempObj.checked)
130 {
131 checkCount++;
132 }

133 allCount++;
134 }

135 }

136 if(checkCount != allCount)
137 {
138 objChkAll.checked = false;
139 }

140 else
141 {
142 if(allCount != 0)
143 {
144 objChkAll.checked = true;
145 }

146 }

147 window.event.returnValue = false;
148 return false;
149}

150
151 /*
152 参数说明:
153 prefix:前缀;chkAll:全选框;chkSingle:单选框ID
154
155 使用方法:
156 this.btnDelete.Attributes.Add("onClick","SubmitCheckBox('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
157*/

158 function SubmitCheckBox(prefix,chkAll,chkSingle,msg)
159 {
160 var indexChkAll;
161 if(prefix.length != 0)
162 {
163 indexChkAll = prefix + "__ctl2_" + chkAll;
164 }

165 else
166 {
167 indexChkAll = chkAll;
168 }

169 var objChkAll = document.getElementById(indexChkAll);
170
171 var tempObj;
172 var allCount = 0;
173 var checkCount = 0;
174 for(var i=0;i<document.forms[0].elements.length;i++)
175 {
176 tempObj = document.forms[0].elements[i];
177 if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
178 {
179 if(tempObj.checked)
180 {
181 checkCount++;
182 }

183 allCount++;
184 }

185 }

186 if(allCount == 0) //没有数据
187 {
188 window.alert("当前没有" + msg + "可供删除");
189 window.event.returnValue = false;
190 return false;
191 }

192 else
193 {
194 if(checkCount == 0)
195 {
196 window.alert("没有选中要删除的" + msg + "");
197 window.event.returnValue = false;
198 return false;
199 }

200 else
201 {
202 //if(window.confirm("确定要删除当前选中的【" + checkCount.toString() + "】项吗?") == false)
203 if(window.confirm("确定要删除当前选中的" + msg + "吗?") == false)
204 {
205 window.event.returnValue = false;
206 return false;
207 }

208 }

209 }

210}



本文转自高海东博客园博客,原文链接:http://www.cnblogs.com/ghd258/archive/2005/11/07/270449.html,如需转载请自行联系原作者
相关文章
|
7月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
202 1
|
JSON JavaScript 前端开发
基于promise用于浏览器和node.js的http客户端的axios
基于promise用于浏览器和node.js的http客户端的axios
74 0
|
JavaScript
JS检测客户端是否安装
JS检测客户端是否安装
|
7月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
47 0
|
27天前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
6月前
|
JavaScript 前端开发
杨老师课堂之JavaScript案例全选、全不选、及反选
杨老师课堂之JavaScript案例全选、全不选、及反选
34 1
|
3月前
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
这篇文章介绍了在Nest.js应用中使用Server-Sent Events (SSE)的技术。文章首先讨论了在特定业务场景下,为何选择SSE而不是WebSocket作为实时通信系统的实现方式。接着解释了SSE的概念,并展示了如何在Nest.js中实现SSE。文章包含客户端实现的代码示例,并以一个效果演示结束,总结SSE在Nest.js中的应用。
Nest.js 实战 (十三):实现 SSE 服务端主动向客户端推送消息
|
2月前
|
前端开发 网络协议
Nest.js 实战 (十四):如何获取客户端真实 IP
这篇文章介绍了在Nest.js应用中获取客户端真实IP地址的问题及解决方法。问题出现在使用本地代理时,请求的IP地址总是返回::1或::ffff:127.0.0.1。为解决这个问题,需要确保代理服务器正确设置转发头如X-Forwarded-For或X-Real-IP,后端服务能够读取这些头信息来确定客户端的IP地址。文章以作者自己的OpenResty应用为例,展示了如何通过配置反向代理和设置X-Forwarded-For头来获取真实IP地址,并提供了相关的代码示例。最后,文章提到了使用这个解决方案后的实际效果,例如在操作日志中记录真实IP地址。
|
3月前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
4月前
|
JavaScript 前端开发 C++
【Vue.js的终极对决】服务端渲染VS客户端渲染:一场关乎速度与SEO的生死较量!
【8月更文挑战第30天】Vue.js 是一个流行的 JavaScript 框架,支持服务端渲染(SSR)和客户端渲染。SSR 在服务器生成完整 HTML,有利于 SEO 并缩短首屏加载时间,但增加服务器负担;客户端渲染则在浏览器生成页面,提升交互性,降低服务器负载。本文通过代码示例对比两者优劣,并提供选择指南,帮助开发者根据 SEO 需求、交互性需求及服务器资源等条件,选择合适的渲染方式,从而优化应用性能和用户体验。
80 0