产品解决方案文档与社区免费试用定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
开发者社区 开发与运维 文章 正文

使用Jquery+EasyUI 进行框架项目开发案例讲解之五--模块（菜单）管理源码分享

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

　我们分享了使用Jquery EasyUI来进行ASP.NET项目的开发的相关方法，每一个模块都有其共用性，细细理解与掌握，我相信使用EasyUI进行开发还是相当方便的，每篇文章，我们力求通俗易懂。

　　接下来我分享“模块（菜单）”模块主要的核心代码，“模块（菜单）”管理模块同样使用了EasyUI的TreeGrid控件，对于EasyUI的TreeGrid控件的具体使用方法可以参见上一篇 《使用Jquery+EasyUI 进行框架项目开发案例讲解之三---组织机构源码分享》的说明，或看相关的Easy UI的帮助文件，同时，我们可以看一下如何做模块图标的选择界面，模块（菜单）主界面如下图所示：　　

02144921-bd181b550fd541a982b75bf5967a379

   一、“模块（菜单）”管理主界面UI的ASPX代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ Page Language="C#" MasterPageFile="~/Site.Master"  AutoEventWireup="true" CodeBehind="ModuleAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.ModuleAdmin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">   
     <div id="toolbar">
        <%=base.BuildToolBarButtons()%>
    </div>
    <table id="navGrid"></table>
                                                                                                                                 
    <script type="text/javascript" src="../Scripts/Linqjs/linq.min.js"></script>
    <script type="text/javascript" src="../Scripts/Linqjs/linq.jquery.js"></script>
    <script type="text/javascript" src="../Scripts/Business/ModuleAdmin.js?v=5"></script>
