jQuery EasyUI DataGrid Checkbox 数据设定与取值

Posted 2020-09-23 网络虫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 数据：

{
"total": 4,
"rows": [
{
"productid": "FI-SW-01",
"productname": "Koi",
"unitcost": 10.00,
"status": "P",
"listprice": 36.50,
"attr1": "Large",
"itemid": "EST-1",
"checked": true
},
{
"productid": "K9-DL-01",
"productname": "Dalmation",
"unitcost": 12.00,
"status": "P",
"listprice": 18.50,
"attr1": "Spotted Adult Female",
"itemid": "EST-10",
"checked": true
},
{
"productid": "RP-SN-01",
"productname": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 38.50,
"attr1": "Venomless",
"itemid": "EST-11",
"checked": true
},
{
"productid": "RP-SN-01",
"productname": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 26.50,
"attr1": "Rattleless",
"itemid": "EST-12",
"checked": false
}
]
}

设定方式一：使用预设的设定方式
网页的 html 原始码内容

<body>
<h2>Custom CheckBox on DataGrid</h2>
 
<input type="button" id="ButonGetCheck" value="Get Checked" />
<br/><br/>
 
<table id="dg"></table>
 
</body>

我是习惯把 DataGrid 的相关设定放在 JavaScript 程序中，因为这会比直接在 HTML 的 Table Tag 使用属性设定的方式还具有弹性，

javascript 程序中的 DataGrid 设定

$(‘#dg‘).datagrid({
title: ‘CheckBox Selection on DataGrid‘,
url: ‘datagrid_data3.json‘,
width: ‘700‘,
rownumbers: true,
columns:[[
{ field:‘ck‘,checkbox:true },
{ field: ‘productid‘, title: ‘productid‘ },
{ field: ‘productname‘, title: ‘productname‘ },
{ field: ‘unitcost‘, title: ‘unitcost‘ },
{ field: ‘status‘, title: ‘status‘ },
{ field: ‘listprice‘, title: ‘listprice‘ },
{ field: ‘itemid‘, title: ‘itemid‘ }
]],
singleSelect: false,
selectOnCheck: true,
checkOnSelect: true
});

设定完成后的页面如下：

但是我们的 JSON 数据里有个字段是「checked」，这个字段的数据 true / false 就是用来设定 Checkbox 是否勾选，而设定的动作必须要在 DataGrid 加载数据完成后再去执行，这边会使用到 jquery 的 each 去逐一检查每个数据列的的数据内容，假如 checked 为 true，那就使用「checkRow」这个 Method 将该数据列的 Checkbox 设为勾选的状态，

修改后的 DataGrid 设定程序如下：

$(‘#dg‘).datagrid({
title: ‘CheckBox Selection on DataGrid‘,
url: ‘datagrid_data3.json‘,
width: ‘700‘,
rownumbers: true,
columns:[[
{ field:‘ck‘,checkbox:true },
{ field: ‘productid‘, title: ‘productid‘ },
{ field: ‘productname‘, title: ‘productname‘ },
{ field: ‘unitcost‘, title: ‘unitcost‘ },
{ field: ‘status‘, title: ‘status‘ },
{ field: ‘listprice‘, title: ‘listprice‘ },
{ field: ‘itemid‘, title: ‘itemid‘ }
]],
singleSelect: false,
selectOnCheck: true,
checkOnSelect: true,
onLoadSuccess:function(data){                   
if(data){
$.each(data.rows, function(index, item){
if(item.checked){
$(‘#dg‘).datagrid(‘checkRow‘, index);
}
});
}
}                
});

重新执行页面后就可以看到 checked 为 true 的数据列 Checkbox 都为勾选，

再来就是要取得勾选的数据值，这边也是使用 DataGrid 所提供的 Method「getChecked」 www.it165.NET

程序如下：

$(‘#ButonGetCheck‘).click(function(){
var checkedItems = $(‘#dg‘).datagrid(‘getChecked‘);
var names = [];
$.each(checkedItems, function(index, item){
names.push(item.productname);
});               
console.log(names.join(","));
});

最后的执行结果：

方式一的完整 javascript 程序：

$(‘#dg‘).datagrid({
title: ‘CheckBox Selection on DataGrid‘,
url: ‘datagrid_data3.json‘,
width: ‘700‘,
rownumbers: true,
columns:[[
{ field:‘ck‘,checkbox:true },
{ field: ‘productid‘, title: ‘productid‘ },
{ field: ‘productname‘, title: ‘productname‘ },
{ field: ‘unitcost‘, title: ‘unitcost‘ },
{ field: ‘status‘, title: ‘status‘ },
{ field: ‘listprice‘, title: ‘listprice‘ },
{ field: ‘itemid‘, title: ‘itemid‘ }
]],
singleSelect: false,
selectOnCheck: true,
checkOnSelect: true,
onLoadSuccess:function(data){                   
if(data){
$.each(data.rows, function(index, item){
if(item.checked){
$(‘#dg‘).datagrid(‘checkRow‘, index);
}
});
}
}                
});
 
