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

http://www.cnblogs.com/huyong/p/3454012.html

使用Jquery+EasyUI 进行框架项目开发案例讲解之五

 模块（菜单）管理源码分享 

　　  在上四篇文章

　  《使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享》

　  《使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享》

　  《使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享》

　《使用Jquery+EasyUI 进行框架项目开发案例讲解之三---组织机构源码分享》

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

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

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<%@ 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

50

51

52

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

52

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="禁用" />‘;

}

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

　　代码如下：　


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

105

106

107

108

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;

    }

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

　　这个是如何实现的呢？

　　首先准备图标的基页面，截取部分格式如下，保存为一个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><span style="font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; "> </span>

　　然后在我们的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

25

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‘ });

                });

            }

        });

    });

};

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

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

　　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

90

91

92

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);

                    }

                });

            }

        });

    }

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

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

　　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

90

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);

                    }

                });

            }

        });

    }
时间： 2024-10-12 16:16:10

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

使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> <使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享> <使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享> 我们分享了使用Jquery EasyUI来进行ASP.NET项目的开发的相关方法,每一个模块都有其共用性,

使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发人员更轻松的打造出功能丰富而且美观的UI界面.开发人员不须要编写复杂的javascript,也不须要对css样式有深入的了解,开发人员须要了解的仅仅有一些简单的html标签.jQuery EasyUI为我们提供了大多数UI控件的使用

【小程序源码案例】微信小程序项目开发案例分享

作者:web小二本文标签: 微信小程序 小程序源码案例 小程序项目小程序的开发,并不是适合所有公司,我今天跟大家分享小程序方面的教程,主要是供大家学习使用.学习这种东西,有时候则是单纯的喜欢,没有任何目的,很单纯的为了好玩,记得很早之前学flash,没有想法,就是觉得好玩,纯娱乐爱好而已.到后来玩视频剪辑也是出于同样的原因,不图钱财名利,只是图自己个人爱好娱乐. 但是,学习,有时候则是需要有明确目的,特别是关系到自己吃饭问题的时候,你就需要非常有目的去学习,并且还需要制定好学习的计划与目标,希望

JQuery EasyUI学习框架

前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录在学习过程中的问题,在他们自己的问题和实事后. 关于EasyUI EasyUI框架式基于JQuery的,使用它帮助我们快捷的构建web网页. EasyUI框架是一个简单.易用.强大的轻量级web前端javascript框架.现阶段来说.在开发web项目时,前端的开发我们更喜欢使用JQuery取代原生

使用.NET MVC框架项目开发流程（项目开发流程）

MVC项目开发流程 整理需求,进行需求分析.项目设计. 整理数据项,建数据库做前期准备,并整理字典. 建立所需数据库表和视图和模型. 页面实现其初步功能(跳过逻辑后台代码),只是实现页面之间的跳转以及展示(预览审核使用). .............................................................................................................................. 审核通过……开始写数据

jQuery实现Checkbox中项目开发全选全不选的使用

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习</title> 5 <style type="text/css"> 6 *{margin:0px;padding:0px;} 7 table{width:100%;text-align:center;} 8 </style> 9 10 <script

Java Web项目开发案例精粹-1-企业日常事务管理系统-源代码

一.功能简介 首页[index.jsp]: 1.显示最新消息,单击消息的链接,可以查看具体的消息内容及其回复和批复 2.如果员工已登陆,则显示其信息 消息列表[messageList.jsp]: 1.以分页的形式,显示消息列表,单击消息的链接,可以查看具体的消息内容和批复 发布新消息[publishNewMessage.jsp]: 1.发布新的消息 身份识别[login.jsp]: 1.登陆 二.使用到的javaweb知识及其它: 1.jsp 2.servlet 3.filter 4.jdbc

JavaWeb项目开发案例精粹-第6章报价管理系统-001需求分析及设计

1. 2. 3. 4. 5. 6. 7. 8. 9.

JavaWeb项目开发案例精粹-第4章博客网站系统-005action层

1. 1 package com.sanqing.action; 2 3 import java.util.Date; 4 import java.util.Map; 5 6 import com.opensymphony.xwork2.ActionContext; 7 import com.opensymphony.xwork2.ActionSupport; 8 import com.sanqing.po.Article; 9 import com.sanqing.service.Articl