Layui + zTree注意事项

今日尝试了一下layui+ztree的权限更新，有部分内容不容易实现，现在已经解决，特此记录一下，以慰后来者。

一、资源准备。

       资源链接：https://pan.baidu.com/s/1NtN3FYkW28K5rmeqd3rBrQ

       提取码：w87p

     

 

 

       css里面还有一个图标包，需要放在同一个根目录下。

二、layui引用

       

 

 三、修改js

      

 

 四、菜单效果展示

     

 

 

 

 五、js代码

        引用

        

 

        

 

 

       

 

       授权代码

       

 1 //菜单授权
 2             function powerRole(data) {
 3                 layer.open({
 4                     title: '角色权限分配',
 5                     btn: ['保存', '取消'],
 6                     content: '<ul >,
 7                     success: function (layero, dIndex) {
 8                         var loadIndex = layer.load(2);
 9                         $.ajax({
10                             url: "../Role/GetRoleAuthListWithRoleId",
11                             type: "get",
12                             dataType: "json",
13                             data: { RoleId: data.RoleId },
14                             success: function (res) {
15                                 layer.close(loadIndex);
16                                 if (res.code == 0) {
17                                     $.fn.zTree.init($('#roleAuthTree'), {
18                                         check: {
19                                             enable: true
20                                         },
21                                         data: {
22                                             simpleData: {
23                                                 enable: true
24                                             }
25                                         }
26                                     }, res.data);
27                                 } else {
28                                     layer.msg(res.msg, { icon: 2 });
29                                 }
30                             }
31                         });
32                         // 超出一定高度滚动
33                         $(layero).children('.layui-layer-content').css({
34                             'max-height': '300px',
35                             'overflow': 'auto'
36                         });
37                     },
38                     yes: function (dIndex) {
39                         var insTree = $.fn.zTree.getZTreeObj('roleAuthTree');
40                         var checkedRows = insTree.getCheckedNodes(true);
41                         var ids = [];
42                         for (var i = 0; i < checkedRows.length; i++) {
43                             ids.push(checkedRows[i].id);
44                         }
45                         var loadIndex = layer.load(2);
46                         $.ajax({
47                             url: "../Role/SaveWithRoleId",
48                             type: "get",
49                             dataType: "json",
50                             data: { roleId: data.RoleId, authIds: ids.join(',')},
51                             success: function (res) {
52                                 layer.close(loadIndex);
53                                 if (res.code === 0) {
54                                     layer.msg(res.msg, {icon: 1});
55                                     layer.close(dIndex);
56                                     //刷新table。也可以考虑刷新页面缓存
57                                     reloadTable();
58                                 }
59                                 else {
60                                     layer.msg(res.msg, { icon: 2 });
61                                 }
62                             }
63                         });                      
64                     }
65                 });
66             }

View Code