</asp:Content>

   二：绑定当前登录用户所拥有的功能按钮列表代码如下：　

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
private bool permissionUserModulePermission = false;
        private bool permissionRoleModulePermission = false;
        private bool permissionOrganizeModulePermission = false;
        private bool permissionModuleConfig = false;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.GetPermission();
            }
        }
        /// <summary>
        /// 获得页面的权限
        /// </summary>
        private void GetPermission()
        {
            this.permissionAdd = this.IsAuthorized("ModuleManagement.Add");
            this.permissionEdit = this.IsAuthorized("ModuleManagement.Edit");
            this.permissionDelete = this.IsAuthorized("ModuleManagement.Delete");
            this.permissionExport = this.IsAuthorized("ModuleManagement.Export");
            //this.permissionAccredit = this.IsAuthorized("UserManagement.Accredit");
            this.permissionUserModulePermission = this.IsAuthorized("ModuleManagement.UserModulePermission");
            this.permissionRoleModulePermission = this.IsAuthorized("ModuleManagement.RoleModulePermission");
            this.permissionOrganizeModulePermission = this.IsAuthorized("ModuleManagement.OrganizeModulePermission") && SystemInfo.EnableOrganizePermission;
            this.permissionModuleConfig = this.IsAuthorized("ModuleManagement.ModuleConfig");
        }
        /// <summary>
        /// 加载工具栏
        /// </summary>
        /// <returns>工具栏HTML</returns>
        public override string BuildToolBarButtons()
        {
            StringBuilder sb = new StringBuilder();
            string linkbtn_template = "<a id=\"a_{0}\" class=\"easyui-linkbutton\" style=\"float:left\"  plain=\"true\" href=\"javascript:;\" icon=\"{1}\"  {2} title=\"{3}\">{4}</a>";
            sb.Append("<a id=\"a_refresh\" class=\"easyui-linkbutton\" style=\"float:left\"  plain=\"true\" href=\"javascript:;\" icon=\"icon-reload\"  title=\"重新加载\">刷新</a> ");
            sb.Append("<div class='datagrid-btn-separator'></div> ");
            sb.Append(string.Format(linkbtn_template, "add", "icon-tab_add", permissionAdd ? "" : "disabled=\"True\"", "新增模块（菜单）", "新增"));
            sb.Append(string.Format(linkbtn_template, "edit", "icon-tab_edit", permissionEdit ? "" : "disabled=\"True\"", "修改选中的模块（菜单）", "修改"));
            sb.Append(string.Format(linkbtn_template, "delete", "icon-tab_delete", permissionDelete ? "" : "disabled=\"True\"", "删除选中的模块（菜单）", "删除"));
            sb.Append("<div class='datagrid-btn-separator'></div> ");
            //sb.Append(string.Format(linkbtn_template, "move", "icon-shape_move_forwards", permissionMove ? "" : "disabled=\"True\"", "移动选中的模块（菜单）", "移动"));
            sb.Append(string.Format(linkbtn_template, "export", "icon-tab_go", permissionExport ? "" : "disabled=\"True\"", "导出模块（菜单）数据", "导出"));
            sb.Append("<div class='datagrid-btn-separator'></div> ");
            sb.Append(string.Format(linkbtn_template, "setusermodulepermission", "icon-user_key", permissionUserModulePermission ? "" : "disabled=\"True\"", "设置用户的模块（菜单）访问权限", "用户模块权限"));
            sb.Append(string.Format(linkbtn_template, "setrolemodulepermission", "icon-group_key", permissionRoleModulePermission ? "" : "disabled=\"True\"", "设置角色的模块（菜单）访问权限", "角色模块权限"));
            sb.Append("<div class='datagrid-btn-separator'></div> ");
            sb.Append(string.Format(linkbtn_template, "moduleconfig", "icon-table_gear", permissionRoleModulePermission ? "" : "disabled=\"True\"", "设置模块的可用性", "模块配置"));
            return sb.ToString();
        }

   三、绑定模块主wldmTreeGrid 的JS代码如下：　

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
var grid = {
    databind: function (winsize) {
        navgrid = $('#navGrid').treegrid({
            toolbar: '#toolbar',
            title: '模块（菜单）列表',
            iconCls: 'icon icon-chart_organisation',
            width: winsize.width,
            height: winsize.height,
            nowrap: false,
            rownumbers: true,
            //animate: true,
            resizable: true,
            collapsible: false,
            url: actionUrl,
            idField: 'Id',
            treeField: 'FullName',
            frozenColumns: [[
                { title: '模块（菜单）名称', field: 'FullName', width: 200 },
                { title: '编码', field: 'Code', width: 130 }
            ]],
            columns: [[
                { title: 'Id', field: 'Id', hidden: true },
                { title: 'ParentId', field: 'ParentId', hidden: true },
                { title: '模块分类', field: 'Category', width: 100 },
                { title: '图标', field: 'IconCss', width: 130, hidden: true },
                { title: 'Web链接地址', field: 'NavigateUrl', width: 200 },
                { title: 'WinForm程序集', field: 'AssemblyName', width: 150 },
                { title: 'WinForm窗体', field: 'FormName', width: 200 },
                {
                    title: '公共', field: 'IsPublic', width: 50, align: 'center', formatter: function (v, d, i) {
                        return '<img src="http://images.cnblogs.com/' + (v ? "checkmark.gif" : "checknomark.gif") + '" />';
                    }
                },
                { title: '有效', field: 'Enabled', width: 50, align: 'center', formatter: imgcheckbox },             
                { title: 'AllowEdit', field: 'AllowEdit', hidden: true },
                { title: 'AllowDelete', field: 'AllowDelete', hidden: true },
                { title: '排序', field: 'SortCode', width: 80 },
                { title: '备注', field: 'Description', width: 500 }
            ]]
        });
    },
    reload: function () {
        navgrid.treegrid('reload');
    },
    selected: function () {
        return navgrid.treegrid('getSelected');
    }
};
var imgcheckbox = function (cellvalue, options, rowObject) {
    return cellvalue ? '<img src="/css/icon/ok.png" alt="正常" title="正常" />' : '<img src="/css/icon/stop.png" alt="禁用" title="禁用" />';
}

   四、添加与模块（菜单）主界面　

