不容错过的精美的树形表格treegrid在项目里面使用总结

一 问题描述:

树形表格TreeGrid在日常项目中还是运用的比较多的，哪究竟都在什么地方使用呢?

二 使用场景

TreeGrid它具体使用在什么地方?

首页您要用TreeGrid，肯定是它的特点满足您的需求，所有您才去使用。那它究竟能在项目里面用在哪些地方呢
最显著的特点 就是，您的数据有层级结构，所有才使用树形的。说直白一点就是 有子级 有父级，那么这个数据
就可以使用TreeGrid进行展示。
···
记住一句话：
知识不是学的多就有意义，而是用的多才能体现价值，如果你学一个知识，永远都不去用，那这个东西就没有任何价值
···
所有这个TreeGrid 我们就用在 权限系统 里面菜单管理里面就可以使用.
具体的源码挂在 码云上面 https://gitee.com/soul_PreCoder
下面我们就菜单模块为例进行说明使用；

三 使用步骤

第一步.首先我们需要在项目中，引入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>

第二步. 需要在页面定义一个容器

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

第三步. JS代码加载数据

     // '[{"id":1,"pid":0,"name":"用户管理",url:'',icon:'',"permission":{}}]
 1  var menus =   [[${menus}]]; //后台传递的过来的数据  是JSON格式
 2  var $table = $('#menuTable'); //得到表格的jquery对象
 3
 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) {
14                             //设置选中
15                             return {  checked: true };
16                         }
17                     }
18                 },
19                 { field: 'name',  title: '名称' },
20                 { field: 'url',  title: '路径' },
21                 { field: 'icon',  title: '图标' },
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);
57                 // 勾选父类
58                 selectParentChecked(datas,row,"id","pid")
60                 // 刷新数据
61                 $table.bootstrapTable('load', datas);
62             },
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 最后实践
如果您正在使用，就赶快行动其在，在功能 运用在SpringBoot+SpringSecurity的在线考试系统.
点击了解SSM的在线考试系统。
学习 开发 接单神器 码仔管理系统