讓jquery easyui datagrid列支持綁定嵌套對象

嵌套對象是指返回的json數據,是對象的某個屬性自帶有屬性。而咱們偏偏又須要這個屬性,默認狀況下easyui的datagrid是不支持綁定嵌套對象的。好比:datagrid的field屬性只能爲field:'itemid'。這樣的樣式。而在項目中咱們每每在項目中使用了外鍵對象這樣的json數據,好比javascript

//嵌套對象的json數據
var person = {"name":"張三","role":{"ID":15,"name":"管理員"}}; //datagrid默認支持的是下面這樣的json數據類型
var person = {"name":"張三","role":「管理員」};

解決的辦法有兩種:css

在看解決辦法前,讓咱們先看看爲何datagrid這個插件爲何不支持對象的嵌套。html

javascript爲咱們提供了兩種獲取一個對象屬性的方法:點操做符和「[]」以數組的方式獲得數據。但不支持這兩種方式的結合。java

var person = {"name":"張三","role":{"ID":15,"type":"管理員"}}; alert(person.role.type); //管理員
        alert(person['role']['type']);  //管理員
        alert(person['role.type']); //不支持

可是若是咱們用正則把‘role.type’變成role][type]這樣就和第二種方式同樣了,就能夠支持對象的嵌套了。jquery

var str = 'role.type'; var test = eval("person['"+str.replace(/\./g,"']['")+"']"); alert(test);

運行下試試看吧這樣就支持了。json

提示下:個人jquery easyui是1.3.4版本的。數組

第一種方法:修改jquery.easyui.min.js這個源文件。

大概在8881這行,進行以下的修改也就是renderRow 這個方法先後。less

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數據文件,以下:ui

{"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這個屬性。

火狐下效果以下:

image

第二種方法:使用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>

運行的效果也和第一種方法的同樣。

相關文章
相關標籤/搜索