10164926-d8f781c53f5a4f5c883c1e8b9d0509a

　　代码如下：　　

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
add: function () {
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        var addDialog = top.$.hDialog({
            href: formUrl, title: '添加模块（菜单）', iconCls: 'icon-tab_add', width: 490, height: 550,
            onLoad: function () {
                crud.bindCtrl();
                crud.bindCategory();
                var row = grid.selected();
                if (row) {
                    top.$('#txt_ParentId').combotree('setValue', row.ParentId);
                }
            },
            submit: function () {
                if (top.$('#uiform').validate().form()) {
                    //var param = createParam('add', '0');
                    var vcategory = top.$('#txt_Category').combobox('getValue');
                    var vparentid = top.$('#txt_ParentId').combobox('getValue');
                    var param = 'action=Add&vcategory=' + vcategory + '&vparentid=' + vparentid + '&' + top.$('#uiform').serialize();
                    $.ajaxjson(actionUrl, param, function (d) {
                        if (d.Success) {
                            msg.ok(d.Message);
                            addDialog.dialog('close');
                            grid.reload();
                        } else {
                            MessageOrRedirect(d);
                        }
                    });
                }
            }
        });
    },
    edit: function () {
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        var row = grid.selected();
        if (row) {
            var editDailog = top.$.hDialog({
                href: formUrl, title: '修改模块（菜单）', iconCls: 'icon-tab_edit', width: 490, height: 550,
                onLoad: function () {
                    crud.bindCtrl(row.Id);
                    crud.bindCategory();
                    top.$('#txt_Code').val(row.Code);
                    top.$('#txt_FullName').val(row.FullName);
                    top.$('#txt_Category').combobox('setValue', row.Category);
                    top.$('#txt_ParentId').combotree('setValue', row.ParentId);
                    top.$('#txt_NavigateUrl').val(row.NavigateUrl);
                    top.$('#txt_IconCss').val(row.IconCss);
                    //top.$('#smallIcon').attr('class', "icon " + row.IconCss);
                    top.$('#smallIcon').attr('class', row.IconCss);
                    top.$('#txt_AssemblyName').val(row.AssemblyName);
                    top.$('#txt_FormName').val(row.FormName);
                    top.$('#chk_Enabled').attr('checked', row.Enabled == "1");
                    top.$('#chk_IsPublic').attr('checked', row.IsPublic == "1");
                    top.$('#chk_Expand').attr('checked', row.Expand == "1");
                    top.$('#chk_AllowEdit').attr('checked', row.AllowEdit == "1");
                    top.$('#chk_AllowDelete').attr('checked', row.AllowDelete == "1");
                    top.$('#txt_Description').val(row.Description);
                    top.$('#txt_IconUrl').val(row.IconUrl);
                },
                submit: function () {
                    if (top.$('#uiform').validate().form()) {
                        //保存时判断当前节点所选的父节点，不能为当前节点的子节点，这样就乱套了....
                        var treeParentId = top.$('#txt_ParentId').combotree('tree'); // 得到树对象
                        var node = treeParentId.tree('getSelected');
                        if (node) {
                            var nodeParentId = treeParentId.tree('find', row.Id);
                            var children = treeParentId.tree('getChildren', nodeParentId.target);
                            var nodeIds = '';
                            var isFind = 'false';
                            for (var index = 0; index < children.length; index++) {
                                if (children[index].id == node.id) {
                                    isFind = 'true';
                                    break;
                                }
                            }
                            if (isFind == 'true') {
                                top.$.messager.alert('温馨提示', '请选择父节点元素！', 'warning');
                                return;
                            }
                        }
                        var vcategory = top.$('#txt_Category').combobox('getValue');
                        var vparentid = top.$('#txt_ParentId').combobox('getValue');
                        var query = 'action=Edit&vcategory=' + vcategory + '&vparentid=' + vparentid + '&KeyId=' + row.Id + '&' + top.$('#uiform').serialize();
                        $.ajaxjson(actionUrl, query, function (d) {
                            if (d.Success) {
                                msg.ok(d.Message);
                                editDailog.dialog('close');
                                grid.reload();
                            } else {
                                MessageOrRedirect(d);
                            }
                        });
                    }
                }
            });
        } else {
            msg.warning('请选择要修改菜单!');
            return false;
        }
        return false;
    }

   在模块（菜单）编辑与新增界面上，我们可以设置模块的图标，设置模块图标如下图所示：

