bootstrap-table 父子表联动表完整例子

系统管理员 2022-02-01 23:13 286阅读 0赞

### 前台页面 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <link href="/db/table/bootstrap.min.css" rel="stylesheet">
        
        <link href="/db/table/bootstrap-table.min.css" rel="stylesheet">
    
        
        <script src="/db/table/jquery.min.js"></script>
        <script src="/db/table/bootstrap.min.js"></script>
    
        
        <script src="/db/table/bootstrap-table.min.js"></script>
        
        <script src="/db/table/bootstrap-table-zh-CN.min.js"></script>
        <script type="application/javascript">
            window.onload=initTable;
            function initTable(){
                $("#display_result").bootstrapTable({
                    url: '/db/log/list.do',
                    method: 'get',
                    striped: true, //是否显示行间隔色
                    detailView: true,//父子表
                    pagination: true,//显示分页
                    sidePagination: "client",
                    pageNumber:1,
                    pageSize: 20,
                    pageList: [10, 25],
                    columns: [{
                        field: 'upday',
                        title: '上传日期'
                    }, {
                        field: 'username',
                        title: '上传人'
                    }, {
                        field: 'dir',
                        title: '保存目录'
                    }, {
                        field: 'count',
                        title: '文件数'
                    }, {
                        field: 'tags',
                        title: '标签'
                    },],
                    //注册加载子表的事件。注意下这里的三个参数！
                    onExpandRow: function (index, row, $detail) {
                        initSubTable(index, row, $detail);
                    }
                });
                //初始化子表格(无线循环)
                initSubTable = function (index, row, $detail) {
                    var parentid = row.id;
                    var cur_table = $detail.html('<table></table>').find('table');
                    $(cur_table).bootstrapTable({
                        url: '/db/log/files.do',
                        method: 'get',
                        queryParams: { id: parentid },
                        ajaxOptions: { id: parentid },
                        uniqueId: "id",
                        striped: true, //是否显示行间隔色
                        pagination: true,//显示分页
                        sidePagination: "client",
                        pageNumber:1,
                        pageSize: 15,
                        pageList: [10, 25],
                        columns: [{
                            field: 'fileType',
                            title: '文件类型'
                        }, {
                            field: 'fileName',
                            title: '文件名'
                        }, {
                            field: 'fileDir',
                            title: '保存目录'
                        }, {
                            field: 'category1',
                            title: '推荐标签'
                        }, {
                            field: 'category2',
                            title: '自定义标签'
                        },{
                            field: 'fileSize',
                            title: '文件大小'
                        },],
                        //无线循环取子表，直到子表里面没有记录
                        onExpandRow: function (index, row, $Subdetail) {
                            initSubTable(index, row, $Subdetail);
                        }
                    });
                };
            }
        </script>
    </head>
    <body>
    <h3>文档上传日志查询</h3>
    <div id="showResult" style="width: 1000px;" >
        <table  id="display_result" class="table" style="text-align: center">
    
        </table>
    </div>
    </body>
    </html>

### 后台代码 ###

@RequestMapping(value = "/list.do" )
        @ResponseBody
        public List<UplogBean> list() throws Exception {
            return uplogService.getUpLogList();
        }
    
    
        @RequestMapping(value="/files.do")
        @ResponseBody
        public List<FileBean> files(String id){
            return fileService.getFileList(id);
        }

### 运行效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220202/b56791da23214a37b2cd5ccd555d0b07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220202/6b7ff8d311b24f6ea97330cf4f3eb7b7.png