treegrid树形表格的完美运⽤⼀问题描述:
树形表格TreeGrid在⽇常项⽬中还是运⽤的⽐较多的，哪我们在项⽬中，应该怎么引⼊和使⽤TreeGrid呢?
⼆使⽤步骤
1.⾸先我们需要在项⽬中，引⼊TreeGrid组件需要引⼊的⽂件
<!-- 引⼊treegrid-->
<link rel="stylesheet" th:href="@{/static/js/plugins/id.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/id.min.js}"></script>
　2. 需要在页⾯定义⼀个容器
<div>
<div>
<h1></h1>
<table id="menuTable"></table>
<br/>
</div>
</div>
　3. JS代码加载数据
1var menus =  [[${menus}]]; //后台传递的过来的数据
2var $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) {
12if (row.check == true) {
13// console.log(row.serverName);
14//设置选中
15return {  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                $id({
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                $id('getRootNodes').treegrid('expand');
51            },
52            onCheck:function(row){
53var 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){
65var datas = $table.bootstrapTable('getData');
66                selectChilds(datas,row,"id","pid",false);
bootstrap项目67                $table.bootstrapTable('load', datas);
68            }
70        });
4 最终效果
5 最后实践
赶快⾏动起来测试⼀下吧，需要源码的，可以联系我

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。