1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8" />
| <meta name="renderer" content="webkit">
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,charset=utf-8">
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
| <!-- <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"> -->
| <link rel="stylesheet" type="text/css" href="../../../layui-2.6.8/dist/css/layui.css"/>
| <title>测试树形组件</title>
| </head>
| <style type="text/css">
| .divflex{
| width: 800px;
| display: flex;
| justify-content: space-between;
| }
| </style>
| <body>
| <div class="divflex">
| <div id="" style=" width: 380px;">
| <p>菜单权限</p>
| <div id="">
| <div id="test1"></div>
| </div>
| </div>
| <div style="width: 280px">
| <p>测试权限</p>
| <div id="">
| <div id="test2" class="demo-tree"></div>
| </div>
| </div>
| </div>
|
|
|
| <script src="../../../layui-2.6.8/dist/layui.js"></script>
| <script src="../../../js/public.js"></script>
| <script src="../../../js/jquery-3.5.1.min.js"></script>
| <script src="../../../js/jquery.cookie.js"></script>
|
| <script>
| layui.config({
| base: '../../../layuiadmin/' //静态资源所在路径
| }).extend({
| index: 'lib/index' //主入口模块
| }).use(['index','tree', 'form', 'layer'], function() {
| var $ = layui.$,
| form = layui.form,
| layer = layui.layer;
| var tree = layui.tree
| var laneWayData=[];
| //模拟数据1
| var data1 = [{
| title: '江西'
| ,id: 1
| ,children: [{
| title: '南昌'
| ,id: 1000
| ,children: [{
| title: '青山湖区'
| ,id: 10001
| },{
| title: '高新区'
| ,id: 10002
| }]
| },{
| title: '九江'
| ,id: 1001
| },{
| title: '赣州'
| ,id: 1002
| }]
| },{
| title: '广西'
| ,id: 2
| ,children: [{
| title: '南宁'
| ,id: 2000
| },{
| title: '桂林'
| ,id: 2001
| }]
| },{
| title: '陕西'
| ,id: 3
| ,children: [{
| title: '西安'
| ,id: 3000
| },{
| title: '延安'
| ,id: 3001
| }]
| }]
|
| function init(datas){
| var inst1 = tree.render({
| id:'demoId',
| elem: '#test1', //绑定元素
| showCheckbox: true, //是否显示复选框
| data :datas
| });
|
| }
| var into = tree.render({
| elem: '#test2' ,
| data: data1,
| onlyIconControl: true , //是否仅允许节点左侧图标控制展开收缩
| click: function(obj){
| console.log(obj);
| layer.msg(JSON.stringify(obj.data));
| }
| });
|
|
| var ids = getQueryString('id');
| var param = {
| msg: 1,
| };
| sendData(IP + "/Role/GetRolesd", param, 'post', function(res) {
| console.log(res);
| if (res.code == 1) { //成功
| //页面赋值
| var text1 = res.data;
| console.log(text1);
| init(text1);
| } else { //不成功
| layer.msg(res.msg, {
| icon: 2,
| time: 2000 //2秒关闭（如果不配置，默认是3秒）
| });
| }
| });
|
|
|
|
|
|
| })
| </script>
|
| </body>
| </html>
|
|
