jQuery EasyUI DataGrid Checkbox 数据设定与取值

最新推荐文章于 2025-01-17 11:43:30 发布
转载 最新推荐文章于 2025-01-17 11:43:30 发布 · 6.9k 阅读 · 0
标签
#easyUI #datagrid #checkbox #设定 #取值
本文详细介绍了使用jQueryEasyUIDataGrid进行Checkbox设定的方式，并提供了JSON数据样例。包括如何在加载数据后设置Checkbox状态，以及如何通过JavaScript获取已选中的数据。同时，展示了两种不同的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 数据：
     

    view source print ?
    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 原始码内容

     

    view source print ?
    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 设定


    view source print ?
    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 设定程序如下：

     

    view source print ?
    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

     


     

    程序如下：

     

    view source print ?
    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 程序：

     

    view source print ?
    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 的设定

     

    view source print ?
    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 的方法，

     

    程序如下：

    view source print ?
    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 有勾选的数据值就可以沿用方式一的程序，

    view source print ?
    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 程序如下：

     

    view source print ?
    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. });

    以上

转载自：http://www.it165.net/pro/html/201305/6000.html
easyui：datagrid中的checkbox的实现
weixin_41525190的博客
02-16 2046
$("#tb_sysAttr").datagrid({ columns:[[ {field:'read',title:'可读'，width:150,align:'center', formatter: function(value){ re...
easyui datagrid checkbox
随记
12-23 4413
easyui datagrid 中本身有checkbox列的属性设置，在使用中发现分页的时候这个checkbox的选择很有问题，比如在第二页点了全选，到第三页的时候，竟然也是选择状态，并且还不是所有选择，有一两个没有选择的，于是就手工在数据源中组织出checkbox，然后手工加上选择代码<table id="tt" cellspacing="0" cellpadding="0">
EASYUI DATAGRID 多列复选框CheckBox
weixin_30576827的博客
03-19 509
主要实现： 用的 easyui 1.3.2 实现多个复选框列，各列互不影响。能够实现全选。主要部门用红色标记了的。 easyui datagrid 初始化： <script> function initTableGMAL() { $("#dg_gmal").datagrid({ url: "/Manager/Pub...
easyui datagrid checkbox使用
u011516685的博客
04-20 2218
easyui datagrid 复选框初始化和使用
jQuery EasyUI DataGrid Checkbox数据设定与取值
孙琛斌的专栏
04-21 5598
纯粹做个记录，以免日后忘记该怎么设定。 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。 有关 jQuery EasyUI DataGrid 的相关资料，可以
easyui-datagrid记录checkbox选择状态
chuozhengming1415的博客
04-06 798
需求： (1) 分页：即发送开始元素的索引(startNumber)和每页显示多少信息(pageSize)到后台，后台使用类似limit的函数查出数据后以json格式返回 (2) 记录checkbox的选择状态(第一页选择了A，翻到第二页，回到第一页，A还是选中状态)，点击"导出"按钮，后...
【easyui datagrid】表格头部每列加checkbox实现按列全选功能
最新发布
未央claw
01-17 688
easyui datagrid 表格头部checkbox改为全列选中时的bug修复全过程，bug现象为当datagrid表头每列都有checkbox时，easyui会在点击一个checkbox时改变所有头部checkbox的状态~ 为实现每个checkbox独立用于列全选进行的修改。
easyui datagrid checkbox的相关属性整理
weixin_34044273的博客
04-09 263
DataGrid其中与选择，勾选相关 DataGrid属性： singleSelect boolean 如果为true，则只允许选择一行。 false ctrlSelect boolean 在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。（该属性自1.3.6版开始可用） checkOnSelect boolean 如果为true，当用户点击行的时候该复选框就会被选中或取...
EasyUI datagrid实现翻页保持checkbox状态
龙井的专栏
05-21 1744
1、首先设置datagrid属性的idField主键，这里假如为id，若idField为其他的，记住下面的代码里的 id也要做相应的修改 2、建立一个全局的JavaScript数组var checkedItems = []，用来存放选中checkbox的值。 3、核心方法，addcheckItem()、removeAllItem(rows)、removeSingleItem(rowIn
EasyUI DataGrid加载数据时,checkbox自动选中指定几行,通过数据源data实现checkbox自动选中...
weixin_30737433的博客
08-13 785
通过分析官方源码，发现easyui的datagrid加载数据时根据行字段"checked"来进行选中状态的判定， 这样我们就可以 在datagrid数据源data中行数据增加一字段:"checked"，值设置为true即可，这样easyUI的datagrid加载数据时就会自动选中行(checkbox选中) 别慌！！！ 还有行选中效果需要实现，否则无法通过 $("...
EasyUI之datagrid的复选框使用
热门推荐
El Psy Congroo
07-09 1万+
EasyUI 添加复选框 复选框是什么：放置一个复选框列到数据网格（DataGrid），用户将可以选择 选中/取消选中 网格行数据。 如何放置一个复选框：为了添加一个复选框列，只需添加一个列的 checkbox 属性，并设置它为 true。代码如下所示： &lt;table id="tt" title="Checkbox Select" class="easyui-datagrid" s...
easyUI 表格datagrid通过checkbox禁选某行，解决checkbox不能完全禁选的问题
weixin_42674490的博客
10-26 2760
一：需求及问题描述 项目中需要根据某个值判断表格中的某行是否能够被选择删除，因此在.datagrid里面使用了以下代码将表格头中的checkbox禁选了。 onLoadSuccess: function (data) { var ds = data.rows; $.each(ds, function (rowIndex, rowData) { if (rowData.time == 0) { // 禁选该行 $(".datag
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值