$(‘#ButonGetCheck‘).click(function(){
var checkedItems = $(‘#dg‘).datagrid(‘getChecked‘);
var names = [];
$.each(checkedItems, function(index, item){
names.push(item.productname);
});               
console.log(names.join(","));
});

设定方式二：不使用预设的设定方式与 Method

这个设定的方式应该是在 jQuery EasyUI 1.3 之前所使用的，因为早期的版本并没有足够的设定方式与 Method 让使用者可以去增加 Checkbox 的项目，这边所使用的 JSON 数据以及 HTML 原始码都跟设定方式一的内容是一样的，不一样的地方在于 Javascript 程序的部份，

先看 DataGrid 的设定

$(‘#dg‘).datagrid({
title: ‘CheckBox Selection on DataGrid‘,
url: ‘datagrid_data3.json‘,
width: ‘700‘,
rownumbers: true,
columns:[[
{field:‘checked‘,formatter:function(value,row,index){
if(row.checked){
return ‘<input type="checkbox" name="DataGridCheckbox" checked="checked">‘;
}
else{
return ‘<input type="checkbox" name="DataGridCheckbox">‘;
}
}},
{ field: ‘productid‘, title: ‘productid‘ },
{ field: ‘productname‘, title: ‘productname‘ },
{ field: ‘unitcost‘, title: ‘unitcost‘ },
{ field: ‘status‘, title: ‘status‘ },
{ field: ‘listprice‘, title: ‘listprice‘ },
{ field: ‘itemid‘, title: ‘itemid‘ }
]],
singleSelect: true
});

这边的 Checkbox 设定则是使用 formatter 的方式，类似 ASP.NET GridView 的 ItemTemplate 设定方式，判断每个数据列的 checked 字段数据是否为 true，如 checked 为 true 则回传一个有勾选的 Checkbox，不过这样的设定方式就不会在 DataGrid 的字段名称列出现可让使用者全选的 Checkbox，如需要的话就必须再用其它的方式来做设定，不过这边就不介绍，

接着就是取得有勾选的数据值，因为这里是使用自己加入 checkbox tag 的方式，所以就无法使用 DataGrid 所提供的 getChecked 方法，而是必须要另外写程序来处理，可以使用 extend 的方式去扩充 DataGrid 的方法，

程序如下：

$.extend($.fn.datagrid.methods, {
getChecked: function (jq) {
var rr = [];
var rows = jq.datagrid(‘getRows‘);
jq.datagrid(‘getPanel‘).find(‘div.datagrid-cell input:checked‘).each(function () {
var index = $(this).parents(‘tr:first‘).attr(‘datagrid-row-index‘);
rr.push(rows[index]);
});
return rr;
}
});

这么一来在取得 DataGrid 的 Checkbox 有勾选的数据值就可以沿用方式一的程序，

$(‘#ButonGetCheck‘).click(function(){
var checkedItems = $(‘#dg‘).datagrid(‘getChecked‘);
var names = [];
$.each(checkedItems, function(index, item){
names.push(item.productname);
});               
console.log(names.join(","));
});

执行结果：

技术分享

完整 Javascript 程序如下：

$(function(){
$(‘#dg‘).datagrid({
title: ‘CheckBox Selection on DataGrid‘,
url: ‘datagrid_data3.json‘,
width: ‘700‘,
rownumbers: true,
columns:[[
{field:‘checked‘,formatter:function(value,row,index){
if(row.checked){
return ‘<input type="checkbox" name="DataGridCheckbox" checked="checked">‘;
}
else{
return ‘<input type="checkbox" name="DataGridCheckbox">‘;
}
}},
{ field: ‘productid‘, title: ‘productid‘ },
{ field: ‘productname‘, title: ‘productname‘ },
{ field: ‘unitcost‘, title: ‘unitcost‘ },
{ field: ‘status‘, title: ‘status‘ },
{ field: ‘listprice‘, title: ‘listprice‘ },
{ field: ‘itemid‘, title: ‘itemid‘ }
]],
singleSelect: true
});
 
$(‘#ButonGetCheck‘).click(function(){
var checkedItems = $(‘#dg‘).datagrid(‘getChecked‘);
var names = [];
$.each(checkedItems, function(index, item){
names.push(item.productname);
});               
console.log(names.join(","));
});
});
 
$.extend($.fn.datagrid.methods, {
getChecked: function (jq) {
var rr = [];
var rows = jq.datagrid(‘getRows‘);
jq.datagrid(‘getPanel‘).find(‘div.datagrid-cell input:checked‘).each(function () {
var index = $(this).parents(‘tr:first‘).attr(‘datagrid-row-index‘);
rr.push(rows[index]);
});
return rr;
}
});

以上是关于jQuery EasyUI DataGrid Checkbox 数据设定与取值的主要内容，如果未能解决你的问题，请参考以下文章

jQuery easyUI easyui-datagrid 选中指定内容的行

jQuery EasyUI教程之datagrid应用

JQuery EasyUI DataGrid 获取属性值

datagrid——jQuery EasyUI

jquery easyui datagrid使用参考