bootstrapr表格父子框_bootstrap-table 父子表入门篇

Bootstrap-table 是一款基于Bootstrap的jQuery表格插件，可以实现表格的各种功能，例如排序、搜索、分页等。而Bootstrap-table也提供了父子表功能，可以方便地实现表格的嵌套展示。下面是父子表的入门教程。

首先，我们需要准备一个包含父子关系的数据源。例如：

var data = [
    {
        id: 1,
        name: 'Parent 1',
        children: [
            {
                id: 2,
                name: 'Child 1-1'
            },
            {
                id: 3,
                name: 'Child 1-2'
            }
        ]
    },
    {
        id: 4,
        name: 'Parent 2',
        children: [
            {
                id: 5,
                name: 'Child 2-1'
            }
        ]
    }
];

其中，每个父节点都有一个children属性，代表它的子节点。接着，我们需要在表格中配置父子表的相关参数。例如：

<table data-toggle="table"
       data-url="data.json"
       data-detail-view="true"
       data-detail-formatter="detailFormatter">
    <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Name</th>
        </tr>
    </thead>
</table>

<script>
function detailFormatter(index, row) {
    var html = [];
    $.each(row.children, function (key, child) {
        html.push('<p>' + child.name + '</p>');
    });
    return html.join('');
}
</script>

在上述代码中，我们配置了data-detail-view和data-detail-formatter参数，分别表示开启父子表功能和定义子表的展示方式。而在detailFormatter函数中，我们将子节点的名称拼接成了一段HTML字符串，并返回给父表格的插件。

最后，我们需要引入Bootstrap-table的相关文件，并初始化表格：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<script>
$(function () {
    $('table').bootstrapTable({
        data: data
    });
});
</script>

这样，我们就成功地实现了一个父子表的展示效果。当我们点击父表格的某一行时，就会展示出它所对应的子表格。