bootstrap-Table sub父子表的使用

概述

今天项目里面要用到bootstrapTable里面的Sub Table也就是我们说的父子表，之前也没做过，so直接到官网找文档，卡的不行，算了只能网上百度找了几篇案例，也都是不全面。搞了一下午，终于有点效果。今天记录一下，加深印象，也给像我一样寻找案例的朋友一点思路。

环境：springboot+freemarker（jsp也是一样做法）

先看一下官网的效果图http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html

本人最后效果

页面是丑了点，解决了需求就好。

开始第一步在页面中引入bootstrapTable的js和css文件
官方下载地址

https://github.com/wenzhixin/bootstrap-table/archive/develop.zip

<link href="${cp}plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet" media="screen">
<script src="${cp}plugins/bootstrap-table/bootstrap-table.js" type="text/javascript"></script>
    <script src="${cp}plugins/bootstrap-table/bootstrap-table-zh-CN.js" charset="UTF-8" type="text/javascript"></script>

准备好后，我们在页面定义一个

<table id="table"></table>

然后在js中初始化表格
我们知道bootstrapTable初始化有两种方式，一种是通过table 的data-url属性在后台查询，二是页面加载后通过js直接加载数据，我们在父表中采用第一种通过url从后台查询出列表数据，子表数据我们通过ajax同步获取数据后在通过第二种方式初始化子表。这里其实是有个坑，有个坑，有个坑 ，重要的事情说三遍，之前这里折腾了几个小时，看网上案例都是采用第一种方式去加载父表和子表，我不知道他们有没有测试过，反正我是无法加载出子表数据。也就是说子表的数据是获取到了，但是无法展示到页面里。找了好久，最后怀疑是异步的原因，也就是说，bootstrapTable通过url获取数据后，没等数据加载，就把页面渲染了，最后我尝试先用ajax同步获取数据后，在初始化子表。子表里面数据就出来了。这可能真关系到加载顺序 ，这只是我个人结论，如果有另有高人知道这一原因，希望能及时指出。

下面我们在代码里走一遍吧

$(function() {
//先销毁表格，在初始化
    $('#table').bootstrapTable('destroy').bootstrapTable({
        columns: [{
            checkbox: true
        },
        {
            title: '列名一',
            field: 'id',
            align: 'center',
        },
        {
            title: '列名二',
            field: 'name',
            align: 'center',
            formatter: function(value, row, index) {
               //处理格式化数据
            }
        },
        {
            title: '添加时间',
            field: 'createDate',
            align: 'center',
        }],
        url: "user/list/",      //请求数据的地址URL
        method: 'post',  //请求方式(*)
        striped: true,  //是否显示行间隔色
        cache: false,  //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)
        pagination: true,  //是否显示分页(*)
        sortable: true,  //是否启用排序
        sortOrder: "desc", //排序方式
        sidePagination: "server",  //分页方式：client客户端分页，server服务端分页(*)
        pageNumber: 1, //初始化加载第一页，默认第一页
        pageSize: 10,  //每页的记录行数(*)
        pageList: [20, 50, 100],  //可供选择的每页的行数(*)
        showColumns: false,  //是否显示所有的列
        showRefresh: false,  //是否显示刷新按钮
        minimumCountColumns: 2,  //最少允许的列数
        clickToSelect: true,   //是否启用点击选中行
        height: 800,
        detailView: true,  //是否显示父子表    *关键位置*
        queryParamsType: "limit",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        checkboxHeader: true,
        search: false,
        singleSelect: true,
        striped: true,
        showColumns: true,  // 开启自定义列显示功能
        responseHandler: function responseHandler(sourceData) {
            //这里要做分页，所以对返回的数据进行了处理
            return {
                "total": sourceData.total,  // 总条数
                "rows": sourceData.rows // 返回的数据列表（后台返回一个list集合）
            };
        },
        queryParams: function queryParams(params) { 
            //设置查询参数,就是把页面需要查询的字段通过jquery取值后传到后台
            var param = {  
                id: $("input[name='id']").val(),
                name: $("input[name='name']").val(),
                pageSize: params.limit, // 页面大小
                pageNumber: (params.offset)/10+1 // 页码
            };
            return param;
        },
        //注册加载子表的事件。你可以理解为点击父表中+号时触发的事件
        onExpandRow: function(index, row, $detail) {
            //这一步就是相当于在当前点击列下新创建一个table
            var cur_table = $detail.html('<table></table>').find('table');
            var html = "";
            html += "<table class='table'>";
            html += "<thead>";
            html += "<tr style='height: 40px;'>";
            html += "<th>用户id</th>";
            html += "<th>用户姓名</th>";
            html += "</tr>";
            html += "</thead>";
            $.ajax({
                type: "post",
                url: "user/list",       //子表请求的地址
                data: {id:row.id,name:row.name},//我这里是点击父表后，传递父表列id和nama到后台查询子表数据
                async: false,           //很重要，这里要使用同步请求
                success: function(data) {
                    html += '<ul class="list-group" >';
                    //遍历子表数据
                    $.each(data.rows,
                    function(n, value) {
                        html += "<tr  align='center'>" 
                            + "<td>" + value.id + "</td>" 
                            + "<td>" + value.name + "</td>" 
                            + "</tr>";
                    });
                    html += '</table>';
                    $detail.html(html); // 关键地方
                }
            });
        },
    });
});

搞定，办法是笨了点，效果还是实现了。欢迎大家有更好办法的 交流交流！！