easyui datagrid解析复杂json数组对象

easyui datagrid解析复杂json数组对象

JSON数组对象如下：

{
    "code": 0,
    "msg": null,
    "rows": [
        {
            "id": null,
            "earId": "001AG1800002",
            "ramEarId": "001AG1800001",
            "varityName": "安哥拉山羊",
            "mating1": {
                "1": "2018-08-10"
            },
            "mating2": {
                "1": "2018-07-30",
                "2": "2018-07-30"
            },
            "mating3": {
                "2": "2018-08-19",
                "3": "2018-08-19"
            },
            "prePregnacyDate": null,
            "oestrusDate": null,
            "matingNum": null,
            "remark": null
        }
    ],
    "total": null
}

---

页面代码

<table class="easyui-datagrid" title=" <i class='iconfont'>&#xe989;&#xe989;</i> 繁殖母羊配种信息"
       pagination="true"
       pageSize="20"
       pageList="[20,30,40,50]"
       toolbar="#toolbar"
       data-options="url:baseurl + 's/matingRecord/createMatingRecord',singleSelect:true,rownumbers:true,striped:true,idField:'id',fit:true,onSelect:rowSelected,queryParams:qparams">
    <thead frozen="true">
    <tr>
        <th rowspan="2" data-options="field:'varityName',width:'150'">品种</th>
        <th rowspan="2" data-options="field:'earId',width:'150'">母羊耳号</th>
        <th rowspan="2" data-options="field:'ramEarId',width:'150'">配种公羊耳号</th>
        <th colspan="3" width="300">第一情期</th>
        <th colspan="3" width="300">第二情期</th>
        <th colspan="3" width="300">第三情期</th>
        <th rowspan="2" data-options="field:'prePregnacyDate',width:'150'">预产期</th>
        <th rowspan="2" data-options="field:'remark',width:'150'">备注</th>
    </tr>
    <tr>
        <th data-options="field:'mating1',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('1')){return value['1']+'上午';}}">一次</th>
        <th data-options="field:'mating1',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('2')){return value['2']+'中午';}}">二次</th>
        <th data-options="field:'mating1',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('3')){return value['3']+'下午';}}">三次</th>
        <th data-options="field:'mating2',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('1')){return value['1']+'上午';}}">一次</th>
        <th data-options="field:'mating2',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('2')){return value['2']+'中午';}}">二次</th>
        <th data-options="field:'mating2',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('3')){return value['3']+'下午';}}">三次</th>
        <th data-options="field:'mating3',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('1')){return value['1']+'上午';}}">一次</th>
        <th data-options="field:'mating3',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('2')){return value['2']+'中午';}}">二次</th>
        <th data-options="field:'mating3',width:'120',
            formatter:function(value,row,index){
                if(value != null && value.hasOwnProperty('3')){return value['3']+'下午';}}">三次</th>
    </tr>
    </thead>
</table>

注意事项

普通JSON对象读取key，采用JSON对象.key，如果key为Number或者String类型的数字采用JSON对象[‘key’]。举个栗子：

var json = {
            "varityName": "安哥拉山羊",
            "mating1": {
                "1": "2018-08-10"
               }
           }

传统的读取value:

console.log(json.varityName);

通用型读取value:

console.log(json.mating1['1']);

参考
JSON取值(key是中文或者数字)方式详解