asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发（八）权限管理模块之权限管理实现
深山老妖浏览：22932019-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是选中行后需要执行的方法，该方法主要实现根据当前选中行生成右侧菜单树，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$('#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获取数据源方法，树形查询稍微有点复杂，这里主要使用的是递归查询实现的，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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、前台获取选择节点代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//保存权限
        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、后台代码保存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/// <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);

增加页面代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@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、后台代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/// <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、前台代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
@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、后台代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/// <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、前端代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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、后台代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/// <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开发实战教程之网站后台管理系统开发（七）权限管理模块之系统菜单动态生成
猜您可能还喜欢
评论列表
发表评论
深山老妖
+ 关注
文章分类
文章归档
阅读排行