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); // 关键地方                }            });        },    });});

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