bootstrap-table 实现父子表

一、引入相关的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>

二、写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" 显示前面的+号
三、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
            });

        }
    });
}

四、加入子表格

$("#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;
        }
    });
};

五、最终的效果图

六、注：

　　3和4是两种不一样的方式写表格，均可以达到目的

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