bootstrap-table 实现父子表

1、引入相关的css和js

<link type="text/css" href="/components/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.css" rel="stylesheet" />
<script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/components/bootstrap/3.3.7/css/bootstrap.min.js"></script>
<script type="text/javascript" src="/components/bootstrap-table/1.11.1/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="components/bootstrap-table/1.11.1/dist/bootstrap-table-zh-CN.js"></script>

2、写table表格并加入数据

<table id="tablewrap1" data-toggle="table" data-locale="zh-CN"
                   data-ajax="ajaxRequest"  data-icon-size="sm"  data-single-select="false"
                   data-click-to-select="true" data-side-pagination="server"
                   data-striped="true" data-pagination="true"
                   data-maintain-selected="true" data-detail-view="true"
                   class="fline-show-when-ready table" >
                <thead>
                <tr>
                    <!--<th data-field="state1" data-checkbox="true"></th>-->
                    <th data-field="field">名称</th>
                    <th data-field="fieldName">中文名称</th>
                    <th data-field="identifier">标识符</th>
                    <th data-field="affiliatedName">单位</th>
                    <th data-field="typeName">分类</th>
                    <th data-field="state1" data-checkbox="true"></th>
                </tr>
                </thead>
            </table>

data-detail-view="true" 显示前面的+号
3、js初始化

function ajaxRequest(params) {
    var pageSize = params.data.limit;
    var pageNum = params.data.offset / pageSize + 1;
    index = params.data.offset + 1;
    var sort = params.data.sort ? params.data.sort : "id";
    var order = params.data.order ? params.data.order : "desc";
    var datas;
    var dataElements;
    var affiliatedVal=$("#searchOrg option:selected").val()
    var dataStr ='&pageNum=' + pageNum + '&pageSize=' + pageSize;
    var count;
    $.ajax({
        type : 'get',
        url : 'url地址',
        dataType : 'json',
        async : false,
        data : {'pageNum':pageNum,
            'pageSize':pageSize,
        },
        success : function(data) {
            var count = data.count, dataElements = data.data;
            params.success({
                total : count,
                rows : dataElements
            });

        }
    });
}

4、加入子表格

$("#tablewrap1").on('expand-row.bs.table', function (e, index, row, $detail) {
    InitSubTable(index, row, $detail);
})
/*
expand-row.bs.table 里面的三个主要的参数
index：父表当前行的行索引。
row：父表当前行的Json数据对象。
$detail：当前行下面创建的新行里面的td对象。
第三个参数尤其重要，因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象，然后我们只需要往它里面填充我们想要的table即可。
*/
InitSubTable = function (index, row, $detail) {
    var cur_table = $detail.html('<table class="subTable"></table>').find("table");
    $(cur_table).bootstrapTable({
        url: 'url地址',
        method: 'get',
        clickToSelect: true,
        sidePagination : 'server',
        queryParams: function (params) { //url携带的参数
            var temp = {
                "dataElements": row.identifier,

            }
            return temp
        },
        columns: [
            {
                field: 'field',
                title: '名称'
            },
            {
                field: 'fieldName',
                title: '中文名称'
            },
            {
                field: 'dataElementID',
                title: '标识符'
            },
            {
                field: 'identifier',
                title: '部门'
            },
            {
                field: 'typeName',
                title: '分类'
            },
            {
                field: 'dataFormat',
                title: '数据格式'
            },
            {
                field: 'state',
                title: '同步',
                checkbox: true
            }],
        responseHandler: function(res) {  // url返回的数据，修改为rows和total的格式，不能为其他格式
            var data = '';
                data = {
                    rows: res.data,
                    total: res.data.length
            }
            return data;
        }
    });
};

5、最终的效果图

6、注：

　　3和4是两种不同的方式写表格，都可以达到目的

　　如果显示一直在加载中或者有数据但是没有加载出来， 则可能是0sidePagination分页方式没有设置