溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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代碼如下：
<%@ 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>二：綁定當前登錄用戶所擁有的功能按鈕列表代碼如下：
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代碼如下：
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://p_w_picpaths.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="禁用" />';
}四、添加與模塊（菜單）主界面
代碼如下：
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：
<ul id="iconlist" > <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部分代碼為：
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代碼如下：
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部分代碼如下：
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);
}
});
}
});
}相關資源分享
1、基于.NET的快速信息化系統開發整合框架 —RDIFramework.NET—系統目錄
2、Jquery EasyUI官方網站
3、Jquery學習官方網站
4、Jquery EasyUI本地實例文件（如果嫌官網速度過慢，可以下載這個看）
5、Jquery權威指南下載
6、Jquery權威指南源代碼下載
7、Jquery EasyUI 1.3中文.chm文件下載
8、JavaScript權威指南（第六版）中文版（強烈推薦）在線觀看
作者： EricHu
出處： http://yonghu.blog.51cto.com/
Email:406590790@qq.com
QQ 交流：406590790 QQ群1：16653241（已滿） 群2：237326100
關于作者：高級工程師、信息系統項目管理師、DBA。專注于微軟平臺項目架構、管理和企業解決方案，多年項目開發與管理經驗，曾多次組織并開發多個大型項目，精通DotNet，DB（SqlServer、Oracle等）技術。熟悉Java、Delhpi及Linux操作系統，有扎實的網絡知識。在面向對象、面向服務以及數據庫領域有一定的造詣。現從事DB管理與開發、WinForm、WCF、WebService、網頁數據抓取以及ASP.NET等項目管理、開發、架構等工作。如有問題或建議，請多多賜教！本文版權歸作者和CSDN博客共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，如有問題，可以通過郵箱或QQ 聯系我，非常感謝。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
