treegrid树形表格的完美运用

一问题描述:

树形表格TreeGrid在日常项目中还是运用的比较多的，哪我们在项目中，应该怎么引入和使用

TreeGrid呢?

二使用步骤

1.首先我们需要在项目中，引入TreeGrid组件需要引入的文件

   <!-- 引入treegrid-->
    <link rel="stylesheet" th:href="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.css}">
    <script type="text/javascript"  th:src="@{/static/js/plugins/bootstrap-table-treegrid/bootstrap-table-treegrid.js}"></script>
    <script type="text/javascript"  th:src="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.js}"></script>

　2. 需要在页面定义一个容器

 <div>
     <div>
        <h1></h1>
           <table id="menuTable"></table>
          <br/>
      </div>
</div>

　3. JS代码加载数据

 1  var menus =   [[${menus}]]; //后台传递的过来的数据
 2  var $table = $('#menuTable');
 3         // '[{"id":1,"pid":0,"name":"用户管理",url:'',icon:'',"permission":{}},' +
 4     $(function() {
 5         //加载树形表格
 6         $table.bootstrapTable({
 7             data:menus,
 8             idField: 'id',
 9             dataType:'jsonp',
10             columns: [
11                 { field: 'check',  checkbox: true, formatter: function (value, row, index) {
12                         if (row.check == true) {
13                             // console.log(row.serverName);
14                             //设置选中
15                             return {  checked: true };
16                         }
17                     }
18                 },
19                 { field: 'name',  title: '名称' },
20                 { field: 'url',  title: '路径' },
21                 { field: 'icon',  title: '图标' },
22                 // {field: 'id', title: '编号', sortable: true, align: 'center'},
23                 {field: 'pid', title: '所属上级',formatter:'pidFormatter'},
24                 { field: 'permission',  title: '权限值', sortable: true,  align: 'center', formatter: 'permissionFormatter'  },
25                 { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
26             ],
30             //在哪一列展开树形
31             treeShowField: 'name',
32             //指定父id列
33             parentIdField: 'pid',
35             onResetView: function(data) {
36                 //console.log('load');
37                 $table.treegrid({
38                     initialState: 'collapsed',// 所有节点都折叠
39                     // initialState: 'expanded',// 所有节点都展开，默认展开
40                     treeColumn: 1,
41                     expanderExpandedClass: 'mdi mdi-minus',  //图标样式
42                     expanderCollapsedClass: 'mdi mdi-plus',
43                     onChange: function() {
44                         $table.bootstrapTable('resetWidth');
45                     }
46                 });
48                 //只展开树形的第一级节点
49                 $table.treegrid('getRootNodes').treegrid('expand');
51             },
52             onCheck:function(row){
53                 var datas = $table.bootstrapTable('getData');
54                 // 勾选子类
55                 selectChilds(datas,row,"id","pid",true);
56 
57                 // 勾选父类
58                 selectParentChecked(datas,row,"id","pid")
59 
60                 // 刷新数据
61                 $table.bootstrapTable('load', datas);
62             },
63 
64             onUncheck:function(row){
65                 var datas = $table.bootstrapTable('getData');
66                 selectChilds(datas,row,"id","pid",false);
67                 $table.bootstrapTable('load', datas);
68             }
70         });

4 最终效果

5 最后实践

赶快行动起来测试一下吧，需要源码的，可以联系我