C# EasyUI树形结构权限管理模块-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

C# EasyUI树形结构权限管理模块

简介: 最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来。 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构造权限管理模块 今天是2016年最后一天,在此祝大家新年快乐,辞旧迎新,接下来的2017,希望大家...

最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来。

十年河东十年河西,莫欺少年穷

学无止境,精益求精

本节和大家探讨下C#使用EasyUI树形结构/Tree构造权限管理模块

今天是2016年最后一天,在此祝大家新年快乐,辞旧迎新,接下来的2017,希望大家步步高升,发大财!

本节先贴出前端的代码

首先,你需要引入您的相应的JS/CSS文件

然后,咱们使用静态HTML构造一个树形结构:

<div title="健康医疗">
    <div style="clear: both; height: 5px;"></div>
    <ul class="easyui-tree" id="myTree" style="padding-left: 5px;">
        <li>
            <span>在此设置权限</span>
            <ul>

                    <li data-options="state:'open'">
                        <span>系统管理</span>
                        <ul>
                                <li data-options="state:'open'">
                                    <span>系统统计</span>
                                    <ul>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_271">超级管理员</label><input id="Checkbox_271" name="checkbox" type="checkbox" value="1_17_3" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_272">健康医生</label><input id="Checkbox_272" name="checkbox" type="checkbox" value="1_17_2"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_273">健康师</label><input id="Checkbox_273" name="checkbox" type="checkbox" value="1_17_1"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_274">会员</label><input id="Checkbox_274" name="checkbox" type="checkbox" value="1_17_0"/>
                                                </span>
                                            </li>

                                    </ul>
                                </li>
                                <li data-options="state:'open'">
                                    <span>管理员列表</span>
                                    <ul>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_281">超级管理员</label><input id="Checkbox_281" name="checkbox" type="checkbox" value="1_18_3" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_282">健康医生</label><input id="Checkbox_282" name="checkbox" type="checkbox" value="1_18_2"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_283">健康师</label><input id="Checkbox_283" name="checkbox" type="checkbox" value="1_18_1"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_284">会员</label><input id="Checkbox_284" name="checkbox" type="checkbox" value="1_18_0"/>
                                                </span>
                                            </li>

                                    </ul>
                                </li>
                                <li data-options="state:'open'">
                                    <span>角色管理</span>
                                    <ul>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_291">超级管理员</label><input id="Checkbox_291" name="checkbox" type="checkbox" value="1_19_3" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_292">健康医生</label><input id="Checkbox_292" name="checkbox" type="checkbox" value="1_19_2"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_293">健康师</label><input id="Checkbox_293" name="checkbox" type="checkbox" value="1_19_1"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_294">会员</label><input id="Checkbox_294" name="checkbox" type="checkbox" value="1_19_0"/>
                                                </span>
                                            </li>

                                    </ul>
                                </li>
                                <li data-options="state:'open'">
                                    <span>权限管理</span>
                                    <ul>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_321">超级管理员</label><input id="Checkbox_321" name="checkbox" type="checkbox" value="1_22_3" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_322">健康医生</label><input id="Checkbox_322" name="checkbox" type="checkbox" value="1_22_2"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_323">健康师</label><input id="Checkbox_323" name="checkbox" type="checkbox" value="1_22_1"/>
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_324">会员</label><input id="Checkbox_324" name="checkbox" type="checkbox" value="1_22_0"/>
                                                </span>
                                            </li>

                                    </ul>
                                </li>
                        </ul>
                    </li>
                    <li data-options="state:'closed'">
                        <span>新闻中心</span>
                        <ul>
                                <li data-options="state:'closed'">
                                    <span>新闻种类</span>
                                    <ul>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_411">超级管理员</label><input id="Checkbox_411" name="checkbox" type="checkbox" value="2_21_3" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_412">健康医生</label><input id="Checkbox_412" name="checkbox" type="checkbox" value="2_21_2" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_413">健康师</label><input id="Checkbox_413" name="checkbox" type="checkbox" value="2_21_1" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_414">会员</label><input id="Checkbox_414" 
                                                            name="checkbox" type="checkbox" value="2_21_0"/>
                                                </span>
                                            </li>

                                    </ul>
                                </li>
                                <li data-options="state:'closed'">
                                    <span>新闻列表</span>
                                    <ul>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_401">超级管理员</label><input id="Checkbox_401" name="checkbox" type="checkbox" value="2_20_3" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_402">健康医生</label><input id="Checkbox_402" name="checkbox" type="checkbox" value="2_20_2" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_403">健康师</label><input id="Checkbox_403" name="checkbox" type="checkbox" value="2_20_1" checked="checked" />
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                    <label for="Checkbox_404">会员</label><input id="Checkbox_404" 
                                                            name="checkbox" type="checkbox" value="2_20_0"/>
                                                </span>
                                            </li>

                                    </ul>
                                </li>
                        </ul>
                    </li>
            </ul>
        </li>
    </ul>
