bootstrapTable的父子配置

1.父子表

先上效果图，楼主写了一下午的文章有点累，没写完请谅解

集成配置还不会的请看作者的基础配置文章，这篇文章还在撰写
BootStrapTable的基础配置

上一篇文章的表格加载已经介绍了现在上子表代码
loadTable是加载表格的方法，在加载的时候设置子表

function loadTable(){
    $("#selection-datatable123").bootstrapTable({
        url : '/user/pageList', //请求后台的URL（*）
        method: 'POST',
        contentType:'application/x-www-form-urlencoded; charset=UTF-8',//post请求需设
        sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
        pagination : true, //是否显示分页（*）
        detailView: true,
        cache: false,
        clickToSelect: true,//点击行选中
        queryParams :function (params) {
            return {
                pageSize: params.limit,
                pageIndex: params.offset / params.limit + 1
                /*username: $userTableForm.find("input[name='username']").val().trim(),
                 ssex: $userTableForm.find("select[name='ssex']").val(),
                 status: $userTableForm.find("select[name='status']").val()*/
            };
        }, //分页
        /*onClickRow : function(row, tr,flied){
            console.log(row);
        },*/
        pageSize : 5, //每页显示的记录数
        pageNumber : 1, //当前第几页
        pageList : [ 5, 10, 25, 50 ,100 ], //记录数可选列表*/
        responseHandler: function(data){
            return {"rows":data.data.page.records,
                "total": data.data.page.total,//总页数
            }  //约定rows
            //return res.rows;
            //return {};
        },
        idField: 'userId',
        uniqueId : 'userId',
        columns : [
            { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                    if (row.check == true) {
                        // console.log(row.serverName);
                        //设置选中
                        return {  checked: true };
                    }
                }
            },
            /*{field: 'userId',visible: false,uniqueId: true},*/
            {title: '姓名', field: 'username', align: 'center'},
            {title: '性别', field: 'sex', align: 'center',
                formatter: function (value, row, index) {
                    if (value === 0) return '男';
                    if (value === 1) return '女';
                    return '保密';
                }},
            {title: '邮箱', field: 'email', align: 'center'},
            {title: '电话', field: 'mobile', align: 'center'},
            {title: '状态', field: 'status', align: 'center',
                formatter: function (value, row, index) {
                    if (value == 1) {
                        return '<span class="badge badge-success">有效</span>';
                    }else{return '<span class="badge badge-warning">锁定</span>';}
                }},
            {title: '创建时间', field: 'createTime',  align: 'center'},
            {title: '修改时间', field: 'updateTime',  align: 'center'},
            { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
            /* {title: '操作', align: 'center',formatter: function(value, row, index){

                     /!*'<button type="button" class="btn btn-primary">修改</button>'+*!/
                     return '<button type="button" class="btn btn-primary">查看</button>'+
                         '<button type="button" class="btn btn-primary" >修改</button>'+
                         '<button type="button" class="btn btn-primary" >删除</button>';
                 }}*/
        ] ,
        onExpandRow: function (index, row, $detail) {
            console.log("开始展开子表");
            loadChildTable(index, row, $detail);
        }
    });
};

function loadChildTable(index, row, $detail){
    var child_table = $detail.html('<table></table>').find('table');
    $(child_table).bootstrapTable({url : '/role/getRoleByUserId/'+row.userId, //请求后台的URL（*）
        method: 'POST',
        pagination : false, //是否显示分页（*）
        dataType:'json',
        cache: false,
        clickToSelect: true,//点击行选中
        idField: 'roleId',
        responseHandler: function(data){
            return {"rows":data.data?data.data.data:null,
            }  //约定rows
        },
        columns: [
            {title: '名称', field: 'roleName', align: 'center'},
            {title: '备注', field: 'remark', align: 'center'},
            {title: '创建时间', field: 'createTime',  align: 'center'},
            {title: '修改时间', field: 'updateTime',  align: 'center'},
        ],
    });
};

隔了大半年才写完，一直忘记了，这里的坑主要是版本的问题，版本不对的参考上一篇文章。