boostrapTable表格嵌套表格detailView(学习篇)

1、要使用，首先要引入相关的js文件，和css样式文件

//引入表格样式文件
<link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" />
//引入jquery，后面写js用这个方便
<script src="../js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
//引入表格js
<script src="../js/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
//将表格翻译为中文的js
<script src="../js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

2、父子表

window.onload = function() {
    // 表格数据获取
    $("#mytable").bootstrapTable({
        url: '../myTestJson/dataMessage.json',
        pagination: true, //是否分页
        pageList: [5, 10], //可选择单页记录数
        pageSize: 5, //单页记录数
        detailView: true, //父子表这个得配置
        responseHandler: function(res) {
            return res.buyOrder
        },
        columns: [{
                title: '订单类型',
                field: 'orderType',
                align: 'center',
                valign: 'middle',
                formatter: function(value, row, index) {
                    if (value == "0") {
                        value = "付费";
                    } else {
                        value = "免费"
                    }
                    return value;
                },
        //无线循环取子表，直到子表里面没有记录
        onExpandRow: function(index, row, $Subdetail) {
            InitSubTable(index, row, $Subdetail);
        },
    })
    //获取儿子表的数据
    InitSubTable = function(index, rows, $Subdetail) {
        var cur_table = $Subdetail.html('<table></table>').find('table');
        // 子级表格详情数据获取
        $(cur_table).bootstrapTable({
            url: '../myTestJson/dataMessage.json',
            responseHandler: function(res) {
                return res.buyOrderDetails
            },
            columns: [{
                    title: '缩略图',
                    field: 'thumbImg',
                    align: 'center',
                    valign: 'middle',
                },]
        })
    }
}