</div>
<div style="clear: both; height: 20px;"></div>
<div style="padding-left: 35px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="mysub()">提 交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="over()">取消</a>
</div>

其实上述HTML是我动态生成的,大家初学的话,还是先观察HTML的结构,然后在逐步加入程序,实现动态化

好,截止到这儿,咱们就创建了一个树形结构,如下:

看到上图了吧,上图就是生成的树形结构,那么:文件夹后面的文字代表的是栏目名称<诸如:系统管理,系统统计,管理员列表等>,下面代表四个角色,分别为:超级管理员,健康医师,健康师,会员四个角色!

到这儿,我设计的权限管理思路想必大家基本清晰了,下面我稍作简述:

将栏目权限分配给不同角色,不同角色人员登录后台后,会看到不同的栏目!

是不是很简单,嘻嘻~!

OK,下面我们探讨下数据库的设计及理念

数据库中应该有一张角色表和栏目表

 角色表很简单,如下:

大致说下字段含义:ID,角色名称,角色取值,添加时间,备注一,备注二,排序

栏目表如下:

大致说下字段含义:ID,栏目名称,栏目路径,父亲Id,权限值,添加时间,备注1,备注2,备注3,是否启用,排序

OK,到此,数据库部分也就KO了,是不是很简单?嘻嘻~

下面我们用MVC新建个控制器,配合数据库并动态加载上述HTML,如下:

#region 权限管理
        /// <summary>
        /// 权限管理视图
        /// </summary>
        /// <returns></returns>
        public ActionResult sys_RightManger()
        {
            sys_RightModel models = new sys_RightModel(0);
            return View(models);
        }

       /// <summary>
       /// 编辑权限
       /// </summary>
       /// <param name="Art"></param>
       /// <returns></returns>
        public string EditRight(string[] Art)
        {
            sys_RightModel models = new sys_RightModel();
            return models.EditRight(Art);
        }
        #endregion

由上述代码可知,需要一个名字为:sys_RightModel 的模型,如下:

public class sys_RightModel
    {
        public List<Maticsoft.Model.YX_Role> RoleList = new List<Maticsoft.Model.YX_Role>();
        public List<Maticsoft.Model.YX_Menus> F_MenusList = new List<Maticsoft.Model.YX_Menus>();
        private Maticsoft.BLL.YX_Menus menusbll = new Maticsoft.BLL.YX_Menus();
        private Maticsoft.BLL.YX_Role rolebll = new Maticsoft.BLL.YX_Role();
        public sys_RightModel()
        {
        }

        public sys_RightModel(int i)
        {
            if (i == 0)
            {
                //加载角色列表
                RoleList = rolebll.GetModelList(0, "", " Flat1 desc");
                //加载一级栏目
                F_MenusList = menusbll.GetModelList(0, " FID=0 and Flat1=0", " flat2 desc");
            }
        }

        /// <summary>
        /// 根据一级栏目ID,加载一级栏目对应的子栏目
        /// </summary>
        /// <param name="Fid">父亲ID</param>
        /// <returns></returns>
        public List<Maticsoft.Model.YX_Menus> GetChildMenus(int Fid)
        {
           return menusbll.GetModelList(0, " FID=" + Fid + " and Flat1=0", " flat2 desc");
        }

        /// <summary>
        /// 编辑权限~~此为本篇的重头大戏,不过大家也可以根据自己的设想进行代码的编辑
        /// </summary>
        /// <param name="Ary">从前端传递过来的数组</param>
        /// <returns>在此声明,本方法是我个人所写,可能不尽完善,大家也可尝试用自己的方法来写</returns>
        public string EditRight(string[] Ary)
        {
            if (Ary != null)
            {
                List<string> Fmenu = new List<string>();
                List<string> Cmenu = new List<string>();
                for (int i = 0; i < Ary.Length; i++)
                {
                    string menusInfo = Ary[i].ToString();
                    string[] childAry = menusInfo.Split('_');
                    if (childAry.Length == 3)
                    {
                        string Fid = childAry[0];
                        string Cid = childAry[1];
                        string Role = childAry[2];
                        Fmenu.Add(Fid+"_"+Role);
                        Cmenu.Add(Cid+"_"+Role);
                    }
                }
                //
                HashSet<string> Fhs = new HashSet<string>(Fmenu);//除去重复项
                HashSet<string> Chs = new HashSet<string>(Cmenu);//除去重复项
                List<string> newFmenu = Fhs.ToList();
                List<string> newCmenu = Chs.ToList();//转化为List<T>类型
                if (menusbll.setRight(newFmenu, newCmenu))
                {
                    return "200";
                }
                else
                {
                    return "编辑权限失败";
                }
            }
            else
            {
                return "编辑权限失败";
            }
            
        }
    }

上述方法中诸如GetModelList()方法,大家可根据动软代码器生成,也可以自己编写,在此不作累述!

不过,除了动态生成的方法外,在此说明自己写的两个方法:

第一个是JS方法,在此,把整个动态HTML代码贴出来,如下:

