嵌套对象是指返回的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文件如下：
Column Group - jQuery EasyUI Demo Column Group
The header cells can be merged. Useful to group columns under a category.
| Item ID | Product | Item Details | |||
|---|---|---|---|---|---|
| List Price | Unit Cost | Attribute | Status | ||
注：我在第二列调用的是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(' ' + rownumber + ' '); } 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 attribute var styleValue = col.styler ? (col.styler(dta, rowData, rowIndex) || '') : ''; var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : ''); cc.push(''); var style = 'width:' + (col.boxWidth) + 'px;'; style += 'text-align:' + (col.align || 'left') + ';'; style += opts.nowrap == false ? 'white-space:normal;' : ''; cc.push(' '); if (col.checkbox) { cc.push(' '); } else if (col.formatter) { cc.push(col.formatter(dta, rowData, rowIndex)); } else { cc.push(dta); } cc.push(' '); cc.push(''); } } return cc.join(''); }}); 在使用嵌套对象的datagrid页面中加载这个js文件：
运行的效果也和第一种方法的一样。