Layui + zTree注意事项

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

一、资源准备。

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

       提取码：w87p

     

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

二、layui引用

       

 三、修改js

      

 四、菜单效果展示

     

 

 五、js代码

        引用

        

        

       

       授权代码

       

//菜单授权
            function powerRole(data) {
                layer.open({
                    title: '角色权限分配',
                    btn: ['保存', '取消'],
                    content: '<ul id="roleAuthTree" class="ztree"></ul>',
                    success: function (layero, dIndex) {
                        var loadIndex = layer.load(2);
                        $.ajax({
                            url: "../Role/GetRoleAuthListWithRoleId",
                            type: "get",
                            dataType: "json",
                            data: { RoleId: data.RoleId },
                            success: function (res) {
                                layer.close(loadIndex);
                                if (res.code == 0) {
                                    $.fn.zTree.init($('#roleAuthTree'), {
                                        check: {
                                            enable: true
                                        },
                                        data: {
                                            simpleData: {
                                                enable: true
                                            }
                                        }
                                    }, res.data);
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        });
                        // 超出一定高度滚动
                        $(layero).children('.layui-layer-content').css({
                            'max-height': '300px',
                            'overflow': 'auto'
                        });
                    },
                    yes: function (dIndex) {
                        var insTree = $.fn.zTree.getZTreeObj('roleAuthTree');
                        var checkedRows = insTree.getCheckedNodes(true);
                        var ids = [];
                        for (var i = 0; i < checkedRows.length; i++) {
                            ids.push(checkedRows[i].id);
                        }
                        var loadIndex = layer.load(2);
                        $.ajax({
                            url: "../Role/SaveWithRoleId",
                            type: "get",
                            dataType: "json",
                            data: { roleId: data.RoleId, authIds: ids.join(',')},
                            success: function (res) {
                                layer.close(loadIndex);
                                if (res.code === 0) {
                                    layer.msg(res.msg, {icon: 1});
                                    layer.close(dIndex);
                                    //刷新table。也可以考虑刷新页面缓存
                                    reloadTable();
                                }
                                else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        });                      
                    }
                });
            }

六、后台代码

 /// <summary>
        /// 根据角色ID获取权限列表
        /// </summary>
        /// <param name="RoleId"></param>
        /// <returns></returns>
        public object GetListWithRoleId(string RoleId)
        {
            var MenuInfo = _context.Base_Menu.Where(t => t.DeleteMark == 0)
                .Select(t => new {
                    name = t.name,
                    Checked = false,
                    pId = t.parentid,
                    id = t.id,
                    open = true
                })
                .ToList();

            var RoleAuthInfo = _context.Base_RoleAuthority.Where(t => t.DeleteMark == 0 && t.RoleId == RoleId)
                .Select(t => new {
                    t.id,
                    t.Checked
                })
                .ToList();

            //左连接
            var list = MenuInfo.GroupJoin(RoleAuthInfo, left => left.id, right => right.id, (left, right) =>
            new
            {
                name = left.name,
                Checked = right.Where(o => o.id == left.id).ToList().Count > 0 ? right.Where(o => o.id == left.id).ToList()[0].Checked : false,
                pId = left.pId,
                id = left.id,
                open = left.open,
            }).ToList();

            return list;
        }

        /// <summary>
        /// 保存角色权限
        /// </summary>
        /// <param name="roleId"></param>
        /// <param name="authIds"></param>
        /// <returns></returns>
        public string SaveWithRoleId(string roleId, string authIds)
        {
            try
            {
                if (!string.IsNullOrEmpty(roleId))
                {
                    var RoleAuthInfo = _context.Base_RoleAuthority.Where(t => t.RoleId == roleId && t.DeleteMark == 0).ToList();

                    //查询是否有数据
                    if (RoleAuthInfo.Count() > 0)
                    {
                        foreach (var item in RoleAuthInfo)
                        {
                            //追踪数据
                            var RoleAuthList = _context.Base_RoleAuthority.Single(t => t.AuthId == item.AuthId);
                            //删除旧的权限数据
                            _context.Base_RoleAuthority.Remove(item);
                        }

                        _context.SaveChanges();
                    }

                    //新增新的权限数据
                    var Authlist = authIds.Split(',');
                    foreach (var item in Authlist)
                    {
                        var MenuInfo = _context.Base_Menu.Where(t => t.id == item && t.DeleteMark == 0).FirstOrDefault();
                        if (MenuInfo != null)
                        {
                            var RoleAuthObj = new RoleAuthorityEntity();
                            RoleAuthObj.Create();

                            RoleAuthObj.RoleId = roleId;
                            RoleAuthObj.id = MenuInfo.id;
                            RoleAuthObj.Checked = true;

                            _context.Base_RoleAuthority.AddAsync(RoleAuthObj);
                            _context.SaveChanges();
                        }
                    }
                }
                else
                {
                    return "角色id未获取到！";
                }

                return "true";
            }
            catch (Exception ex)
            {
                return ex.ToString();
                throw ex;
            }
        }