10164938-07f12ec9be9e42fd8a2e5d082260ae6

　　这个是如何实现的呢？

　　首先准备图标的基页面，截取部分格式如下，保存为一个html文件，如:iconlist.htm：　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul id="iconlist" style="margin:0px;padding:0px; list-style-type:none;">
<li title="/css/icon/accept.png"><span class="icon icon-accept"> </span></li>
<li title="/css/icon/add.png"><span class="icon icon-add"> </span></li>
<li title="/css/icon/advancedsettings.png"><span class="icon icon-advancedsettings"> </span></li>
<li title="/css/icon/advancedsettings2.png"><span class="icon icon-advancedsettings2"> </span></li>
<li title="/css/icon/anchor.png"><span class="icon icon-anchor"> </span></li>
<li title="/css/icon/application.png"><span class="icon icon-application"> </span></li>
<li title="/css/icon/application_delete.png"><span class="icon icon-application_delete"> </span></li>
<li title="/css/icon/application_double.png"><span class="icon icon-application_double"> </span></li>
<li title="/css/icon/application_edit.png"><span class="icon icon-application_edit"> </span></li>
<li title="/css/icon/application_error.png"><span class="icon icon-application_error"> </span></li>
<li title="/css/icon/application_form.png"><span class="icon icon-application_form"> </span></li>
<li title="/css/icon/application_form_add.png"><span class="icon icon-application_form_add"> </span></li>
<li title="/css/icon/application_form_delete.png"><span class="icon icon-application_form_delete"> </span></li>
<li title="/css/icon/application_form_edit.png"><span class="icon icon-application_form_edit"> </span></li>
<li title="/css/icon/application_form_magnify.png"><span class="icon icon-application_form_magnify"> </span></li>
<li title="/css/icon/application_get.png"><span class="icon icon-application_get"> </span></li>
<li title="/css/icon/application_go.png"><span class="icon icon-application_go"> </span></li>
<li title="/css/icon/application_home.png"><span class="icon icon-application_home"> </span></li>
<li title="/css/icon/application_key.png"><span class="icon icon-application_key"> </span></li>
<li title="/css/icon/application_lightning.png"><span class="icon icon-application_lightning"> </span></li>
<ul>

   然后在我们的js中调用这个html做相应的处理即可了，js部分代码为：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var showIcon = function () {
    top.$('#selecticon').click(function () {
        var iconDialog = top.$.hDialog({
            iconCls: 'icon-application_view_icons',
            href: '/css/iconlist.htm?v=' + Math.random(),
            title: '选取图标', width: 800, height: 600, showBtns: false,
            onLoad: function () {
                top.$('#iconlist li').attr('style', 'float:left;border:1px solid #fff;margin:2px;width:16px;cursor:pointer').click(function () {
                    //var iconCls = top.$(this).find('span').attr('class').replace('icon ', '');
                    var iconCls = top.$(this).find('span').attr('class');
                    top.$('#txt_IconCss').val(iconCls);
                    top.$('#txt_IconUrl').val(top.$(this).attr('title'));
                    //top.$('#smallIcon').attr('class', "icon " + iconCls);
                    top.$('#smallIcon').attr('class', iconCls);
                    iconDialog.dialog('close');
                }).hover(function () {
                    top.$(this).css({ 'border': '1px solid red' });
                }, function () {
                    top.$(this).css({ 'border': '1px solid #fff' });
                });
            }
        });
    });
};

五、用户模块（菜单）权限批量设置

