您的位置：首页 > Web前端 > JQuery

让jquery easyui datagrid列支持绑定嵌套对象

2014-03-06 15:06 211 查看
嵌套对象是指返回的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 attribute
var 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>


运行的效果也和第一种方法的一样。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航