bootstrap-table 實現父子表

時間 2019-11-11

原文原文鏈接

一、引入相關的css和jsjavascript

<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表格並加入數據css

<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
            });

        }
    });
}

四、加入子表格html

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