　　用户模块（菜单）权限功能项用于设置那些用户可以访问那些模块，那些用户不能访问那些模块。用户模块（菜单）权限设置如下图用户模块（菜单）权限集中设置。左侧列出框架的所有有效用户，右侧为模块（菜单）项，选中相应的模块后保存，即可为当前选中用户授予模块的访问权限。
10165009-dc3867f643e84ef6a5cd124a886ba80

　　js代码如下：　


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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
userModulePermissionBatchSet: function () { //用户模块（菜单）权限批量设置
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        var userGrid;
        var curUserModuleIds = []; //当前所选用户所拥有的模块ID
        var setDialog = top.$.hDialog({
            title: '用户模块（菜单）权限批量设置',
            width: 670, height: 600, iconCls: 'icon-user_key', //cache: false,
            href: "Modules/html/PermissionBacthSetForm.htm?n=" + Math.random(),
            onLoad: function () {
                using('panel', function () {
                    top.$('#panelTarget').panel({ title: '模块（菜单）', iconCls: 'icon-org', height: $(window).height() - 3 });
                });
                userGrid = top.$('#leftnav').datagrid({
                    title: '所有用户',
                    url: 'Modules/handler/UserAdminHandler.ashx',
                    nowrap: false, //折行
                    //fit: true,
                    rownumbers: true, //行号
                    striped: true, //隔行变色
                    idField: 'Id', //主键
                    singleSelect: true, //单选
                    frozenColumns: [[]],
                    columns: [[
                        { title: '登录名', field: 'UserName', width: 120, align: 'left' },
                        { title: '用户名', field: 'RealName', width: 150, align: 'left' }
                    ]],
                    onLoadSuccess: function (data) {
                        top.$('#rightnav').tree({
                            cascadeCheck: false, //联动选中节点
                            checkbox: true,
                            lines: true,
                            url: 'Modules/handler/ModuleAdminHandler.ashx?action=GetModuleTree',
                            onSelect: function (node) {
                                top.$('#rightnav').tree('getChildren', node.target);
                            }
                        });
                        top.$('#leftnav').datagrid('selectRow', 0);
                    },
                    onSelect: function (rowIndex, rowData) {
                        curUserModuleIds = [];
                        var query = 'action=GetModuleByUserId&userid=' + rowData.Id;
                        $.ajaxtext('handler/PermissionHandler.ashx', query, function (data) {
                            var moduelTree = top.$('#rightnav');
                            moduelTree.tree('uncheckedAll');
                            if (data == '' || data.toString() == '[object XMLDocument]') {
                                return;
                            }
                            curUserModuleIds = data.split(',');
                            for (var i = 0; i < curUserModuleIds.length; i++) {
                                var node = moduelTree.tree('find', curUserModuleIds[i]);
                                if (node)
                                    moduelTree.tree("check", node.target);
                            }
                        });
                    }
                });
            },
            submit: function () {
                var allSelectModuledIds = permissionMgr.getUserSelectedModule().split(',');
                var grantModuleIds = '';
                var revokeModuleIds = '';
                var flagRevoke = 0;
                var flagGrant = 0;
                while (flagRevoke < curUserModuleIds.length) {
                    if ($.inArray(curUserModuleIds[flagRevoke], allSelectModuledIds) == -1) {
                        revokeModuleIds += curUserModuleIds[flagRevoke] + ','; //得到收回的权限列表
                    }
                    ++flagRevoke;
                }
                while (flagGrant < allSelectModuledIds.length) {
                    if ($.inArray(allSelectModuledIds[flagGrant], curUserModuleIds) == -1) {
                        grantModuleIds += allSelectModuledIds[flagGrant] + ','; //得到授予的权限列表
                    }
                    ++flagGrant;
                }
                var query = 'action=SetUserModulePermission&userid=' + top.$('#leftnav').datagrid('getSelected').Id + '&grantIds=' + grantModuleIds + "&revokeIds=" + revokeModuleIds;
                $.ajaxjson('handler/PermissionHandler.ashx', query, function (d) {
                    if (d.Data > 0) {
                        msg.ok('设置成功！');
                    }
                    else {
                        alert(d.Message);
                    }
                });
            }
        });
    }

