JS+Bootstrap做出父子表格（理论部分）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

说明：之所以使用这个框架是因为有个项目是这种过时的框架技术，所以只能多看了几眼，然后这篇文章也在草稿里放置很久了，今天看到活动就翻出来了233。
下面是我当时做这个功能的两个思路，和当时思考过程中参考的一些文章链接也在下面，如果真有需要的人可以参考下。

官方Bootstrap Table链接：Bootstrap Table
事实证明还是要好好读官方文档才行。

1、树形表格Table Treegrid

  需要引入的样式文件，这里为了方便我全部使用网络链接（除了bootstrap-table-pagejump.css和bootstrap-table-pagejump.js）做展示：

注意：这里引入的js文件顺序不能错，jquery一定要在前面！

<link href="./lib/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.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">

需要引入的js文件：

<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.12.0/extensions/treegrid/bootstrap-table-treegrid.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>

1.1、如果使用url本地数据

如果是vscode可以使用插件LiveServer，以服务器发送请求。

<table id="table" data-toggle="table"  class="table table-striped"></table>
<script>
    $('#table').bootstrapTable({
        url: './table.json',
        columns: [
            { field: 'id', title: 'Item ID' },
            { field: 'name', title: '项目码' },
            { field: 'proName', title: '项目名称' },
            { field: 'location', title: '坐落' },
            { field: 'landUnit', title: '用地单位' },
            { field: 'permissionValue', title: '经办人' },
        ]
    });
</script>

1.2、使用写的内部json数据

pid和id是用来识别tree树形的，可以不需要，加上不使用也行。

<table id="table" data-toggle="table"  class="table table-striped"></table>
<script>
    var data = JSON.parse(
        '[{"id":1,"pid":0,"name":"2313233224","permissionValue":"open:user:manage"},' +
        '{"id":2,"pid":0,"name":"系统管理","permissionValue":"open:system:manage"},' +
        '{"id":3,"pid":1,"name":"土地勘测定界","permissionValue":"测试add"},' +
        '{"id":4,"pid":1,"name":"不动产预测算","permissionValue":"测试edit"},' +
        '{"id":5,"pid":1,"name":"------","permissionValue":"测试del"}]');
    $('#table').bootstrapTable({
        data: data,
        columns: [
            { field: 'id', title: 'Item ID' },
            { field: 'name', title: '项目码' },
            { field: 'proName', title: '项目名称' },
            { field: 'location', title: '坐落' },
            { field: 'landUnit', title: '用地单位' },
            { field: 'permissionValue', title: '经办人' },
        ]
    });
</script>

树形表格参考文章：www.jianshu.com/p/f090115c7…
  顺便说一句，这篇文章没问题，但我发现会和分页冲突，具体情况自己摸索，所以我最终还是选择了父子表格。

2、父子表格

  根据我的需求，我去掉了表格和子表格的表头。进行了一些样式上的调整。
  里面的bootstrap-table-pagejump.css和相应js文件可以复制下方我推的链接里的，因为我没找到网络上的链接。 全部代码部分因为太占字数有水文嫌疑，就放在下一篇：JS+Bootstrap做出父子表格（代码部分）了。

父子表格参考文章：blog.csdn.net/javahighnes…