asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发（八）权限管理模块之权限管理实现

深山老妖浏览：21582019-03-08 10:02:28本文累计收益：￥0元我也要赚钱

本文主要讲解如何实现系统中角色（权限）管理模块，可以实现添加角色并给角色配置操作菜单权限及修改角色，先来看看最终效果

整个页面由两部分构成，左侧部分是jquery easyui datagrid表格实现的系统内的角色管理列表，右侧是使用jquery easyui tree树形控件实现的一个菜单树。

左侧部分的实现这里不再讲解，具体实现方法可以参考《.Net Mvc中使用Jquery EasyUI控件讲解（一）表格控件datagrid使用介绍》，本文主要讲解右侧部分的实现及左右两边数据的联动。

本文源码及数据库下载地址：asp.net mvc+jquery easyui权限管理模块源码

一、实现思路

刚进入本模块时只显示左侧角色列表，当点击选中其中一个角色时，刷新生成右侧权限菜单树，选择需要的菜单权限后点击右侧顶部的保存权限，提交数据库保存配置。

二、前端代码讲解

首先给左侧权限列表增加行选中事件，给datagrid控件增加onClickRow: refreshPower属性即可，refreshPower是选中行后需要执行的方法，该方法主要实现根据当前选中行生成右侧菜单树，代码如下：

$('#gridList').datagrid({
                title: false,
                url: '/System/SysRoleList',
                nowrap: false,
                iconCls: 'icon-list-bullets',
                dataType: "json",
                fitColumns: true,
                rownumbers: true,
                pagination: true,
                pageSize: 15,
                pageNumber: 1,
                pageList: [20, 40, 100],
                columns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'ID', title: 'ID', width: 120, align: 'center', hidden: true, sortable: true },
                    { field: 'NAME', title: '角色名称', width: 120, align: 'center', sortable: true },
                    { field: 'ROLEDESC', title: '角色描述', width: 120, align: 'center', sortable: true }
                ]],
                striped: true,
                sortOrder: "asc",
                sortName: "Id",
                singleSelect: true,
                selectOnCheck: true,
                checkOnSelect: true,
                onClickRow: refreshPower,
                loadMsg: "正在加载数据..."
            });

            //选择表格一行执行方法
            function refreshPower() {
                var row = $('#gridList').datagrid('getSelected');
                if (row) {
                    //获取当前已配置的权限列表
                    var powerList = row.POWERLIST == null ? "" : row.POWERLIST.split(",");
                    $('#tree').tree({
                        checkbox: true,
                        lines: true,
                        url: '/System/GetTreeJson',
                        onLoadSuccess: function (node, data) {
                            //循环所有菜单列表，如果当前已经包含，则置为选择状态
                            for (var i = 0; i < powerList.length; i++) {
                                node = $('#tree').tree('find', powerList[i].substring(1, powerList[i].length - 1));
                                if (node != null) {
                                    var leaf = $('#tree').tree('isLeaf', node.target);
                                    if (leaf) $("#tree").tree('check', node.target);
                                } 
                            }
                        }
                    });
                }
                else { $.messager.alert('警告', '没有选择任何记录信息！', 'warning'); }
            }

三、后台菜单树数据源代码

上面refreshPower方法内菜单树调用了后台GetTreeJson获取数据源方法，树形查询稍微有点复杂，这里主要使用的是递归查询实现的，代码如下

        StringBuilder result = new StringBuilder();
        StringBuilder sb = new StringBuilder();        
        public ActionResult GetTreeJson()
        {
            var list = db.SYS_MENU.ToList();
            GetTreeJson(list, "id", "name", "ROOT");
            return Content(result.ToString());
        }
        /// <summary>
        /// 根据List生成Json树结构
        /// </summary>
        /// <param name="list">数据源</param>
        /// <param name="id">ID列</param>
        /// <param name="text">Text列</param>
        /// <param name="pId">父ID</param>
        private void GetTreeJson(List<SYS_MENU> list, string id, string text, string pId)
        {
            result.Append(sb.ToString());
            sb.Clear();
            if (list.Count > 0)
            {
                sb.Append("[");
                var rootList = db.SYS_MENU.Where(c => c.PARENTID == pId).ToList();
                if (rootList.Count > 0)
                {
                    foreach (SYS_MENU row in rootList)
                    {
                        sb.Append("{\"id\":\"" + row.ID + "\",\"text\":\"" + row.NAME + "\",\"state\":\"open\"");
                        var kidList = db.SYS_MENU.Where(c => c.PARENTID == row.ID).ToList();
                        if (kidList.Count > 0)
                        {
                            sb.Append(",\"children\":");
                            GetTreeJson(kidList, id, text, row.ID);
                            result.Append(sb.ToString());
                            sb.Clear();
                        }
                        result.Append(sb.ToString());
                        sb.Clear();
                        sb.Append("},");
                    }
                    sb = sb.Remove(sb.Length - 1, 1);
                }
                sb.Append("]");
                result.Append(sb.ToString());
                sb.Clear();
            }
        }