@using WebApi.Models.Manger;
@model sys_RightModel
@{
    ViewBag.Title = "sys_RightManger";
    Layout = "~/Views/Shared/_Easy.cshtml";
}


<div title="健康医疗">
    <div style="clear: both; height: 5px;"></div>
    <ul class="easyui-tree" id="myTree" style="padding-left: 5px;">
        <li>
            <span>在此设置权限</span>
            <ul>

                @foreach (var item in Model.F_MenusList)
                {
                    if (Model.F_MenusList.IndexOf(item) == 0)
                    {
                    <li data-options="state:'open'">
                        <span>@item.menuName</span>
                        <ul>
                            @foreach (var childMenuItem in Model.GetChildMenus(item.ID))
                            {
                                <li data-options="state:'open'">
                                    <span>@childMenuItem.menuName</span>
                                    <ul>
                                        @foreach (var roleItem in Model.RoleList)
                                        {
                                            <li>
                                                <span>
                                                    <label for="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)">@roleItem.RightName</label>:
                                                    @if (childMenuItem.rightID.Contains(roleItem.RightVle.ToString()))
                                                    {
                                                        <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)" checked="checked" />
                                                    }
                                                    else
                                                    {
                                                        <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)"/>
                                                    }
                                                </span>
                                            </li>
                                        }

                                    </ul>
                                </li>
                            }
                        </ul>
                    </li>
                    }
                    else
                    {
                    <li data-options="state:'closed'">
                        <span>@item.menuName</span>
                        <ul>
                            @foreach (var childMenuItem in Model.GetChildMenus(item.ID))
                            {
                                <li data-options="state:'closed'">
                                    <span>@childMenuItem.menuName</span>
                                    <ul>
                                        @foreach (var roleItem in Model.RoleList)
                                        {
                                            <li>
                                                <span>
                                                    <label for="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)">@roleItem.RightName</label>:
                                                     @if (childMenuItem.rightID.Contains(roleItem.RightVle.ToString()))
                                                     {
                                                         <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)" checked="checked" />
                                                     }
                                                     else
                                                     {
                                                         <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" 
                                                            name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)"/>
                                                     }
                                                </span>
                                            </li>
                                        }

                                    </ul>
                                </li>
                            }
                        </ul>
                    </li>
                    }

                }
            </ul>
        </li>
    </ul>
</div>
<div style="clear: both; height: 20px;"></div>
<div style="padding-left: 35px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="mysub()">提 交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="over()">取消</a>
</div>
@section scripts{
    <script type="text/javascript">
        function mysub() {
            var cek = document.getElementsByName("checkbox");
            var aryList = new Array();
            for (var i = 0; i < cek.length; i++) {
                if (cek[i].checked) {
                    aryList.push(cek[i].value);
                }
            }
            $(document).ready(function (data) {
                $.ajax({
                    url: "/Manger/EditRight",
                    type: "post",
                    contentType: "application/json",
                    dataType: "text",
                    data: JSON.stringify({ Art: aryList }),
                    success: function (result, status) {
                        if (result == "200") {
                            alert("编辑成功");
                            window.location.href = "/Manger/sys_RightManger";
                        }
                        else {
                            alert(result);
                        }
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
            });
        }
    </script>
}

JS方法大家自己看,很简单,就是像后端传递一个数组,后端接收,然后处理!

最后,自己写的数据库方法如下:

       /// <summary>
        /// 编辑权限
        /// </summary>
        /// <param name="Fhs">过滤后的List 针对一级栏目</param>
        /// <param name="Chs">过滤后的List 针对二级栏目</param>
        /// <returns></returns>
        public bool setRight(List<string> Fhs, List<string> Chs)
        {
            StringBuilder sb = new StringBuilder("");
            sb.Append("update YX_Menus set rightID='';");
            for (int i = 0; i < Fhs.Count; i++)
            {
                string[] Ary = Fhs[i].Split('_');
                if (Ary.Length == 2)
                {
                    sb.Append("update YX_Menus set rightID=rightID+'"+Ary[1]+",' where ID=" + Ary[0] + ";");
                }
            }
            for (int i = 0; i < Chs.Count; i++)
            {
                string[] Ary = Chs[i].Split('_');
                if (Ary.Length == 2)
                {
                    sb.Append("update YX_Menus set rightID=rightID+'" + Ary[1] + ",' where ID=" + Ary[0] + ";");
                }
            }
            int K = imp.GetSqlCount(CommandType.Text, sb.ToString());
            if (K != 0)
                return true;
            else
                return false;
        }

数据库方法的大致思路是这样的,再点击提交按钮后,首先将数据表中所有栏目对应的权限设为空,然后通过传递的List,进行一个个编辑/Update操作!

至此,整个权限编辑就可以使用了!如下图:

OK,就这么多,废了我一上午啊!

如果您觉得赞,就给个赞吧!

参考博客:http://www.cnblogs.com/Mryjp/p/easyui_tree.html

@陈卧龙的博客

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: