bootstrap table从后台获取数据之后怎么显示数据

Question

//表格的初始化

function initTable(json) {
            $table.bootstrapTable({
                url:"http://127.0.0.1/yjstar-manager/system/role_manage/data1.json",
                method: 'get',
                dataType: "json",
                // data:json.data.dataList,
                cache: false, // 不缓存
                // height: getHeight(), // 设置高度，会启用固定表头的特性
                striped: true, // 隔行加亮
                pagination: true, // 开启分页功能
                search: false, // 开启搜索功能
                showColumns: false, // 开启自定义列显示功能
                showRefresh: false, // 开启刷新功能
                queryParams: queryParams,
                pageSize: json.data.pageSize, //每页的记录行数（*）
                minimumCountColumns: 2, // 设置最少显示列个数
                clickToSelect: true, // 单击行即可以选中
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                sortName: 'id', // 设置默认排序为 name
                sortOrder: 'desc', // 设置排序为反序 desc
                columns: [{ // 列设置
                    field: 'state',
                    radio: true // 使用单选框
                },{
                    field: 'id',
                    title: '角色编码',
                    align: 'center',
                    valign: 'middle',
                    sortable: true // 开启排序功能
                },{
                    field: 'roleName',
                    title: '角色名称',
                    align: 'center',
                    valign: 'middle',
                    sortable: true // 开启排序功能
                }, {
                    field: 'unitId',
                    title: '所属单位',
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                }, {
                    field: 'roleType',
                    title: '下发级别',
                    align: 'center',
                    valign: 'middle',       
                }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                   formatter: operateFormatter,
                   events: window.operateEvents,
                }]
            });
            function operateFormatter(value, row, index) {
                return [
                    '<a href="#edit-modal-dialog" data-toggle="modal" class="edit" title="edit" href="javascript:void(0)">',
                    '修改',
                    '</a>  ',
                    '&nbsp;&nbsp;&nbsp;&nbsp;',
                    '<a href="#impower-modal-dialog" data-toggle="modal" class="impower" title="impower" href="javascript:void(0)">',
                    '授权',
                    '</a>  ',
                    '&nbsp;&nbsp;&nbsp;&nbsp;',
                    '<a class="remove" href="javascript:void(0)" title="Remove">',
                    '删除',
                    '</a>',
                ].join('');
            }
            function queryParams(params) { 
                console.log(params);
                return {
                    pageSize: params.limit, 
                    offset: params.offset, 
                    roleName: $("#roleName").val(),
                    name: params.sort,
                    order: params.order
                };
            }
        }
    但是后台给到的数据是这样的json格式怎么去显示
{

    "code": "0000",
    "data": {
        "pageSize": 5,
        "totalCount": 16,
        "pageNo": 1,
        "hasNext": true,
        "totalPage": 4,
        "dataList": [
            {
                "id": 0,
                "roleName": "管理员",
                "unitId": "$1",
                "roleType": "$2",
                "shareType": "$2",
                "parentRoleId": "$3"
            },
            {
                "id": 1,
                "roleName": "管理员",
                "unitId": "$1",
                "roleType": "$2",
                "shareType": "$2",
                "parentRoleId": "$3"
            },
            {
                "id": 2,
                "roleName": "管理员",
                "unitId": "$1",
                "roleType": "$2",
                "shareType": "$2",
                "parentRoleId": "$3"
            },
            {
                "id": 3,
                "roleName": "管理员",
                "unitId": "$1",
                "roleType": "$2",
                "shareType": "$2",
                "parentRoleId": "$3"
            }
        ]
    },
    "msg": "OK",
    "time": ""

}

Answer 1

bootstrap table ajax方式的返回数据格式是这样的：
https://github.com/wenzhixin/...

如果按你现在这种返回格式的话，可以先ajax请求，得到返回结果后渲染table

$.get(url, function (result) {
        if (result.code=='0000') {
            var data = {total:result.data.totalCount,rows:result.data.dataList};
            $table.bootstrapTable({
                data:data,
                dataType: "json",
                // data:json.data.dataList,
                cache: false, // 不缓存
                // height: getHeight(), // 设置高度，会启用固定表头的特性
                striped: true, // 隔行加亮
                    ...
            })
        }
    }, "json")

使用第三方组件就要按照对方的格式返回数据，否则就在js里自己组装成需要的格式。

Answer 2

问题解决了吗 难道后台都的改成 rows 的数组返回？