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

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

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

<code><</code><code>asp:Content</code> <code>ID</code><code>=</code><code>"Content1"</code> <code>ContentPlaceHolderID</code><code>=</code><code>"head"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code></</code><code>asp:Content</code><code>></code>

<code><</code><code>asp:Content</code> <code>ID</code><code>=</code><code>"Content2"</code> <code>ContentPlaceHolderID</code><code>=</code><code>"ContentPlaceHolder1"</code> <code>runat</code><code>=</code><code>"server"</code><code>> </code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"toolbar"</code><code>></code>

<code> </code><code><</code><code>table</code> <code>id</code><code>=</code><code>"navGrid"</code><code>></</code><code>table</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../Scripts/Linqjs/linq.min.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../Scripts/Linqjs/linq.jquery.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../Scripts/Business/ModuleAdmin.js?v=5"</code><code>></</code><code>script</code><code>></code>

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

<code>private bool permissionUserModulePermission = </code><code>false</code><code>;</code>

<code> </code><code>private bool permissionRoleModulePermission = </code><code>false</code><code>;</code>

<code> </code><code>private bool permissionOrganizeModulePermission = </code><code>false</code><code>;</code>

<code> </code><code>private bool permissionModuleConfig = </code><code>false</code><code>;</code>

<code> </code><code>protected void Page_Load(object sender, EventArgs e)</code>

<code> </code><code>if</code> <code>(!Page.IsPostBack)</code>

<code> </code><code>this</code><code>.GetPermission();</code>

<code> </code><code>/// 获得页面的权限</code>

<code> </code><code>private void GetPermission()</code>

<code> </code><code>this</code><code>.permissionAdd = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.Add"</code><code>);</code>

<code> </code><code>this</code><code>.permissionEdit = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.Edit"</code><code>);</code>

<code> </code><code>this</code><code>.permissionDelete = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.Delete"</code><code>);</code>

<code> </code><code>this</code><code>.permissionExport = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.Export"</code><code>);</code>

<code> </code><code>//this.permissionAccredit = this.IsAuthorized("UserManagement.Accredit");</code>

<code> </code><code>this</code><code>.permissionUserModulePermission = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.UserModulePermission"</code><code>);</code>

<code> </code><code>this</code><code>.permissionRoleModulePermission = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.RoleModulePermission"</code><code>);</code>

<code> </code><code>this</code><code>.permissionOrganizeModulePermission = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.OrganizeModulePermission"</code><code>) && SystemInfo.EnableOrganizePermission;</code>

<code> </code><code>this</code><code>.permissionModuleConfig = </code><code>this</code><code>.IsAuthorized(</code><code>"ModuleManagement.ModuleConfig"</code><code>);</code>

<code> </code><code>/// 加载工具栏</code>

<code> </code><code>/// <returns>工具栏HTML</returns></code>

<code> </code><code>public override string BuildToolBarButtons()</code>

<code> </code><code>StringBuilder sb = </code><code>new</code> <code>StringBuilder();</code>

<code> </code><code>string linkbtn_template = </code><code>"<a id=\"a_{0}\" class=\"easyui-linkbutton\" style=\"float:left\" plain=\"true\" href=\"javascript:;\" icon=\"{1}\" {2} title=\"{3}\">{4}</a>"</code><code>;</code>

<code> </code><code>sb.Append(</code><code>"<a id=\"a_refresh\" class=\"easyui-linkbutton\" style=\"float:left\" plain=\"true\" href=\"javascript:;\" icon=\"icon-reload\" title=\"重新加载\">刷新</a> "</code><code>);</code>

<code> </code><code>sb.Append(</code><code>"<div class='datagrid-btn-separator'></div> "</code><code>);</code>

<code> </code><code>sb.Append(string.Format(linkbtn_template, </code><code>"add"</code><code>, </code><code>"icon-tab_add"</code><code>, permissionAdd ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"新增模块（菜单）"</code><code>, </code><code>"新增"</code><code>));</code>

