bootstrap-table 父子表入門篇

官方文檔：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#多語言

 

一、引入js、css

<!-- 引入bootstrap樣式 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap-table樣式 --> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery --> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <!-- 引入中文語言包 --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

二、html,一個帶id的table

<table class="table" id="report"></table>

三、

<script type="text/javascript">
        /*用window.onload調用myfun()*/
        window.onload = myfun;

        function myfun() {

            $("#report").bootstrapTable({
                url: '/dashboard', //父表加載數據用到的url
                method: 'get',
                detailView: true,//父子表，為true會在父數據前添加 “+”
                //sidePagination: "server",
                pagination: false, //是否翻頁
                pageSize: 5,
                pageList: [10, 25],
                columns: [
{ field: 'project_name', 
title: '項目名稱' }, 
{ field: 'domnum',
 title: '接入域' }],
                //注冊加載子表的事件。注意下這里的三個參數！ row會傳遞數據到子表
                onExpandRow: function (index, row, $detail) {
                    InitSubTable(index, row, $detail);
                }
            });
            //初始化子表格(無線循環)
            InitSubTable = function (index, row, $detail) {
                var parentid = row.business_id;
                var cur_table = $detail.html('<table></table>').find('table');
                $(cur_table).bootstrapTable({
                    url: '/sec/dashboard/prodatabybusid',
                    method: 'get',
                    queryParams: {busid: parentid},
                    {#ajaxOptions: {strParentID: parentid},#}
                    clickToSelect: true,
                    {#detailView: true,//父子表#}
                    uniqueId: "MENU_ID",
                    pageSize: 10,
                    pageList: [10, 25],
                    columns: [{
                        field: 'project_name',
                        title: '項目名稱'

                    }, {
                        field: 'domnum',
                        title: '接入域'
                    }],
                    //無線循環取子表，直到子表里面沒有記錄
                    onExpandRow: function (index, row, $Subdetail) {
                        InitSubTable(index, row, $Subdetail);
                    }
                });
            };
        };

    </script>