Bootstrap Table 父子表应用 (detaileView 二级表格)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43959963/article/details/112284545

必要属性 :

detailView: true,
detailFormatter: function (index, row) {
    var html = [];
    $.each(row, function (key, value) {
        html.push('<p><b>' + key + ':</b> ' + value + '</p>');
    })
},
icons: {
    detailOpen: 'glyphicon-plus icon-plus',
    detailClose: 'glyphicon-minus icon-minus',
    refresh: 'glyphicon-refresh icon-refresh',
    toggle: 'glyphicon-list-alt icon-list-alt',
    columns: 'glyphicon-th icon-th'
},

当展开时触发的方法;

onExpandRow: function (index, row, $detail) {
   console.log(index, row, $detail);
   oTableInit.InitSubTable(index, row, $detail);
}

定义二级表格方法 (子表格);

    oTableInit.InitSubTable = function (index, row, $detail) {

        var cur_table = $detail.html('<table></table>').find('table');

        $(cur_table).bootstrapTable({
            url: '../server/bootstrapTableDataChild.json',
            queryParams: function () {
                console.log(row.id);
                return {
                    uuid: row.id
                }
            },
            // 这里查看返回的数据
            // responseHandler: function (data) {
            //     console.log(data);
            // },
            columns: [{
                field: 'changeField',
                title: '变化字段',
                valign: "middle",
                align: "center",
                visible: true
            }, {
                field: 'beforeChangeVal',
                title: '变化前的值',
                valign: "middle",
                align: "center",
                visible: true
            }, {
                field: 'afterChangeVal',
                title: '变化后的值',
                valign: "middle",
                align: "center",
                visible: true
            }],

        });

        return oTableInit;

    };

话不多说上全面的代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/base.css">
    <link rel="stylesheet" href="./HistoryVersionCat.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap/plugins/bootstraptable/css/bootstrap-table.css">
</head>




<body>
    <div class="wrapper">
        <div class="button-group clear">
            <button type="button" class="btn btn-primary barcode-print">条码打印</button>
            <button type="button" class="btn btn-primary copy">复制</button>
            <button type="button" class="btn btn-primary cat-history-version" data-toggle="modal"
                data-target="#cat-history-version-modal">查看历史版本</button>
            <button type="button" class="btn btn-primary go-back">返回</button>
        </div>


        <div class="modal fade bs-example-modal-lg" id="cat-history-version-modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">查看历史版本</h4>
                    </div>
                    <div class="modal-body">

                        <table data-toggle="table" id="core-table" data-detail-view="true"></table>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="../plugins/jquery/jquery-1.9.1.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/bootstrap/plugins/bootstraptable/js/bootstrap-table.min.js"></script>
    <script>

        var oTableInit = new Object();

        $("#core-table").bootstrapTable({
            url: '../server/bootstrapTableData.json',
            detailView: true,
            detailFormatter: function (index, row) {
                var html = [];

                $.each(row, function (key, value) {
                    html.push('<p><b>' + key + ':</b> ' + value + '</p>');
                })

            },
            icons: {
                detailOpen: 'glyphicon-plus icon-plus',
                detailClose: 'glyphicon-minus icon-minus',
                refresh: 'glyphicon-refresh icon-refresh',
                toggle: 'glyphicon-list-alt icon-list-alt',
                columns: 'glyphicon-th icon-th'
            },
            columns: [{
                field: 'operationBill',
                title: '操作单据',
                valign: "middle",
                align: "center",
                visible: true
            }, {
                field: 'title',
                title: '标题',
                valign: "middle",
                align: "center",
                visible: true
            }, {
                field: 'producer',
                title: '制单人',
                valign: "middle",
                align: "center",
                visible: true
            }, {
                field: 'bookkeepingDate',
                title: '记账日期',
                valign: "middle",
                align: "center",
                visible: true
            }],
            //注册加载子表的事件。注意下这里的三个参数！
            onExpandRow: function (index, row, $detail) {
                console.log(index, row, $detail);
                oTableInit.InitSubTable(index, row, $detail);
            }
        });

        
        // 定义二级表格;
        oTableInit.InitSubTable = function (index, row, $detail) {

            var cur_table = $detail.html('<table></table>').find('table');

            $(cur_table).bootstrapTable({
                url: '../server/bootstrapTableDataChild.json',
                queryParams: function () {
                    console.log(row.id);
                    return {
                        uuid: row.id
                    }
                },
                // 这里查看返回的数据
                // responseHandler: function (data) {
                //     console.log(data);
                // },
                columns: [{
                    field: 'changeField',
                    title: '变化字段',
                    valign: "middle",
                    align: "center",
                    visible: true
                }, {
                    field: 'beforeChangeVal',
                    title: '变化前的值',
                    valign: "middle",
                    align: "center",
                    visible: true
                }, {
                    field: 'afterChangeVal',
                    title: '变化后的值',
                    valign: "middle",
                    align: "center",
                    visible: true
                }],

            });

            return oTableInit;

        };
    </script>
</body>

</html>

最后展示效果图
最后效果图
看~~~ 是否很简单?
坑点描述: detailView 属性添加后, 还需指定

icons: {
    detailOpen: 'glyphicon-plus icon-plus',
    detailClose: 'glyphicon-minus icon-minus',
    refresh: 'glyphicon-refresh icon-refresh',
    toggle: 'glyphicon-list-alt icon-list-alt',
    columns: 'glyphicon-th icon-th'
}