<code> </code><code>sb.Append(string.Format(linkbtn_template, </code><code>"edit"</code><code>, </code><code>"icon-tab_edit"</code><code>, permissionEdit ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"修改选中的模块（菜单）"</code><code>, </code><code>"修改"</code><code>));</code>

<code> </code><code>sb.Append(string.Format(linkbtn_template, </code><code>"delete"</code><code>, </code><code>"icon-tab_delete"</code><code>, permissionDelete ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"删除选中的模块（菜单）"</code><code>, </code><code>"删除"</code><code>));</code>

<code> </code><code>//sb.Append(string.Format(linkbtn_template, "move", "icon-shape_move_forwards", permissionMove ? "" : "disabled=\"True\"", "移动选中的模块（菜单）", "移动"));</code>

<code> </code><code>sb.Append(string.Format(linkbtn_template, </code><code>"export"</code><code>, </code><code>"icon-tab_go"</code><code>, permissionExport ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"导出模块（菜单）数据"</code><code>, </code><code>"导出"</code><code>));</code>

<code> </code><code>sb.Append(string.Format(linkbtn_template, </code><code>"setusermodulepermission"</code><code>, </code><code>"icon-user_key"</code><code>, permissionUserModulePermission ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"设置用户的模块（菜单）访问权限"</code><code>, </code><code>"用户模块权限"</code><code>));</code>

<code> </code><code>sb.Append(string.Format(linkbtn_template, </code><code>"setrolemodulepermission"</code><code>, </code><code>"icon-group_key"</code><code>, permissionRoleModulePermission ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"设置角色的模块（菜单）访问权限"</code><code>, </code><code>"角色模块权限"</code><code>));</code>

<code> </code><code>sb.Append(string.Format(linkbtn_template, </code><code>"moduleconfig"</code><code>, </code><code>"icon-table_gear"</code><code>, permissionRoleModulePermission ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"设置模块的可用性"</code><code>, </code><code>"模块配置"</code><code>));</code>

<code> </code><code>return</code> <code>sb.ToString();</code>

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

