天天看點

bootstrap-table解析嵌套json

使用者表中關聯公司表,背景查詢分頁後傳回的json資料為

{
    "pageSize": ,
    "pageNum": ,
    "total": ,
    "offset": ,
    "rows": [
        {
            "id": ,
            "name": "xqy",
            "age": ,
            "password": null,
            "gender": "1",
            "description": "",
            "companyDto": {
                "companyId": ,
                "companyName": "資訊中心",
                "companyAddress": "廣州花都"
            }
        },
        {
            "id": ,
            "name": "test1",
            "age": ,
            "password": null,
            "gender": null,
            "description": "",
            "companyDto": {
                "companyId": ,
                "companyName": "營銷委",
                "companyAddress": "廣州天河"
            }
        }
    ]
}
           

其中rows和total是bootstrap-table固定需要的字段,讀取資料時自動根據columns的配置來讀取相應的field,但是當需要讀取公司資訊companyDto時,這時候需要使用formatter,columns配置如下

columns: [{
            checkbox : true
        }, {
            field: 'id',
            title: '學号'
        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'gender',
            title: '性别'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'description',
            title: '描述'
        }, {
            field: 'companyDto',
            title: '公司',
            formatter : function(value,row, index){   //主要配置在這裡
                return value.companyName;
            }
        }
        ]
           

可參考官方文檔的說明:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#列參數

繼續閱讀