分配菜单改为ztree的形式，因为layui table功能不全😭

OpenAuth.Mvc/Views/ModuleManager/Assign.cshtml

@@ -5,28 +5,8 @@
 
 <div style="display: flex;">
     <ul id="tree" class="ztree" style="display: inline-block; width: 180px; padding: 10px; border: 1px solid #ddd; overflow: auto;"></ul>
-    <!--菜单列表-->
-    <table class="layui-table"
-           lay-data="{height: 'full-80', id:'menuList'}"
-           lay-filter="menulist" lay-size="sm">
-        <thead>
-        <tr>
-            <th lay-data="{checkbox:true, fixed: true}"></th>
-            <th lay-data="{field:'Name', width:120, sort: true, fixed: true}">名称</th>
-            <th lay-data="{field:'DomId', width:80}">DomId</th>
-            <th lay-data="{field:'Class', width:80}">样式</th>
-            <th lay-data="{field:'Icon', width:60,templet: '#miconTpl'}">图标</th>
-            <th lay-data="{field:'SortNo', width:80}">排序号</th>
-        </tr>
-        </thead>
-    </table>
-    <script type="text/html" id="miconTpl">
-        {{#  if( d.Icon != null && d.Icon != ''){ }}
-        <i class="layui-icon">{{ d.Icon }}</i>
-        {{#  } else { }}
-        {{ d.Icon }}
-        {{#  } }}
-    </script>
+    <ul id="menutree" class="ztree" style="display: inline-block; width: 180px; padding: 10px; border: 1px solid #ddd; overflow: auto;"></ul>
+        
 </div>
 
 <script type="text/javascript" src="/layui/layui.js"></script>

OpenAuth.Mvc/js/assign.js

@@ -12,27 +12,55 @@ layui.config({
   
     //菜单列表
     var menucon = {};  //table的参数，如搜索key，点击tree的id
-    var menuList = function (options) {
-        if (options != undefined) {
-            $.extend(menucon, options);
+    //菜单树状列表，等lay table没问题了，可以换成table
+    var menutree = function () {
+        var url = '/ModuleManager/LoadMenus';
+        var menuTree;
+        var setting = {
+            view: { selectedMulti: true },
+            check: {
+                enable: true,
+                chkStyle: "checkbox",
+                chkboxType: { "Y": "", "N": "" } //去掉勾选时级联
+            },
+            data: {
+                key: {
+                    name: 'Name',
+                    title: 'Name'
+                },
+                simpleData: {
+                    enable: true,
+                    idKey: 'Id',
+                    pIdKey: 'ParentId',
+                    rootPId: 'null'
                 }
-        table.reload('menuList', {
-            url: '/ModuleManager/LoadMenus',
-            where: menucon
-        });
-        //监听列表checkbox,设置是否分配菜单
-        table.on('checkbox(menulist)', function (obj) {
+            },
+            callback: {
+                onClick: function (event, treeId, treeNode) {
+                   //
+                },
+                onCheck: function (event, treeId, treeNode) {
                     var url = "/RelevanceManager/Assign";
-            if (!obj.checked) {
+                    if (!treeNode.checked) {
                         url = "/RelevanceManager/UnAssign";
                     }
-            $.post(url, { type: menuType, firstId: id, secIds: [obj.data.Id] }
+
+                    $.post(url, { type: menuType, firstId: id, secIds: [treeNode.Id] }
                         , function (data) {
                             layer.msg(data.Message);
                         }
                        , "json");
-        });
+                }
+            }
+        };
+        var load = function (options) {
+            if (options != undefined) {
+                $.extend(menucon, options);
+            }
 
+            $.getJSON(url, menucon, function (json) {
+                menuTree = $.fn.zTree.init($("#menutree"), setting);
+                menuTree.addNodes(null, json.data);
                 //如果该用户已经分配菜单了，则设置相应的状态
                 var url = "/ModuleManager/LoadMenusForUser";
                 if (type.indexOf("Role") != -1) {
@@ -47,12 +75,19 @@ layui.config({
                         $.each(data,
                             function (i) {
                                 var that = this;
-                        //todo:怎么给lay table设置选中啊？？？？
+                                var node = menuTree.getNodeByParam("Id", that.Id, null);
+                                menuTree.checkNode(node, true, false);
                             });
                     });
+                menuTree.expandAll(true);
+            });
+        };
+        return {
+            load: load
         }
+    }();
 
-    //左边树状模块列表
+    //模块列表
     var ztree = function () {
         var url = '/UserSession/QueryModuleList';
         var zTreeObj;
@@ -77,7 +112,7 @@ layui.config({
             },
             callback: {
                 onClick: function (event, treeId, treeNode) {
-                    menuList({ moduleId: treeNode.Id });
+                    menutree.load({ moduleId: treeNode.Id });
                 },
                 onCheck: function (event, treeId, treeNode) {
                     var url = "/RelevanceManager/Assign";
@@ -112,7 +147,7 @@ layui.config({
                             });
                     });
 
-                menuList({ moduleId: json[0].Id });
+                menutree.load({ moduleId: json[0].Id });
                 zTreeObj.expandAll(true);
             });
         };

OpenAuth.Mvc/js/roles.js

@@ -156,7 +156,7 @@ layui.config({
             var index = layer.open({
                 title: "为用角色配模块",
                 type: 2,
-                area: ['800px', '500px'],
+                area: ['450px', '400px'],
                 content: "/ModuleManager/Assign?type=RoleModule&menuType=RoleElement&id=" + data[0].Id,
                 success: function (layero, index) {
 

OpenAuth.Mvc/js/users.js

@@ -156,7 +156,7 @@ layui.config({
             var index = layer.open({
                 title: "为用户分配模块",
                 type: 2,
-                area: ['800px', '500px'],
+                area: ['450px', '400px'],
                 content: "/ModuleManager/Assign?type=UserModule&menuType=UserElement&id=" + data[0].Id,
                 success: function(layero, index) {