嵌套对象是指返回的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的扩展文件。 按 Ctrl+C 复制代码 按 Ctrl+C 复制代码 在使用嵌套对象的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> 运行的效果也和第一种方法的一样。 |
|
来自: ebonyzhang > 《待分类》