jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定。
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked,另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。
有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看,
jQuery EasyUI 官网
jQuery EasyUI Documentation
DataGrid Demo
CheckBox select on DataGrid
使用的范例 JSON 数据:
01.
{
02.
"total"
: 4,
03.
"rows"
: [
04.
{
05.
"productid"
:
"FI-SW-01"
,
06.
"productname"
:
"Koi"
,
07.
"unitcost"
: 10.00,
08.
"status"
:
"P"
,
09.
"listprice"
: 36.50,
10.
"attr1"
:
"Large"
,
11.
"itemid"
:
"EST-1"
,
12.
"checked"
:
true
13.
},
14.
{
15.
"productid"
:
"K9-DL-01"
,
16.
"productname"
:
"Dalmation"
,
17.
"unitcost"
: 12.00,
18.
"status"
:
"P"
,
19.
"listprice"
: 18.50,
20.
"attr1"
:
"Spotted Adult Female"
,
21.
"itemid"
:
"EST-10"
,
22.
"checked"
:
true
23.
},
24.
{
25.
"productid"
:
"RP-SN-01"
,
26.
"productname"
:
"Rattlesnake"
,
27.
"unitcost"
: 12.00,
28.
"status"
:
"P"
,
29.
"listprice"
: 38.50,
30.
"attr1"
:
"Venomless"
,
31.
"itemid"
:
"EST-11"
,
32.
"checked"
:
true
33.
},
34.
{
35.
"productid"
:
"RP-SN-01"
,
36.
"productname"
:
"Rattlesnake"
,
37.
"unitcost"
: 12.00,
38.
"status"
:
"P"
,
39.
"listprice"
: 26.50,
40.
"attr1"
:
"Rattleless"
,
41.
"itemid"
:
"EST-12"
,
42.
"checked"
:
false
43.
}
44.
]
45.
}
设定方式一:使用预设的设定方式
网页的 HTML 原始码内容
01.
<
body
>
02.
<
h2
>Custom CheckBox on DataGrid</
h2
>
03.
04.
<
input
type
=
"button"
id
=
"ButonGetCheck"
value
=
"Get Checked"
/>
05.
<
br
/><
br
/>
06.
07.
<
table
id
=
"dg"
></
table
>
08.
09.
</
body
>
我是习惯把 DataGrid 的相关设定放在 Javascript 程序中,因为这会比直接在 HTML 的 Table Tag 使用属性设定的方式还具有弹性,
Javascript 程序中的 DataGrid 设定
01.
$(
'#dg'
).datagrid({
02.
title:
'CheckBox Selection on DataGrid'
,
03.
url:
'datagrid_data3.json'
,
04.
width:
'700'
,
05.
rownumbers:
true
,
06.
columns:[[
07.
{ field:
'ck'
,checkbox:
true
},
08.
{ field:
'productid'
, title:
'productid'
},
09.
{ field:
'productname'
, title:
'productname'
},
10.
{ field:
'unitcost'
, title:
'unitcost'
},
11.
{ field:
'status'
, title:
'status'
},
12.
{ field:
'listprice'
, title:
'listprice'
},
13.
{ field:
'itemid'
, title:
'itemid'
}
14.
]],
15.
singleSelect:
false
,
16.
selectOnCheck:
true
,
17.
checkOnSelect:
true
18.
});
设定完成后的页面如下:
但是我们的 JSON 数据里有个字段是「checked」,这个字段的数据 true / false 就是用来设定 Checkbox 是否勾选,而设定的动作必须要在 DataGrid 加载数据完成后再去执行,这边会使用到 jQuery 的 each 去逐一检查每个数据列的的数据内容,假如 checked 为 true,那就使用「checkRow」这个 Method 将该数据列的 Checkbox 设为勾选的状态,
修改后的 DataGrid 设定程序如下:
01.
$(
'#dg'
).datagrid({
02.
title:
'CheckBox Selection on DataGrid'
,
03.
url:
'datagrid_data3.json'
,
04.
width:
'700'
,
05.
rownumbers:
true
,
06.
columns:[[
07.
{ field:
'ck'
,checkbox:
true
},
08.
{ field:
'productid'
, title:
'productid'
},
09.
{ field:
'productname'
, title:
'productname'
},
10.
{ field:
'unitcost'
, title:
'unitcost'
},
11.
{ field:
'status'
, title:
'status'
},
12.
{ field:
'listprice'
, title:
'listprice'
},
13.
{ field:
'itemid'
, title:
'itemid'
}
14.
]],
15.
singleSelect:
false
,
16.
selectOnCheck:
true
,
17.
checkOnSelect:
true
,
18.
onLoadSuccess:
function
(data){
19.
if
(data){
20.
$.each(data.rows,
function
(index, item){
21.
if
(item.checked){
22.
$(
'#dg'
).datagrid(
'checkRow'
, index);
23.
}
24.
});
25.
}
26.
}
27.
});
重新执行页面后就可以看到 checked 为 true 的数据列 Checkbox 都为勾选,
再来就是要取得勾选的数据值,这边也是使用 DataGrid 所提供的 Method「getChecked」 www.it165.net
程序如下:
1.
$(
'#ButonGetCheck'
).click(
function
(){
2.
var
checkedItems = $(
'#dg'
).datagrid(
'getChecked'
);
3.
var
names = [];
4.
$.each(checkedItems,
function
(index, item){
5.
names.push(item.productname);
6.
});
7.
console.log(names.join(
","
));
8.
});
最后的执行结果:
方式一的完整 Javascript 程序:
01.
$(
'#dg'
).datagrid({
02.
title:
'CheckBox Selection on DataGrid'
,
03.
url:
'datagrid_data3.json'
,
04.
width:
'700'
,
05.
rownumbers:
true
,
06.
columns:[[
07.
{ field:
'ck'
,checkbox:
true
},
08.
{ field:
'productid'
, title:
'productid'
},
09.
{ field:
'productname'
, title:
'productname'
},
10.
{ field:
'unitcost'
, title:
'unitcost'
},
11.
{ field:
'status'
, title:
'status'
},
12.
{ field:
'listprice'
, title:
'listprice'
},
13.
{ field:
'itemid'
, title:
'itemid'
}
14.
]],
15.
singleSelect:
false
,
16.
selectOnCheck:
true
,
17.
checkOnSelect:
true
,
18.
onLoadSuccess:
function
(data){
19.
if
(data){
20.
$.each(data.rows,
function
(index, item){
21.
if
(item.checked){
22.
$(
'#dg'
).datagrid(
'checkRow'
, index);
23.
}
24.
});
25.
}
26.
}
27.
});
28.
29.
$(
'#ButonGetCheck'
).click(
function
(){
30.
var
checkedItems = $(
'#dg'
).datagrid(
'getChecked'
);
31.
var
names = [];
32.
$.each(checkedItems,
function
(index, item){
33.
names.push(item.productname);
34.
});
35.
console.log(names.join(
","
));
36.
});
设定方式二:不使用预设的设定方式与 Method
这个设定的方式应该是在 jQuery EasyUI 1.3 之前所使用的,因为早期的版本并没有足够的设定方式与 Method 让使用者可以去增加 Checkbox 的项目,这边所使用的 JSON 数据以及 HTML 原始码都跟设定方式一的内容是一样的,不一样的地方在于 Javascript 程序的部份,
先看 DataGrid 的设定
01.
$(
'#dg'
).datagrid({
02.
title:
'CheckBox Selection on DataGrid'
,
03.
url:
'datagrid_data3.json'
,
04.
width:
'700'
,
05.
rownumbers:
true
,
06.
columns:[[
07.
{field:
'checked'
,formatter:
function
(value,row,index){
08.
if
(row.checked){
09.
return
'<input type="checkbox" name="DataGridCheckbox" checked="checked">'
;
10.
}
11.
else
{
12.
return
'<input type="checkbox" name="DataGridCheckbox">'
;
13.
}
14.
}},
15.
{ field:
'productid'
, title:
'productid'
},
16.
{ field:
'productname'
, title:
'productname'
},
17.
{ field:
'unitcost'
, title:
'unitcost'
},
18.
{ field:
'status'
, title:
'status'
},
19.
{ field:
'listprice'
, title:
'listprice'
},
20.
{ field:
'itemid'
, title:
'itemid'
}
21.
]],
22.
singleSelect:
true
23.
});
这边的 Checkbox 设定则是使用 formatter 的方式,类似 ASP.NET GridView 的 ItemTemplate 设定方式,判断每个数据列的 checked 字段数据是否为 true,如 checked 为 true 则回传一个有勾选的 Checkbox,不过这样的设定方式就不会在 DataGrid 的字段名称列出现可让使用者全选的 Checkbox,如需要的话就必须再用其它的方式来做设定,不过这边就不介绍,
接着就是取得有勾选的数据值,因为这里是使用自己加入 checkbox tag 的方式,所以就无法使用 DataGrid 所提供的 getChecked 方法,而是必须要另外写程序来处理,可以使用 extend 的方式去扩充 DataGrid 的方法,
程序如下:
01.
$.extend($.fn.datagrid.methods, {
02.
getChecked:
function
(jq) {
03.
var
rr = [];
04.
var
rows = jq.datagrid(
'getRows'
);
05.
jq.datagrid(
'getPanel'
).find(
'div.datagrid-cell input:checked'
).each(
function
() {
06.
var
index = $(
this
).parents(
'tr:first'
).attr(
'datagrid-row-index'
);
07.
rr.push(rows[index]);
08.
});
09.
return
rr;
10.
}
11.
});
这么一来在取得 DataGrid 的 Checkbox 有勾选的数据值就可以沿用方式一的程序,
1.
$(
'#ButonGetCheck'
).click(
function
(){
2.
var
checkedItems = $(
'#dg'
).datagrid(
'getChecked'
);
3.
var
names = [];
4.
$.each(checkedItems,
function
(index, item){
5.
names.push(item.productname);
6.
});
7.
console.log(names.join(
","
));
8.
});
执行结果:
完整 Javascript 程序如下:
01.
$(
function
(){
02.
$(
'#dg'
).datagrid({
03.
title:
'CheckBox Selection on DataGrid'
,
04.
url:
'datagrid_data3.json'
,
05.
width:
'700'
,
06.
rownumbers:
true
,
07.
columns:[[
08.
{field:
'checked'
,formatter:
function
(value,row,index){
09.
if
(row.checked){
10.
return
'<input type="checkbox" name="DataGridCheckbox" checked="checked">'
;
11.
}
12.
else
{
13.
return
'<input type="checkbox" name="DataGridCheckbox">'
;
14.
}
15.
}},
16.
{ field:
'productid'
, title:
'productid'
},
17.
{ field:
'productname'
, title:
'productname'
},
18.
{ field:
'unitcost'
, title:
'unitcost'
},
19.
{ field:
'status'
, title:
'status'
},
20.
{ field:
'listprice'
, title:
'listprice'
},
21.
{ field:
'itemid'
, title:
'itemid'
}
22.
]],
23.
singleSelect:
true
24.
});
25.
26.
$(
'#ButonGetCheck'
).click(
function
(){
27.
var
checkedItems = $(
'#dg'
).datagrid(
'getChecked'
);
28.
var
names = [];
29.
$.each(checkedItems,
function
(index, item){
30.
names.push(item.productname);
31.
});
32.
console.log(names.join(
","
));
33.
});
34.
});
35.
36.
$.extend($.fn.datagrid.methods, {
37.
getChecked:
function
(jq) {
38.
var
rr = [];
39.
var
rows = jq.datagrid(
'getRows'
);
40.
jq.datagrid(
'getPanel'
).find(
'div.datagrid-cell input:checked'
).each(
function
() {
41.
var
index = $(
this
).parents(
'tr:first'
).attr(
'datagrid-row-index'
);
42.
rr.push(rows[index]);
43.
});
44.
return
rr;
45.
}
46.
});
转载于:https://www.cnblogs.com/telwanggs/p/5623742.html
jQuery EasyUI DataGrid Checkbox 数据设定与取值相关推荐
- ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理
ThinkPHP和jQuery EasyUI这两个都是不错的框架,现在要把它两个整合到一块,做个简单的Ajax调用查询. 在ThinkPHP模板中引入EasyUI的相关文件,然后设置按钮3的调用: & ...
- easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重 ...
- jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...
- easyUI -datagrid表格数据不显示
出现easyUI -datagrid表格数据无法显示这种情况的可能原因有多方面的,可能是因情况而异吧,现在说一下日常做项目中我遇到过的这几个方面(原因二是我遇到过的,在网上看到也是常有的) 前提: 在 ...
- jmeter提取mysql数据_通过jmeter读取数据库数据,并取值作为请求的入参
为提升测试技能,督促自己学习.故写了这篇文章.测试小白一枚,最近感觉达到了自己认为的瓶颈期.总是有想法,想突破,但是无从入手.工具类用过fiddler.jmeter.charels.postman.. ...
- jQuery easyUI中LinkButton获取它的属性值
jQuery easyUI中LinkButton获取它的属性值 LinkButton按钮如下: <a id="btn" href="#" class=&q ...
- jQuery EasyUI DataGrid 分页 FOR ASP.NET
源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...
最新文章
- 2015二级c语言题库,2015年计算机二级C语言测试题及答案(9)
- 如何用纯 CSS 创作一个方块旋转动画
- arcsde服务启动不了
- (6)段描述符D/B位
- 史上最详细阿里云Docker下载运行Zookeeper!!!!
- Shell特殊变量:Shell $0,$#,$*,$@,$?,$$和命令行参数
- 写了个序列化反序列化助手
- CodeIgniter配置之config
- 最有价值的100句话
- gin 静态文件服务器拒绝,nginx实现简单的图片服务器(windows)+静态文件服务器-Go语言中文社区...
- extjs展示列表,显示来很多空白行,但是数据没显示
- struts2 过滤器和拦截器的区别和使用
- 用“归并”改进“快速排序”
- 如何让一个层关闭之后,就算刷新页面了也不显示。除非关闭页面再次打开
- nodejs 任务调度bull 测试解析
- this的作用(转)
- HIVE SQL DDL语句实例
- 基于遗传算法的柔性流水车间调度设计与实现(论文+源码+答辩ppt)
- nexrcloud 自动上传_Nextcloud默认文件的自定义
- 【Delphi学习】Form的borderstyle属性
热门文章
- (6)ISE14.7生成bit文件报错解决(FPGA不积跬步101)
- (41)FPGA状态机一段式
- div输入的内容全选css,将CSS类应用于内容中的选定文本可编辑div
- TCP超时设置的客户端重发5次
- wait() 和 waitpid()
- mysql 字段操作_Mysql:数据库操作、数据表操作、字段操作整理
- ftp安装包_【干货分享】原来cisco通过FTP,TFTP系统升级是这样做的?
- (7)哈希表的链地址法实现
- 基于K60/K66/LPC的HC-SR04超声波测距(附带代码)
- [C++] - Returning by const value