Bootstrap父子表实现方式

效果图如下：

HTML

<table id="sysDictTypeTable"></table>

JS

$(function(){
    var oTable = new TableInit();
    oTable.Init();
});
var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#sysDictTypeTable').bootstrapTable({
            url: '${pageContext.request.contextPath}/sysDictType/initTable',         //请求后台的URL（*）
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            toolbar: "#toolbar",                //工具按钮用哪个容器
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [30, 40, 80],  //记录数可选列表
            search: true,  //是否启用查询
            showColumns: true,  //显示下拉框勾选要显示的列
            showRefresh: true,  //显示刷新按钮
            sidePagination: "server", //表示服务端请求
            detailView:true,
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            //queryParamsType: "undefined",
            queryParamsType : 'undefined',
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    searchText:params.searchText
                };
                return param;
            },
            columns: [
                {checkbox: true},
                {field: 'typeName', title: '类型', sortable: true},
                {field: 'description', title: '描述', sortable: true},
                {field: 'button', title: '操作', events: "operateEvents", formatter: operateFormatter}
                ],
            onExpandRow: function (index, row, $detail) {
                var oInit = new subTableInit();
                oInit.InitSubTable(index, row, $detail);
            },
            onLoadSuccess: function () {  //加载成功时执行
                // alert("加载成功");
            },
            onLoadError: function () {  //加载失败时执行
                // alert("加载数据失败");
            }
        });
    };
    return oTableInit;
};


var subTableInit = function() {
    var oInit = new Object();

    //初始化子表格(无线循环)
    oInit.InitSubTable = function (index, row, $detail) {
    var parentId = row.id;
    var cur_table = $detail.html('<table id="subTable" style="white-space: nowrap;overflow:hidden"></table>').find('table');
    $(cur_table).bootstrapTable({
        url: '${pageContext.request.contextPath}/sysDictValue/initTable',
        method: 'get',
        queryParams: { typeId: parentId },
        ajaxOptions: { typeId: parentId },
        clickToSelect: true,
        detailView: false,//父子表
        uniqueId: "id",
        columns: [
            {checkbox: true},
            {field: 'label', title: '键值名', sortable: true},
            {field: 'code',  title: '键值', sortable: true},
            {field: 'button', title: '操作', events: "operateEvents", formatter: operateFormatterChild}],
    });
    };

    return oInit;
}