六、角色模块（菜单）权限批量设置

　　角色模块（菜单）操作权限用于设置那些角色拥有那些操作（功能）权限，那些角色不拥有那些操作（功能）权限。如下图所示，左侧列出框架的所有有效角色，右侧为相应的模块（菜单），选中相应的模块（菜单）后保存，即可为当前选中角色授予相应的模块（菜单）可访问的控制。

10165017-c42bdb0cdf0749c4a435ebecf92eb35

　　js部分代码如下：　　


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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
roleModulePermissionBatchSet: function () { //角色模块（菜单）权限批量设置
        if ($(this).linkbutton('options').disabled == true) {
            return;
        }
        var roleGrid;
        var curRoleModuleIds = []; //当前所选角色所拥有的模块ID
        var setDialog = top.$.hDialog({
            title: '角色模块（菜单）权限批量设置',
            width: 670, height: 600, iconCls: 'icon-group_key', //cache: false,
            href: "Modules/html/PermissionBacthSetForm.htm?n=" + Math.random(),
            onLoad: function () {
                using('panel', function () {
                    top.$('#panelTarget').panel({ title: '模块（菜单）', iconCls: 'icon-org', height: $(window).height() - 3 });
                });
                roleGrid = top.$('#leftnav').datagrid({
                    title: '所有角色',
                    url: 'Modules/handler/RoleAdminHandler.ashx?action=getrolelist',
                    nowrap: false, //折行
                    //fit: true,
                    rownumbers: true, //行号
                    striped: true, //隔行变色
                    idField: 'Id', //主键
                    singleSelect: true, //单选
                    frozenColumns: [[]],
                    columns: [[
                        { title: '角色编码', field: 'Code', width: 120, align: 'left' },
                        { title: '角色名称', field: 'RealName', width: 150, align: 'left' }
                    ]],
                    onLoadSuccess: function (data) {
                        top.$('#rightnav').tree({
                            cascadeCheck: false, //联动选中节点
                            checkbox: true,
                            lines: true,
                            url: 'Modules/handler/ModuleAdminHandler.ashx?action=GetModuleTree',
                            onSelect: function (node) {
                                top.$('#rightnav').tree('getChildren', node.target);
                            }
                        });
                        top.$('#leftnav').datagrid('selectRow', 0);
                    },
                    onSelect: function (rowIndex, rowData) {
                        curRoleModuleIds = [];
                        var query = 'action=GetModuleByRoleId&roleid=' + rowData.Id;
                        $.ajaxtext('handler/PermissionHandler.ashx', query, function (data) {
                            var moduelTree = top.$('#rightnav');
                            moduelTree.tree('uncheckedAll');
                            if (data == '' || data.toString() == '[object XMLDocument]') {
                                return;
                            }
                            curRoleModuleIds = data.split(',');
                            for (var i = 0; i < curRoleModuleIds.length; i++) {
                                var node = moduelTree.tree('find', curRoleModuleIds[i]);
                                if (node)
                                    moduelTree.tree("check", node.target);
                            }
                        });
                    }
                });
            },
            submit: function () {
                var allSelectModuledIds = permissionMgr.getUserSelectedModule().split(',');
                var grantModuleIds = '';
                var revokeModuleIds = '';
                var flagRevoke = 0;
                var flagGrant = 0;
                while (flagRevoke < curRoleModuleIds.length) {
                    if ($.inArray(curRoleModuleIds[flagRevoke], allSelectModuledIds) == -1) {
                        revokeModuleIds += curRoleModuleIds[flagRevoke] + ','; //得到收回的权限列表
                    }
                    ++flagRevoke;
                }
                while (flagGrant < allSelectModuledIds.length) {
                    if ($.inArray(allSelectModuledIds[flagGrant], curRoleModuleIds) == -1) {
                        grantModuleIds += allSelectModuledIds[flagGrant] + ','; //得到授予的权限列表
                    }
                    ++flagGrant;
                }
                var query = 'action=SetRoleModulePermission&roleid=' + top.$('#leftnav').datagrid('getSelected').Id + '&grantIds=' + grantModuleIds + "&revokeIds=" + revokeModuleIds;
                $.ajaxjson('handler/PermissionHandler.ashx', query, function (d) {
                    if (d.Data > 0) {
                        msg.ok('设置成功！');
                    }
                    else {
                        alert(d.Message);
                    }
                });
            }
        });
    }