具体代码逻辑这里不再进行讲解，运行程序效果如下：

点击保存权限实现方法，前端获取当前选中的树形节点，然后提交到后台进行保存即可。

1、前台获取选择节点代码

//保存权限
        function saveBtn() {
            var row = $('#gridList').datagrid('getSelected');
            var nodesChecked = $('#tree').tree('getChecked');
            var nodesIndeter = $('#tree').tree('getChecked', 'indeterminate');
            var ids = "";
            for (var i = 0; i < nodesIndeter.length; i++) {
                ids = ids + "'" + nodesIndeter[i].id + "',";
            }
            for (var i = 0; i < nodesChecked.length; i++) {
                if (i == nodesChecked.length - 1)
                    ids = ids + "'" + nodesChecked[i].id + "'";
                else ids = ids + "'" + nodesChecked[i].id + "',";
            }
            //进行异步传输
            $.ajax({
                url: "/System/SavaPower",
                type: 'Post',
                cache: false,
                dataType: 'html',
                data: { id: row.ID, powerList: ids }, //发送服务器数据
                success: function (data) {  //成功事件
                    if (data == "success")
                        $("#gridList").datagrid('reload');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
                    alert(textStatus); return;
                }
            });
        }

2、后台代码保存

        /// <summary>
        /// 保存权限
        /// </summary>
        /// <param name="ID"></param>
        /// <returns></returns>
        public ActionResult SavaPower(string id, string powerList)
        {
            try
            {
                var model = db.SYS_ROLE.Find(id);
                model.POWERLIST = powerList;
                db.SaveChanges();
                return Content("success");
            }
            catch (Exception e) { return Content(e.Message); }
        }

至此权限管理模块首页已经完成，这里权限控制只控制到菜单级别，文章开始的图中是控制到具体页面中的按钮级别，实现方法是将每个页面的需要用到的按钮也放到菜单库中，然后进入页面的Action中查询当前页面的权限按钮进行展示（如：ViewBag.Button = ClassesLib.getMenuButton("0501");），这里不再介绍。

四、添加角色模块

点击页面中的创建按钮弹出创建对话框，输入相关信息，点击保存，角色添加成功，效果如下：

1、前台代码

以上实现的点击创建按钮弹出对话框主要使用了ShowMyWindow.js插件实现的，调用代码如下：

showMyWindow("创建角色", '/System/AddSysRole', 500, 350);

增加页面代码如下：

@model NewSystem.Models.SYS_ROLE
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>AddSysRole</title>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <link href="../../Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../Content/themes/icon.css" rel="stylesheet" />
    <link href="../../Content/Css/Modify.css" rel="stylesheet" />
    <style>
        .modify-content {
            padding: 10px;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <div class="modify-content">
            @Html.HiddenFor(model => model.POWERLIST)
            <div class="editor-box">
                <div class="editor-label">
                    @Html.LabelFor(model => model.NAME)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.NAME)<span class="required">*</span>
                    @Html.ValidationMessageFor(model => model.NAME)
                </div>
            </div>
            @*<div class="editor-box">
                <div class="editor-label">
                    @Html.LabelFor(model => model.ROLETYPE)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.ROLETYPE, BankActivity.Models.GetDropDownListItem.GetSelectList("ROLETYPE"))<span class="required">*</span>
                    @Html.ValidationMessageFor(model => model.ROLETYPE)
                </div>
            </div>*@
            <div class="editor-box">
                <div class="editor-label">
                    @Html.LabelFor(model => model.ROLEDESC)
                </div>
                <div class="editor-field">
                    @Html.TextAreaFor(model => model.ROLEDESC, new { @rows = 4, @cols = 40 })
                    @Html.ValidationMessageFor(model => model.ROLEDESC)
                </div>
            </div>
            <div class="editor-box">
                <div class="editor-save">
                    <a href='#' onclick='$("form").submit()' class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存数据</a>
                </div>
            </div>
        </div>
    }
</body>
</html>

2、后台代码

        /// <summary>
        /// 添加
        /// </summary>
        /// <returns></returns>
        public ActionResult AddSysRole()
        {
            if (ClassesLib.SessionIsNull())
            {
                Response.Redirect("/Login/AdminLogin");
            }
            return View();
        }
        [HttpPost]
        public ActionResult AddSysRole(SYS_ROLE sysRole)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    sysRole.ID = ClassesLib.GetIdByTime();
                    sysRole.CREATEUSER = ClassesLib.getLoginRealName();
                    sysRole.CREATETIME = System.DateTime.Now;
                    sysRole.CREATEIP = Request.UserHostAddress;
                    sysRole.MODIFYTIME = System.DateTime.Now;
                    sysRole.MODIFYIP = Request.UserHostAddress;
                    sysRole.MODIFYUSER = ClassesLib.getLoginRealName();
                    db.SYS_ROLE.Add(sysRole);
                    db.SaveChanges();
                    return Content("<script>window.parent.windowClose();</script>");
                }
                return View(sysRole);
            }
            catch
            {
                return View();
            }
        }