<code> </code><code>databind: </code><code>function</code> <code>(winsize) {</code>

<code> </code><code>navgrid = $(</code><code>'#navGrid'</code><code>).treegrid({</code>

<code> </code><code>toolbar: </code><code>'#toolbar'</code><code>,</code>

<code> </code><code>title: </code><code>'模块（菜单）列表'</code><code>,</code>

<code> </code><code>iconCls: </code><code>'icon icon-chart_organisation'</code><code>,</code>

<code> </code><code>width: winsize.width,</code>

<code> </code><code>height: winsize.height,</code>

<code> </code><code>nowrap: </code><code>false</code><code>,</code>

<code> </code><code>rownumbers: </code><code>true</code><code>,</code>

<code> </code><code>//animate: true,</code>

<code> </code><code>resizable: </code><code>true</code><code>,</code>

<code> </code><code>collapsible: </code><code>false</code><code>,</code>

<code> </code><code>url: actionUrl,</code>

<code> </code><code>idField: </code><code>'Id'</code><code>,</code>

<code> </code><code>treeField: </code><code>'FullName'</code><code>,</code>

<code> </code><code>frozenColumns: [[</code>

<code> </code><code>{ title: </code><code>'模块（菜单）名称'</code><code>, field: </code><code>'FullName'</code><code>, width: 200 },</code>

<code> </code><code>{ title: </code><code>'编码'</code><code>, field: </code><code>'Code'</code><code>, width: 130 }</code>

<code> </code><code>columns: [[</code>

<code> </code><code>{ title: </code><code>'Id'</code><code>, field: </code><code>'Id'</code><code>, hidden: </code><code>true</code> <code>},</code>

<code> </code><code>{ title: </code><code>'ParentId'</code><code>, field: </code><code>'ParentId'</code><code>, hidden: </code><code>true</code> <code>},</code>

<code> </code><code>{ title: </code><code>'模块分类'</code><code>, field: </code><code>'Category'</code><code>, width: 100 },</code>

<code> </code><code>{ title: </code><code>'图标'</code><code>, field: </code><code>'IconCss'</code><code>, width: 130, hidden: </code><code>true</code> <code>},</code>

<code> </code><code>{ title: </code><code>'Web链接地址'</code><code>, field: </code><code>'NavigateUrl'</code><code>, width: 200 },</code>

<code> </code><code>{ title: </code><code>'WinForm程序集'</code><code>, field: </code><code>'AssemblyName'</code><code>, width: 150 },</code>

<code> </code><code>{ title: </code><code>'WinForm窗体'</code><code>, field: </code><code>'FormName'</code><code>, width: 200 },</code>

<code> </code><code>title: </code><code>'公共'</code><code>, field: </code><code>'IsPublic'</code><code>, width: 50, align: </code><code>'center'</code><code>, formatter: </code><code>function</code> <code>(v, d, i) {</code>

<code> </code><code>return</code> <code>'<img src="http://images.cnblogs.com/'</code> <code>+ (v ? "checkmark.gif</code><code>" : "</code><code>checknomark.gif</code><code>") + '"</code> <code>/>';</code>

<code> </code><code>{ title: </code><code>'有效'</code><code>, field: </code><code>'Enabled'</code><code>, width: 50, align: </code><code>'center'</code><code>, formatter: imgcheckbox }, </code>

<code> </code><code>{ title: </code><code>'AllowEdit'</code><code>, field: </code><code>'AllowEdit'</code><code>, hidden: </code><code>true</code> <code>},</code>

<code> </code><code>{ title: </code><code>'AllowDelete'</code><code>, field: </code><code>'AllowDelete'</code><code>, hidden: </code><code>true</code> <code>},</code>

<code> </code><code>{ title: </code><code>'排序'</code><code>, field: </code><code>'SortCode'</code><code>, width: 80 },</code>

<code> </code><code>{ title: </code><code>'备注'</code><code>, field: </code><code>'Description'</code><code>, width: 500 }</code>

<code> </code><code>reload: </code><code>function</code> <code>() {</code>

<code> </code><code>navgrid.treegrid(</code><code>'reload'</code><code>);</code>

<code> </code><code>selected: </code><code>function</code> <code>() {</code>

<code> </code><code>return</code> <code>navgrid.treegrid(</code><code>'getSelected'</code><code>);</code>

<code>var</code> <code>imgcheckbox = </code><code>function</code> <code>(cellvalue, options, rowObject) {</code>

<code> </code><code>return</code> <code>cellvalue ? </code><code>'<img src="/css/icon/ok.png" alt="正常" title="正常" />'</code> <code>: </code><code>'<img src="/css/icon/stop.png" alt="禁用" title="禁用" />'</code><code>;</code>

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

　　代码如下：　　

100

101

102

103

104

<code>add: </code><code>function</code> <code>() {</code>

<code> </code><code>if</code> <code>($(</code><code>this</code><code>).linkbutton(</code><code>'options'</code><code>).disabled == </code><code>true</code><code>) {</code>

<code> </code><code>return</code><code>;</code>

<code> </code><code>var</code> <code>addDialog = top.$.hDialog({</code>

<code> </code><code>href: formUrl, title: </code><code>'添加模块（菜单）'</code><code>, iconCls: </code><code>'icon-tab_add'</code><code>, width: 490, height: 550,</code>

<code> </code><code>onLoad: </code><code>function</code> <code>() {</code>

<code> </code><code>crud.bindCtrl();</code>

<code> </code><code>crud.bindCategory();</code>

<code> </code><code>var</code> <code>row = grid.selected();</code>

<code> </code><code>top.$(</code><code>'#txt_ParentId'</code><code>).combotree(</code><code>'setValue'</code><code>, row.ParentId);</code>

<code> </code><code>submit: </code><code>function</code> <code>() {</code>

<code> </code><code>if</code> <code>(top.$(</code><code>'#uiform'</code><code>).validate().form()) {</code>

<code> </code><code>//var param = createParam('add', '0');</code>

<code> </code><code>var</code> <code>vcategory = top.$(</code><code>'#txt_Category'</code><code>).combobox(</code><code>'getValue'</code><code>);</code>

<code> </code><code>var</code> <code>vparentid = top.$(</code><code>'#txt_ParentId'</code><code>).combobox(</code><code>'getValue'</code><code>);</code>

<code> </code><code>var</code> <code>param = </code><code>'action=Add&vcategory='</code> <code>+ vcategory + </code><code>'&vparentid='</code> <code>+ vparentid + </code><code>'&'</code> <code>+ top.$(</code><code>'#uiform'</code><code>).serialize();</code>

<code> </code><code>$.ajaxjson(actionUrl, param, </code><code>function</code> <code>(d) {</code>

<code> </code><code>if</code> <code>(d.Success) {</code>

<code> </code><code>msg.ok(d.Message);</code>

<code> </code><code>addDialog.dialog(</code><code>'close'</code><code>);</code>

<code> </code><code>grid.reload();</code>

<code> </code><code>MessageOrRedirect(d);</code>

<code> </code><code>edit: </code><code>function</code> <code>() {</code>

<code> </code><code>var</code> <code>row = grid.selected();</code>

<code> </code><code>var</code> <code>editDailog = top.$.hDialog({</code>

<code> </code><code>href: formUrl, title: </code><code>'修改模块（菜单）'</code><code>, iconCls: </code><code>'icon-tab_edit'</code><code>, width: 490, height: 550,</code>

<code> </code><code>onLoad: </code><code>function</code> <code>() {</code>

<code> </code><code>crud.bindCtrl(row.Id);</code>

<code> </code><code>crud.bindCategory();</code>

<code> </code><code>top.$(</code><code>'#txt_FullName'</code><code>).val(row.FullName);</code>

<code> </code><code>top.$(</code><code>'#txt_Category'</code><code>).combobox(</code><code>'setValue'</code><code>, row.Category);</code>

<code> </code><code>top.$(</code><code>'#txt_NavigateUrl'</code><code>).val(row.NavigateUrl);</code>

<code> </code><code>top.$(</code><code>'#txt_IconCss'</code><code>).val(row.IconCss);</code>

<code> </code><code>//top.$('#smallIcon').attr('class', "icon " + row.IconCss);</code>

<code> </code><code>top.$(</code><code>'#smallIcon'</code><code>).attr(</code><code>'class'</code><code>, row.IconCss);</code>

<code> </code><code>top.$(</code><code>'#txt_AssemblyName'</code><code>).val(row.AssemblyName);</code>

<code> </code><code>top.$(</code><code>'#txt_FormName'</code><code>).val(row.FormName);</code>

<code> </code><code>top.$(</code><code>'#chk_Enabled'</code><code>).attr(</code><code>'checked'</code><code>, row.Enabled == </code><code>"1"</code><code>);</code>

<code> </code><code>top.$(</code><code>'#chk_IsPublic'</code><code>).attr(</code><code>'checked'</code><code>, row.IsPublic == </code><code>"1"</code><code>);</code>

<code> </code><code>top.$(</code><code>'#chk_Expand'</code><code>).attr(</code><code>'checked'</code><code>, row.Expand == </code><code>"1"</code><code>);</code>

<code> </code><code>top.$(</code><code>'#chk_AllowEdit'</code><code>).attr(</code><code>'checked'</code><code>, row.AllowEdit == </code><code>"1"</code><code>);</code>

<code> </code><code>top.$(</code><code>'#chk_AllowDelete'</code><code>).attr(</code><code>'checked'</code><code>, row.AllowDelete == </code><code>"1"</code><code>);</code>

<code> </code><code>top.$(</code><code>'#txt_Description'</code><code>).val(row.Description);</code>

<code> </code><code>top.$(</code><code>'#txt_IconUrl'</code><code>).val(row.IconUrl);</code>

<code> </code><code>submit: </code><code>function</code> <code>() {</code>

<code> </code><code>if</code> <code>(top.$(</code><code>'#uiform'</code><code>).validate().form()) {</code>

<code> </code><code>//保存时判断当前节点所选的父节点，不能为当前节点的子节点，这样就乱套了....</code>

<code> </code><code>var</code> <code>treeParentId = top.$(</code><code>'#txt_ParentId'</code><code>).combotree(</code><code>'tree'</code><code>); </code><code>// 得到树对象</code>

<code> </code><code>var</code> <code>node = treeParentId.tree(</code><code>'getSelected'</code><code>);</code>

<code> </code><code>var</code> <code>nodeParentId = treeParentId.tree(</code><code>'find'</code><code>, row.Id);</code>

<code> </code><code>var</code> <code>children = treeParentId.tree(</code><code>'getChildren'</code><code>, nodeParentId.target);</code>

<code> </code><code>var</code> <code>nodeIds = </code><code>''</code><code>;</code>

<code> </code><code>var</code> <code>isFind = </code><code>'false'</code><code>;</code>

<code> </code><code>for</code> <code>(</code><code>var</code> <code>index = 0; index < children.length; index++) {</code>

<code> </code><code>if</code> <code>(children[index].id == node.id) {</code>

<code> </code><code>isFind = </code><code>'true'</code><code>;</code>

<code> </code><code>break</code><code>;</code>

<code> </code><code>if</code> <code>(isFind == </code><code>'true'</code><code>) {</code>

<code> </code><code>top.$.messager.alert(</code><code>'温馨提示'</code><code>, </code><code>'请选择父节点元素！'</code><code>, </code><code>'warning'</code><code>);</code>

<code> </code><code>return</code><code>;</code>

<code> </code><code>var</code> <code>vcategory = top.$(</code><code>'#txt_Category'</code><code>).combobox(</code><code>'getValue'</code><code>);</code>

<code> </code><code>var</code> <code>vparentid = top.$(</code><code>'#txt_ParentId'</code><code>).combobox(</code><code>'getValue'</code><code>);</code>

<code> </code><code>var</code> <code>query = </code><code>'action=Edit&vcategory='</code> <code>+ vcategory + </code><code>'&vparentid='</code> <code>+ vparentid + </code><code>'&KeyId='</code> <code>+ row.Id + </code><code>'&'</code> <code>+ top.$(</code><code>'#uiform'</code><code>).serialize();</code>

<code> </code><code>$.ajaxjson(actionUrl, query, </code><code>function</code> <code>(d) {</code>

<code> </code><code>if</code> <code>(d.Success) {</code>

<code> </code><code>msg.ok(d.Message);</code>

<code> </code><code>editDailog.dialog(</code><code>'close'</code><code>);</code>

<code> </code><code>grid.reload();</code>

<code> </code><code>MessageOrRedirect(d);</code>

<code> </code><code>msg.warning(</code><code>'请选择要修改菜单!'</code><code>);</code>

<code> </code><code>return</code> <code>false</code><code>;</code>

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

　　这个是如何实现的呢？

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

<code><</code><code>ul</code> <code>id</code><code>=</code><code>"iconlist"</code> <code>style</code><code>=</code><code>"margin:0px;padding:0px; list-style-type:none;"</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/accept.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-accept"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/add.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-add"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/advancedsettings.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-advancedsettings"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/advancedsettings2.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-advancedsettings2"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/anchor.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-anchor"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_delete.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_delete"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_double.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_double"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_edit.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_edit"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_error.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_error"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_form.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_form"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_form_add.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_form_add"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_form_delete.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_form_delete"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_form_edit.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_form_edit"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_form_magnify.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_form_magnify"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_get.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_get"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_go.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_go"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_home.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_home"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_key.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_key"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

<code><</code><code>li</code> <code>title</code><code>=</code><code>"/css/icon/application_lightning.png"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"icon icon-application_lightning"</code><code>> </</code><code>span</code><code>></</code><code>li</code><code>></code>

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

<code>var</code> <code>showIcon = </code><code>function</code> <code>() {</code>

<code> </code><code>top.$(</code><code>'#selecticon'</code><code>).click(</code><code>function</code> <code>() {</code>

<code> </code><code>var</code> <code>iconDialog = top.$.hDialog({</code>

<code> </code><code>iconCls: </code><code>'icon-application_view_icons'</code><code>,</code>

<code> </code><code>href: </code><code>'/css/iconlist.htm?v='</code> <code>+ Math.random(),</code>

<code> </code><code>title: </code><code>'选取图标'</code><code>, width: 800, height: 600, showBtns: </code><code>false</code><code>,</code>

<code> </code><code>top.$(</code><code>'#iconlist li'</code><code>).attr(</code><code>'style'</code><code>, </code><code>'float:left;border:1px solid #fff;margin:2px;width:16px;cursor:pointer'</code><code>).click(</code><code>function</code> <code>() {</code>

<code> </code><code>//var iconCls = top.$(this).find('span').attr('class').replace('icon ', '');</code>

<code> </code><code>var</code> <code>iconCls = top.$(</code><code>this</code><code>).find(</code><code>'span'</code><code>).attr(</code><code>'class'</code><code>);</code>

<code> </code><code>top.$(</code><code>'#txt_IconCss'</code><code>).val(iconCls);</code>

<code> </code><code>top.$(</code><code>'#txt_IconUrl'</code><code>).val(top.$(</code><code>this</code><code>).attr(</code><code>'title'</code><code>));</code>

<code> </code><code>//top.$('#smallIcon').attr('class', "icon " + iconCls);</code>

<code> </code><code>top.$(</code><code>'#smallIcon'</code><code>).attr(</code><code>'class'</code><code>, iconCls);</code>

<code> </code><code>iconDialog.dialog(</code><code>'close'</code><code>);</code>

<code> </code><code>}).hover(</code><code>function</code> <code>() {</code>

<code> </code><code>top.$(</code><code>this</code><code>).css({ </code><code>'border'</code><code>: </code><code>'1px solid red'</code> <code>});</code>

<code> </code><code>}, </code><code>function</code> <code>() {</code>

<code> </code><code>top.$(</code><code>this</code><code>).css({ </code><code>'border'</code><code>: </code><code>'1px solid #fff'</code> <code>});</code>

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

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

　　js代码如下：　

<code>userModulePermissionBatchSet: </code><code>function</code> <code>() { </code><code>//用户模块（菜单）权限批量设置</code>

<code> </code><code>var</code> <code>userGrid;</code>

<code> </code><code>var</code> <code>curUserModuleIds = []; </code><code>//当前所选用户所拥有的模块ID</code>

<code> </code><code>var</code> <code>setDialog = top.$.hDialog({</code>

<code> </code><code>title: </code><code>'用户模块（菜单）权限批量设置'</code><code>,</code>

<code> </code><code>width: 670, height: 600, iconCls: </code><code>'icon-user_key'</code><code>, </code><code>//cache: false,</code>

<code> </code><code>href: </code><code>"Modules/html/PermissionBacthSetForm.htm?n="</code> <code>+ Math.random(),</code>

<code> </code><code>using(</code><code>'panel'</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>top.$(</code><code>'#panelTarget'</code><code>).panel({ title: </code><code>'模块（菜单）'</code><code>, iconCls: </code><code>'icon-org'</code><code>, height: $(window).height() - 3 });</code>

<code> </code><code>userGrid = top.$(</code><code>'#leftnav'</code><code>).datagrid({</code>

<code> </code><code>title: </code><code>'所有用户'</code><code>,</code>

<code> </code><code>url: </code><code>'Modules/handler/UserAdminHandler.ashx'</code><code>,</code>

<code> </code><code>nowrap: </code><code>false</code><code>, </code><code>//折行</code>

<code> </code><code>rownumbers: </code><code>true</code><code>, </code><code>//行号</code>

<code> </code><code>striped: </code><code>true</code><code>, </code><code>//隔行变色</code>

<code> </code><code>idField: </code><code>'Id'</code><code>, </code><code>//主键</code>

<code> </code><code>singleSelect: </code><code>true</code><code>, </code><code>//单选</code>

<code> </code><code>frozenColumns: [[]],</code>

<code> </code><code>columns: [[</code>

<code> </code><code>{ title: </code><code>'登录名'</code><code>, field: </code><code>'UserName'</code><code>, width: 120, align: </code><code>'left'</code> <code>},</code>

<code> </code><code>{ title: </code><code>'用户名'</code><code>, field: </code><code>'RealName'</code><code>, width: 150, align: </code><code>'left'</code> <code>}</code>

<code> </code><code>onLoadSuccess: </code><code>function</code> <code>(data) {</code>

<code> </code><code>top.$(</code><code>'#rightnav'</code><code>).tree({</code>

<code> </code><code>cascadeCheck: </code><code>false</code><code>, </code><code>//联动选中节点</code>

<code> </code><code>checkbox: </code><code>true</code><code>,</code>

<code> </code><code>lines: </code><code>true</code><code>,</code>

<code> </code><code>url: </code><code>'Modules/handler/ModuleAdminHandler.ashx?action=GetModuleTree'</code><code>,</code>

<code> </code><code>onSelect: </code><code>function</code> <code>(node) {</code>

<code> </code><code>top.$(</code><code>'#rightnav'</code><code>).tree(</code><code>'getChildren'</code><code>, node.target);</code>

<code> </code><code>top.$(</code><code>'#leftnav'</code><code>).datagrid(</code><code>'selectRow'</code><code>, 0);</code>

<code> </code><code>onSelect: </code><code>function</code> <code>(rowIndex, rowData) {</code>

<code> </code><code>curUserModuleIds = [];</code>

<code> </code><code>var</code> <code>query = </code><code>'action=GetModuleByUserId&userid='</code> <code>+ rowData.Id;</code>

<code> </code><code>$.ajaxtext(</code><code>'handler/PermissionHandler.ashx'</code><code>, query, </code><code>function</code> <code>(data) {</code>

<code> </code><code>var</code> <code>moduelTree = top.$(</code><code>'#rightnav'</code><code>);</code>

<code> </code><code>moduelTree.tree(</code><code>'uncheckedAll'</code><code>);</code>

<code> </code><code>if</code> <code>(data == </code><code>''</code> <code>|| data.toString() == </code><code>'[object XMLDocument]'</code><code>) {</code>

<code> </code><code>curUserModuleIds = data.split(</code><code>','</code><code>);</code>

<code> </code><code>var</code> <code>node = moduelTree.tree(</code><code>'find'</code><code>, curUserModuleIds[i]);</code>

<code> </code><code>moduelTree.tree(</code><code>"check"</code><code>, node.target);</code>

<code> </code><code>var</code> <code>allSelectModuledIds = permissionMgr.getUserSelectedModule().split(</code><code>','</code><code>);</code>

<code> </code><code>var</code> <code>grantModuleIds = </code><code>''</code><code>;</code>

<code> </code><code>var</code> <code>revokeModuleIds = </code><code>''</code><code>;</code>

<code> </code><code>var</code> <code>flagRevoke = 0;</code>

<code> </code><code>var</code> <code>flagGrant = 0;</code>

<code> </code><code>while</code> <code>(flagRevoke < curUserModuleIds.length) {</code>

<code> </code><code>if</code> <code>($.inArray(curUserModuleIds[flagRevoke], allSelectModuledIds) == -1) {</code>

<code> </code><code>revokeModuleIds += curUserModuleIds[flagRevoke] + </code><code>','</code><code>; </code><code>//得到收回的权限列表</code>

<code> </code><code>++flagRevoke;</code>

<code> </code><code>while</code> <code>(flagGrant < allSelectModuledIds.length) {</code>

<code> </code><code>if</code> <code>($.inArray(allSelectModuledIds[flagGrant], curUserModuleIds) == -1) {</code>

<code> </code><code>grantModuleIds += allSelectModuledIds[flagGrant] + </code><code>','</code><code>; </code><code>//得到授予的权限列表</code>

<code> </code><code>++flagGrant;</code>

<code> </code><code>var</code> <code>query = </code><code>'action=SetUserModulePermission&userid='</code> <code>+ top.$(</code><code>'#leftnav'</code><code>).datagrid(</code><code>'getSelected'</code><code>).Id + </code><code>'&grantIds='</code> <code>+ grantModuleIds + </code><code>"&revokeIds="</code> <code>+ revokeModuleIds;</code>

<code> </code><code>$.ajaxjson(</code><code>'handler/PermissionHandler.ashx'</code><code>, query, </code><code>function</code> <code>(d) {</code>

<code> </code><code>alert(d.Message);</code>

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

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

　　js部分代码如下：　　

<code>roleModulePermissionBatchSet: </code><code>function</code> <code>() { </code><code>//角色模块（菜单）权限批量设置</code>

<code> </code><code>var</code> <code>roleGrid;</code>

<code> </code><code>var</code> <code>curRoleModuleIds = []; </code><code>//当前所选角色所拥有的模块ID</code>

<code> </code><code>title: </code><code>'角色模块（菜单）权限批量设置'</code><code>,</code>

<code> </code><code>width: 670, height: 600, iconCls: </code><code>'icon-group_key'</code><code>, </code><code>//cache: false,</code>

<code> </code><code>roleGrid = top.$(</code><code>'#leftnav'</code><code>).datagrid({</code>

<code> </code><code>title: </code><code>'所有角色'</code><code>,</code>

<code> </code><code>url: </code><code>'Modules/handler/RoleAdminHandler.ashx?action=getrolelist'</code><code>,</code>

<code> </code><code>{ title: </code><code>'角色编码'</code><code>, field: </code><code>'Code'</code><code>, width: 120, align: </code><code>'left'</code> <code>},</code>

<code> </code><code>{ title: </code><code>'角色名称'</code><code>, field: </code><code>'RealName'</code><code>, width: 150, align: </code><code>'left'</code> <code>}</code>

<code> </code><code>curRoleModuleIds = [];</code>

<code> </code><code>var</code> <code>query = </code><code>'action=GetModuleByRoleId&roleid='</code> <code>+ rowData.Id;</code>

<code> </code><code>curRoleModuleIds = data.split(</code><code>','</code><code>);</code>

<code> </code><code>var</code> <code>node = moduelTree.tree(</code><code>'find'</code><code>, curRoleModuleIds[i]);</code>

<code> </code><code>while</code> <code>(flagRevoke < curRoleModuleIds.length) {</code>

<code> </code><code>if</code> <code>($.inArray(curRoleModuleIds[flagRevoke], allSelectModuledIds) == -1) {</code>

<code> </code><code>revokeModuleIds += curRoleModuleIds[flagRevoke] + </code><code>','</code><code>; </code><code>//得到收回的权限列表</code>

<code> </code><code>if</code> <code>($.inArray(allSelectModuledIds[flagGrant], curRoleModuleIds) == -1) {</code>

<code> </code><code>var</code> <code>query = </code><code>'action=SetRoleModulePermission&roleid='</code> <code>+ top.$(</code><code>'#leftnav'</code><code>).datagrid(</code><code>'getSelected'</code><code>).Id + </code><code>'&grantIds='</code> <code>+ grantModuleIds + </code><code>"&revokeIds="</code> <code>+ revokeModuleIds;</code>

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

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

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条