让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性。而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的。比如:datagrid的field属性只能为field:'itemid'。这样的样式。而在项目中我们往往在项目中使用了外键对象这样的json数据,比如
//嵌套对象的json数据 var person = {"name":"张三","role":{"ID":15,"name":"管理员"}}; //datagrid默认支持的是下面这样的json数据类型 var person = {"name":"张三","role":“管理员”};
解决的办法有两种:
在看解决办法前,让我们先看看为什么datagrid这个插件为什么不支持对象的嵌套。
javascript为我们提供了两种获取一个对象属性的方法:点操作符和“[]”以数组的方式得到数据。但不支持这两种方式的结合。
var person = {"name":"张三","role":{"ID":15,"type":"管理员"}};alert(person.role.type); //管理员alert(person['role']['type']); //管理员alert(person['role.type']); //不支持
但是如果我们用正则把‘role.type’变成role][type]这样就和第二种方式一样了,就可以支持对象的嵌套了。
var str = 'role.type';var test = eval("person['"+str.replace(/\./g,"']['")+"']");alert(test);
运行下试试看吧这样就支持了。
提示下:我的jquery easyui是1.3.4版本的。
第一种方法:修改jquery.easyui.min.js这个源文件。
大概在8881这行,进行如下的修改也就是renderRow 这个方法前后。
if(col){//在这里进行了修改源:var _671=_66e[_670];var _671=eval("_66e['"+_670.replace(/\./g,"']['")+"']");var css=col.styler?(col.styler(_671,_66e,_66d)||""):"";var _672="";var _673="";
接下来进行测试:
我这里是修改了官方demo的json数据文件,如下:
{"total":28,"rows":[{"productid":{"name":"张三"},"productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},{"productid":{"name":15},"productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},{"productid":{"name":"张三"},"productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},{"productid":{"name":"李白"},"productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},{"productid":{"name":"张三"},"productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},{"productid":{"name":"张三"},"productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},{"productid":{"name":"张三"},"productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}]}
测试的HTML文件如下:
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Column Group - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../easyui/jquery.min.js"></script><script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> </head> <body><h2>Column Group</h2><div class="demo-info"><div class="demo-tip icon-tip"></div><div>The header cells can be merged. Useful to group columns under a category.</div></div><div style="margin:10px 0;"></div><table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'"><thead><tr><th data-options="field:'itemid',width:80" rowspan="2">Item ID</th><th data-options="field:'productid.name',width:100" rowspan="2">Product</th><th colspan="4">Item Details</th></tr><tr><th data-options="field:'listprice',width:80,align:'right'">List Price</th><th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th><th data-options="field:'attr1',width:240">Attribute</th><th data-options="field:'status',width:60,align:'center'">Status</th></tr></thead></table></body> </html>
注:我在第二列调用的是productid.name这个属性。
火狐下效果如下:
第二种方法:使用js扩展
在网上找到扩展datagrid的扩展文件。
/*** 扩展方法 使datagrid的列中能显示row中的对象里的属性* 无需调用自动执行 Field:Staff.JoinDate**/ $.fn.datagrid.defaults.view = $.extend({}, $.fn.datagrid.defaults.view, {renderRow: function (target, fields, frozen, rowIndex, rowData) {var opts = $.data(target, 'datagrid').options;var cc = [];if (frozen && opts.rownumbers) {var rownumber = rowIndex + 1;if (opts.pagination) {rownumber += (opts.pageNumber - 1) * opts.pageSize;}cc.push('<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">' + rownumber + '</div></td>');}for (var i = 0; i < fields.length; i++) {var field = fields[i];var col = $(target).datagrid('getColumnOption', field);var fieldSp = field.split(".");var dta = rowData[fieldSp[0]];for (var j = 1; j < fieldSp.length; j++) {dta = dta[fieldSp[j]];}if (col) {// get the cell style attributevar styleValue = col.styler ? (col.styler(dta, rowData, rowIndex) || '') : '';var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : '');cc.push('<td field="' + field + '" ' + style + '>');var style = 'width:' + (col.boxWidth) + 'px;';style += 'text-align:' + (col.align || 'left') + ';';style += opts.nowrap == false ? 'white-space:normal;' : '';cc.push('<div style="' + style + '" ');if (col.checkbox) {cc.push('class="datagrid-cell-check ');} else {cc.push('class="datagrid-cell ');}cc.push('">');if (col.checkbox) {cc.push('<input type="checkbox"/>');} else if (col.formatter) {cc.push(col.formatter(dta, rowData, rowIndex));} else {cc.push(dta);}cc.push('</div>');cc.push('</td>');}}return cc.join('');} });
在使用嵌套对象的datagrid页面中加载这个js文件:
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../easyui/jquery.min.js"></script> <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../easyui/extendDataGrid.js"></script>
运行的效果也和第一种方法的一样。
转载于:https://www.cnblogs.com/zxdBlog/p/3584586.html
让jquery easyui datagrid列支持绑定嵌套对象相关推荐
- jquery easyui datagrid 列自适应窗口宽度
easyui datagriad 框架 在做列自适应时可以采取以下步骤: 1. fitColumns: true,/*自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动*/ 使之保持与父类宽度相同 ...
- jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- easyui datagrid 列隐藏和显示
easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏? 最佳答案 $('#grid').datagrid('hideColumn','列field');把hideColumn换成 ...
- jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重 ...
- jQuery EasyUI DataGrid - 格式化列(formatter )
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
- jquery easyui datagrid 分页 详解
http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html 由于项目原因,用了jquery easyui 感觉界面不错,皮肤样 ...
- Jquery Easyui Datagrid创建代码
引用easyui <link rel="stylesheet" type="text/css" href="../themes/default/ ...
- 【EasyUI DataGrid DetailView】表格嵌套子表格
一.功能描述 在做项目的时候,要求能够对某一行的数据进行折叠显示,用来查看该行的详细信息.拟通过采用easyui的detailview创建表格分组,大致的效果图如下所示: 二.使用方法 本篇博客承接以 ...
最新文章
- mnn python例子
- python创意编程比赛-关于举办2019年青岛市青少年创意编程与智能设计大赛的通知...
- Java 将 Word 文档转换为 PDF 的完美工具
- 系统相机裁剪比例_真皮、皮革自动裁剪机,拒绝材料浪费,一年可以节省十几万!...
- 工厂方法模式_工厂方法模式
- mysql优化要点_你需要掌握的 Mysql 优化的一些要点
- Oracle常用诊断事件清单
- 路径规划之基于插值的规划算法
- Linux常用命令介绍(二)——压缩与解压缩命令
- natapp使用教程
- 文件上传漏洞—简单利用(墨者学院靶场)
- NB-IoT对接电信物联网开放平台
- JS逆向之国家企业信用信息公示系统Cookie传递
- 无法与ftp服务器建立连接
- spring框架的优势
- android MediaPlayer 完成播放后无法再次播放
- 【已解决】Java保存数据超时失败 ClickHouse exception, code 1002, 8123 failed to respon,keep_alive_timeout参数
- Thinkpad笔记本刷BIOS教程
- JAVA-把我的第一次给了蔡徐坤
- WEB 2.0中AJAX应用的详细探讨
热门文章
- python安装勾选-Python的安装
- python绘制三维散点图-Python散点图与三维图
- python编程入门指南上下百度云-Python编程初学者指南 PDF扫描版[87MB]
- python3语法错误-关于在python3.7当中的语法错误!
- python四大软件-9个使用Python的世界级软件公司
- python3.7.2安装-Centos7.6,安装python3.7.2
- r语言和python-PythonR语言-python和r相遇
- python项目开发实战-给缺少Python项目实战经验的人
- pythonurllib模块-python3之模块urllib
- zerodivisionerror什么意思python-【转】为什么 Python 中的 True 等于 1