本文转自yonghu86 51CTO博客，原文链接：http://blog.51cto.com/yonghu/1334907，如需转载请自行联系原作者

文章标签：
前端开发
JavaScript
.NET
关键词：
jQuery案例
jQuery框架
EasyUI案例
EasyUI框架
jQuery easyui
科技小先锋
目录
相关文章
授客
|
5月前
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
授客
52 0
程序员大阳
|
前端开发 JavaScript 数据安全/隐私保护
jQuery EasyUI简明教程
1. 背景 EasyUI虽然样式比较固定，但是功能比较全面，而且入门比较简单，适合刚刚学习前端的童鞋们，此处拿出来讲讲如何使用EasyUI。
程序员大阳
109 0
优惠券发放
|
JavaScript 前端开发
jQuery +easyUI 实现双击编辑
jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.
优惠券发放
2007 0
天空夜空星
|
JavaScript 容器
jQuery EasyUI 重写datagrid的datetimebox编辑类型
jQuery EasyUI 重写datagrid的datetimebox编辑类型
天空夜空星
1841 0
乌云上
|
JavaScript 前端开发 开发者
【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
乌云上
1721 0
walb呀
|
JavaScript 前端开发 开发框架
基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
walb呀
1659 0
walb呀
|
JSON 前端开发 JavaScript
基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式
walb呀
1255 0
walb呀
|
JavaScript .NET 容器
JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
walb呀
1274 0
科技探索者
|
JavaScript 前端开发
jQuery easyUI datagrid 增加求和统计行
科技探索者
1220 0
技术小阿哥
|
JavaScript
jQuery EasyUI DataGrid动态合并单元格解决方案
技术小阿哥
1939 0
热门文章
最新文章
1
JQuery基础和原生ajax
2
jQuery选择器
3
前端——使用JavaScript（jQuery）通过身份证号获取籍贯、生日、年龄、性别
4
JQuery版本的AJAX
5
W3Cschool编程实战JQuery知识点总结
6
Jquery的$.each()如何使用
7
jQuery操作DOM
8
jQuery事件处理
9
jQuery动画功能和封装原理
10
jQuery：入门
1
懒得找，存个笔记：easyui combogrid 下拉+关键字搜索
22
2
【项目源码】基于spring boot+mybatis+easyui开发的质量溯源系统
53
3
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——hibernate的config文件（hibernate.cfg.xml）
23
4
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——EmpDao层代码
42
5
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——DeptDao层代码
23
6
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——工具类
33
7
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——OpSessionview实现
33
8
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
35
9
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Action的实现类
31
10
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——struts.xml配置详情
29
相关产品
云迁移中心
文档详情 产品详情
相关课程
更多
jQuery开发教程 前端开发框架Bootstrap使用教程 Vue.js完全自学手册图文教程 JavaScript 自学手册文档教程 前端开发CSS基础 React 入门教程开发文档
相关电子书
更多
JS零基础入门教程（上册） 函数计算最佳实践：快速开发一个分布式 Puppeteer 网页截图服务 编程语言如何演化-以JS的private为例
相关实验场景
更多
前端开发基础3：CSS3常见显示属性 前端开发基础6：Node.js和LESS预编译工具 前端开发基础1：前端开发环境的安装和配置 WEB网页编程实战 WEB入门开发系列实验 JavaScript实现轮播图展示
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
阿里云 X 森马 AIGC T恤设计大赛开启! 穿什么由你定，赢Airpods，作品定制联名T恤