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>