嵌套对象是指返回的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