EasyUI datagrid checkbox数据设定与取值（转自http://blog.csdn.net/baronyang/article/dnetails/9323463，感谢分享，谢谢）
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。
使用的范例 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: '',
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: '',
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: '',
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: '',
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: '',
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;
}
});
EasyUI datagrid checkbox数据设定与取值（转自http://blog.csdn.net/baronyang/article/dnetails/9323463，感谢分享，谢谢）的更多相关文章
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- myeclipse通过数据表生成jpa或hibernate实体---https://blog.csdn.net/partner4java/article/details/8560289
myeclipse通过数据表生成jpa或hibernate实体-----https://blog.csdn.net/partner4java/article/details/8560289
- 网络数据包最大长度 MTU 分片 转发https://blog.csdn.net/singular2611/article/details/52513406
1.数据链路层对数据帧的长度都有一个限制,也就是链路层所能承受的最大数据长度,这个值称为最大传输单元,即MTU.以以太网为例,这个值通常是1500字节. 2.对于IP数据包来讲,也有一个长度,在IP包 ...
- 关于springmvc 返回json数据null字段的显示问题-转https://blog.csdn.net/qq_23911069/article/details/62063450
最近做项目(ssm框架)的时候,发现从后台返回的json(fastjson)数据对应不上实体类,从数据库查询的数据,如果对应的实体类的字段没有信息的话,json数据里面就不显示,这不是我想要的结果,准 ...
- jQuery easyui datagrid 的数据加载
其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 谈谈easyui datagrid 的数据加载(转)
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 再次谈谈easyui datagrid 的数据加载
from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...
- easyui datagrid checkbox multiple columns have been done do
lengku1987 2013-01-06 22:27:47 Sponsored Links easyui datagrid checkbox multiple columns have ...
随机推荐
- mysql 错误1054
问题,当查询数据时,输入字符串是数字时,可以查询,但当输入字母字符串时却不能查询,总是提示错误1054 解决:将字符串打上单引号 字段对应的值如果为字符或字符串类型的时候,应用英文单引号括起来,你用的 ...
- PreparedStatement批量(batch)插入数据
JDBC操作数据库的时候,需要一次性插入大量的数据的时候,如果每次只执行一条SQL语句,效率可能会比较低.这时可以使用batch操作,每次批量执行SQL语句,调高效率. public Boolean ...
- Log4Net IsInfoEnabled 一直 false 的问题
1.概述log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.本文主要是介绍如何在VisualStu ...
- C Primer Plus(第五版)2
在本章中你将学习下列内容------------------------------------------------------------------1.运算符:= 2.函数:main(),pr ...
- JDBC建立/关闭数据库连接
JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...
- git小操作之checkout、stash
git checkout会带上当前changed但没有commit的内容到目标分支 git stash用来暂存当前改动,并且会退代码到上一个commit:git stash pop则取出所stash的 ...
- [原创] IIS7下顶级域名301跳转到WWW域名
百度搜索了众多方法,居然没有一个全面的IIS7下301域名跳转能用的教程,最终自己研究出了个可以用的供大家参考.1.绑定域名01ruodian.cn www.01ruodian.cn到空间: 2.在I ...
- android 图片叠加效果——两种方法
效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(View v) { // 防止出现Immutable bitmap passed to Can ...
- C/C++笔试经典程序（二）
1.下面5个函数哪个能够成功进行两个数的交换? swap1传的是值的副本,在函数体内被修改了形参p.q(实际参数a.b的一个拷贝),p.q的值确实交换了,但是它们是局部变量,不会影响到主函数中的a和b ...
- Android开发-API指南- Calendar Provider
Calendar Provider 英文原文:http://developer.android.com/guide/topics/providers/calendar-provider.html 采集 ...