将嵌套的 JSON 数据对象绑定到 easyUi dataGrid答案

【问题标题】：Binding nested JSON Data Object to easyUi dataGrid将嵌套的 JSON 数据对象绑定到 easyUi dataGrid
【发布时间】：2012-05-27 02:39:51
【问题描述】：

环境：

1.EasyUI Datagrid
2.jsp(s2sh)
3.mysql 
//until now i can populate the datagrid plugin with json object normally but a 
  small issue.

描述：

我从服务器返回了一个 Json-data-object，如下所示：

{"total":28,"rows":[{"productid":"1","attr":{"size":"10dc","color":"red&yellow"},
                    {"productid":"2","attr":{"size":"102dc","color":"green&null"}

使用插件：

$(document).ready(function(){
      $('#tt').datagrid({  
        url:'loadVerifyStream.eAction',
        pagination:true,
        columns:[[  
                {field:'productid',title:'Product ID',width:100},  
                {field:'?????',title:'Product Size',width:250},  
                {field:'?????',title:'product Color',width:100},
       ]]

}); });

我无法将“大小”和“颜色”属性输出到网格，我试过了

{field:'attr.size',title:'Product Size',width:250},
{field:'attr.color',title:'product Color',width:100},

没有工作。

有人知道怎么解决吗？提前致谢。

//----------------------------------------- 我想我已经解决了这个问题。

参考 DataGrid 的 API：

{field:'color',title:'product Color',width:100,
   formatter:function(val,rec){
   return rec.attr == null ? "":rec.attr.color;

}}

【问题讨论】：

标签： jquery datagrid

【解决方案1】：

这是一个更通用的解决方案：

说你的 json 对象如下：

[{id:3,client:{name: "John",city:'New York'},
[{id:4,client:{name: "Paul",city:'Paris'}]

要在你的 fomatter 函数中获取字段名称，请使用以下标记：

<table id="dg">
    <thead>  
      <tr>
        <th field="id" width="50">ID</th>
        <th field="not used" formatter="(function(v,r,i){return formatColumn('client.name',v,r,i);})" width="50">Client name</th>
        <th field="not used" formatter="(function(v,r,i){return formatColumn('client.city',v,r,i);})" width="50">Client city</th>
      </tr>  
    </thead>  
</table>

然后定义formatColumn

function formatColumn(colName, value, row, index) {
    return eval("row."+colName");
}

【讨论】：

【解决方案2】：

或者您可以使用这个 hack（对于 easyui 版本 1.3.1）。在文件 jquery.easyui.min.js 中，转到第 7982 行，应该有如下代码：

cc.push(col.formatter(_5c5,_5c2,_5c1));

并用此代码替换

 cc.push(col.formatter(_5c5,_5c2,_5c1,_5c4));

然后你定义你的格式化程序如下：

function formatColumn(value, row, index, field) {
    // field is the field name defined for this column
    return row[field]; // or anything you want
}

【讨论】：