JS+Bootstrap做出父子表格（代码部分）理论部分在上篇文章：JS+Bootstrap做出父子表格（理论部分） 1

1、实现效果

在这里插入图片描述
2、代码部分

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>展开表格</title>
    <link href="./lib/css/bootstrap-table-pagejump.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" rel="stylesheet">
    <style lang="">
        .tablechild {
            border-bottom: 0px !important;
            border-top: 0px !important;
        }

        .tablechild thead {
            display: none !important;
        }

        .bootstrap-table .fixed-table-container .table {
            border-bottom: 1px solid #ddd;
        }

        .tablefather .bootstrap-table {
            margin-left: 20px;
            margin-bottom: -8px;
            margin-top: -8px;
            width: 60%;/* 子表格占的宽度 */
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>展开表格 ： Table </h1>
        <table id="table" class="table table-no-bordered table-striped table-hover nowrap tablefather"
            style='table-layout:fixed;' data-show-jumpto="true"></table>
        <br />
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.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>
<script src="./lib/js/bootstrap-table-pagejump.js"></script>
<script>
    var $table = $('#table');
    $table.bootstrapTable({
        url: './table.json',    //表格数据请求地址
        method: "get",          //使用get请求到服务器获取数据
        // data: data,  //表格数据
        // dataType: 'json',
        columns: [
            {
                field: 'TDM', title: '项目码', cellStyle: formatTableUnit,
                formatter: paramsMatter,
            },
            {
                field: 'ProjectName', title: '项目名称', cellStyle: formatTableUnit,
                formatter: paramsMatter,
            },
            {
                field: 'location', title: '坐落', cellStyle: formatTableUnit,
                formatter: paramsMatter,
            },
            {
                field: 'LandUser', title: '用地单位', cellStyle: formatTableUnit,
                formatter: paramsMatter,
            },
            {
                field: 'Operator', title: '经办人', cellStyle: formatTableUnit,
                formatter: paramsMatter,
            },
            { field: 'operate', title: '操作', align: 'center', },
        ],
        detailView: true,//父子表
        striped: true, //是否显示行间隔色
        pageNumber: 1, //初始化加载第一页
        pagination: true,//是否分页
        paginationShowPageGo: true,
        sidePagination: 'client',//server:服务器端分页|client：前端分页
        pageSize: 5,//单页记录数
        pageList: [5, 10],//可选择单页记录数
        //注册加载子表的事件。注意下这里的三个参数！
        onExpandRow: function (index, row, $detail) {
            initSubTable(index, row, $detail);
        },

    });
    //初始化子表格(无限循环)
    initSubTable = function (index, row, $detail) {
        var parentid = row.id;
        var cur_table = $detail.html('<table class="tablechild table-no-bordered"></table>').find('table');
        $(cur_table).bootstrapTable({
            url: './tablechild.json',
            method: 'get',
            queryParams: { id: parentid },
            ajaxOptions: { id: parentid },
            uniqueId: "id",
            striped: true, //是否显示行间隔色
            pagination: false,//显示分页
            sidePagination: "client",
            columns: [{
                field: 'TDM',
                width: 180,
                cellStyle: formatTableUnit,
                formatter: paramsMatter,
            }, {
                field: 'LandUser',
                width: 160,
                cellStyle: formatTableUnit,
                formatter: paramsMatter,
            }, {
                field: 'Operator',
                width: 160,
                cellStyle: formatTableUnit,
                formatter: paramsMatter,
            }],
            //无限循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                initSubTable(index, row, $Subdetail);
            }
        });
    };
    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index) {
        var span = document.createElement("span");
        span.setAttribute("title", value);
        span.innerHTML = value;
        return span.outerHTML;
    }
    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
        return {
            css: {
                "white-space": "nowrap",
                "text-overflow": "ellipsis",
                "overflow": "hidden",
                "max-width": "60px"
            }
        }
    }
</script>
</html>
上面我引用的是本地json数据，如果不清楚数据类型写法的，可以看上篇文章。