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

r囧r小猫 2023-02-15 01:18 3阅读 0赞

一 问题描述:

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

二 使用场景

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

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

三 使用步骤

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

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

第三步. 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 最终启动项目 展示的效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70]

5 最后实践  
如果您正在使用，就赶快行动其在，在功能 运用在SpringBoot+SpringSecurity的在线考试系统.  
点击了解[SSM的在线考试系统][SSM]。  
学习 开发 接单神器 [码仔管理系统][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604082028997.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA==,size_16,color_FFFFFF,t_70
[SSM]: https://blog.csdn.net/coder1998/article/details/106525503
[Link 1]: https://blog.csdn.net/coder1998/article/details/106310148