主要有两个方法，第一个方法是点击创建按钮访问的方法主要用于页面跳转，第二个方法是点击保存按钮执行的方法，.net mvc的访问保存机制就是这样，一般增加修改方法都会有这个两个。

五、修改角色功能实现

1、前台代码

@model NewSystem.Models.SYS_ROLE
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>AddSysRole</title>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <link href="../../Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../Content/themes/icon.css" rel="stylesheet" />
    <link href="../../Content/Css/Modify.css" rel="stylesheet" />
    <style>
        .modify-content {
            padding: 10px;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <div class="modify-content">
            @Html.HiddenFor(model => model.POWERLIST)
            <div class="editor-box">
                <div class="editor-label">
                    @Html.LabelFor(model => model.NAME)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.NAME)<span class="required">*</span>
                    @Html.ValidationMessageFor(model => model.NAME)
                </div>
            </div>
            @*<div class="editor-box">
                <div class="editor-label">
                    @Html.LabelFor(model => model.ROLETYPE)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.ROLETYPE, BankActivity.Models.GetDropDownListItem.GetSelectList("ROLETYPE"))<span class="required">*</span>
                    @Html.ValidationMessageFor(model => model.ROLETYPE)
                </div>
            </div>*@
            <div class="editor-box">
                <div class="editor-label">
                    @Html.LabelFor(model => model.ROLEDESC)
                </div>
                <div class="editor-field">
                    @Html.TextAreaFor(model => model.ROLEDESC, new { @rows = 4, @cols = 40 })
                    @Html.ValidationMessageFor(model => model.ROLEDESC)
                </div>
            </div>
            <div class="editor-box">
                <div class="editor-save">
                    <a href='#' onclick='$("form").submit()' class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存数据</a>
                </div>
            </div>
        </div>
    }
</body>
</html>

2、后台代码

/// <summary>
        /// 修改
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult EditSysRole(string id)
        {
            if (ClassesLib.SessionIsNull())
            {
                Response.Redirect("/Login/AdminLogin");
            }
            SYS_ROLE sysRole = db.SYS_ROLE.Find(id);
            return View(sysRole);
        }
        [HttpPost]
        public ActionResult EditSysRole(SYS_ROLE sysRole)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    var tmpModel = db.SYS_ROLE.Find(sysRole.ID);
                    sysRole.MODIFYTIME = System.DateTime.Now;
                    sysRole.MODIFYIP = Request.UserHostAddress;
                    sysRole.MODIFYUSER = ClassesLib.getLoginRealName();
                    UpdateModel(tmpModel);
                    db.SaveChanges();
                    return Content("<script>window.parent.windowClose();</script>");
                }
                return View(sysRole);
            }
            catch (Exception e)
            {
                ModelState.AddModelError("", e.ToString());
            }
            return View(sysRole);
        }

六、删除角色实现

删除角色主要使用的ajax其他提交后台删除

1、前端代码

               if (row) {
                    $.ajax({
                        url: "/System/DelSysRole",
                        type: 'get',
                        cache: false,
                        dataType: 'html',
                        data: { dataId: row.ID },
                        success: function (data) {
                            if (data == "Success") {
                                $("#gridList").datagrid('reload');
                                $.messager.alert('提示信息', '删除成功！', 'info');
                            }
                            else $.messager.alert('提示信息', '删除失败！', 'info');
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus); return;
                        }
                    });
                }
                else $.messager.alert('提示信息', '请先选择数据！', 'info');

2、后台代码

        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="message"></param>
        /// <returns></returns>
        public ActionResult DelSysRole(string dataId)
        {
            try
            {
                var tmpModel = db.SYS_ROLE.Find(dataId);
                db.SYS_ROLE.Remove(tmpModel);
                db.SaveChanges();
                return Content("Success");
            }
            catch (Exception e) { return Content(e.Message); }
        }

上一篇：.Net Mvc中使用Jquery EasyUI控件讲解（一）表格控件datagrid使用介绍

下一篇：asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发（七）权限管理模块之系统菜单动态生成

猜您可能还喜欢

评论列表

发表评论

深山老妖

+ 关注

101
文章
18
资源
0
排名
51元
收益

文章分类

asp.net mvc (26)
.net core webapi (18)
微信小程序 (10)
Java Web (9)
移动开发 (7)
Linux (6)
大杂烩 (6)
Python (4)
jquery (3)
工作笔记 (2)
SVN (2)
微信开发 (2)
运营 (2)
操作系统 (1)
人生 (1)
数据库 (1)
MySql (1)

文章归档

2025年3月 (2)
2025年2月 (1)
2024年11月 (9)
2024年3月 (1)
2023年12月 (11)
2023年11月 (7)
2020年1月 (1)
2019年12月 (1)
2019年11月 (3)
2019年9月 (4)
2019年4月 (7)
2019年3月 (31)
2019年2月 (9)
2019年1月 (1)
2018年12月 (3)
2018年7月 (6)
2018年6月 (4)

阅读排行