您的位置:首页 > Web前端 > JavaScript

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

2007-03-03 10:00 651 查看
最简格式:这是一个偷巧的方法,但不通用。前提是这个页面只有一个datagrid,且只有datagrid中有checkbox;这个就比较方便。主要思路就是搜索出整个页面的checkbox,将它们全部选中或反选。
// 全选
function allCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=true;
}

}
//反选
function revCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=!e.checked;
}
}

通用简单格式
因为asp.net页面中生成datagrid中的checkbox,他的ID是要改变的,所以我们寻找它们的规律,就可以准确的找到这个控件,从而进行全选和反选及选中的操作,
参数说明:
prefix:前缀;s:选择框ID;chk:选择框的ID;

function getObj( objID )
{
return document.getElementById( objID );
}

// 全选
function _SelectAll( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
oArr[o].checked = true;
}
}
// 反选
function _RevSelect( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
oArr[o].checked = !oArr[o].checked;
}
}

// 获值
function _GetColl( prefix,s,chk )
{
var i = s;
var oArr = new Array();
while( true)
{
var o = getObj( prefix + '__ctl' + i + '_' + chk);
if( o != null )
{
oArr.push( o );
}
else
{
break;
}
i++;
}

return oArr;
}
// 检查是否选中
function _CheckSelect( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
if( oArr[o].checked)
{
return true;
}
}
return false;

}

推荐通用详细格式:http://www.cnblogs.com/ghd258/archive/2005/11/07/270449.html#Post
/* 分页
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*/
11function 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*/
43function 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*/
97function 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*/
158function 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}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: