分配菜单改为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>
-    <!--菜单列表-->
+    <ul id="menutree" 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>
 </div>
 
 <script type="text/javascript" src="/layui/layui.js"></script>

OpenAuth.Mvc/js/assign.js

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