使用Jquery+EasyUI 進行架構項目開發案例講解之四---組織機構管理源碼分享

　我們分享了使用Jquery EasyUI來進行ASP.NET項目的開發的相關方法，每一個子產品都有其共用性，細細了解與掌握，我相信使用EasyUI進行開發還是相當友善的。

　　接下來我分享“組織機構管理”子產品主要的核心代碼組織機構管理使用的EasyUI控件，主要是EasyUI的TreeGrid控件，組織機構管理主界面如下圖所示：

使用Jquery+EasyUI 進行架構項目開發案例講解之四---組織機構管理源碼分享

　在進行代碼講解之前，我們先來回顧一個TreeGrid相關的知識。easyUI TreeGrid 從$.fn.datagrid.defaults繼承，覆寫預設值$.fn.treegrid.defaults。treegrid 是使用顯示分層資料在grid中,treegrid 是基于datagrid和關聯treeview 和關聯可編輯的grid,treegrid 允許你建立定制的,異步加載展開行資料,和顯示分層的資料在多列中。如下圖所示：

　　通過html标記建立treegrid ,大多數情況下treegrid 遵循相同的結構格式化為datagrid

<code><</code><code>table</code> <code>id</code><code>=</code><code>"tt"</code> <code>class</code><code>=</code><code>"easyui-treegrid"</code> <code>style</code><code>=</code><code>"width:600px;height:400px"</code>

<code> </code><code>data-options</code><code>=</code><code>"url:'get_data.aspx',idField:'id',treeField:'name'"</code><code>></code>

<code> </code><code><</code><code>thead</code><code>></code>

<code> </code><code><</code><code>th</code> <code>data-options</code><code>=</code><code>"field:'name',width:180"</code><code>>Task Name</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>data-options</code><code>=</code><code>"field:'persons',width:60,align:'right'"</code><code>>Persons</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>data-options</code><code>=</code><code>"field:'begin',width:80"</code><code>>Begin Date</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>data-options</code><code>=</code><code>"field:'end',width:80"</code><code>>End Date</</code><code>th</code><code>></code>

<code> </code><code></</code><code>thead</code><code>></code>

<code></</code><code>table</code><code>></code>

　使用javascript建立treegrid

<code><</code><code>table</code> <code>id</code><code>=</code><code>"tt"</code> <code>style</code><code>=</code><code>"width:600px;height:400px"</code><code>></</code><code>table</code><code>></code>

<code>$(</code><code>'#tt'</code><code>).treegrid({</code>

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

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

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

<code> </code><code>{title:</code><code>'Task Name'</code><code>,field:</code><code>'name'</code><code>,width:180},</code>

<code> </code><code>{field:</code><code>'persons'</code><code>,title:</code><code>'Persons'</code><code>,width:60,align:</code><code>'right'</code><code>},</code>

<code> </code><code>{field:</code><code>'begin'</code><code>,title:</code><code>'Begin Date'</code><code>,width:80},</code>

<code> </code><code>{field:</code><code>'end'</code><code>,title:</code><code>'End Date'</code><code>,width:80}</code>

　　屬性

　　屬性從 datagrid繼承,以下是treegrid新增的屬性.

Name

Type

Description

Default

idField

string

定義鍵字段辨別一個tree節點,該項是必須的.

null

treeField

定義tree節點字段,該項是必須的.

animate

boolean

定義當節點展開/關閉的時候,是否顯示動畫效果.

false

loader

function(param,success,error)

定義如何從遠端伺服器端加載資料. 傳回false将終止這個動作. 這個函數提供一下參數 :

param: 傳遞給遠端伺服器的參數對象.

success(data): 當檢索資料成功之後執行的回調函數.

error(): 當檢索資料失敗的時候調用的回調函數.

json loader

loadFilter

function(data,parentId)

傳回過濾後的顯示資料.

　　事件從datagrid繼承, 以下是datagrid新增事件.

Parameters

onClickRow

row

當使用者點選一個節點時觸發.

onDblClickRow

當使用者輕按兩下一個節點時觸發.

onClickCell

field,row

當使用者點選一個表格的時觸發.

onDblClickCell

當使用者輕按兩下一個表格的時觸發.

onBeforeLoad

row, param

一個請求去加載資料之前觸發, 傳回false将取消加載動作.

onLoadSuccess

row, data

資料加載成功之後觸發.

onLoadError

arguments

資料加載失敗之後觸發,arguments 參數和jQuery.ajax的error函數一樣.

onBeforeExpand

節點展開之前觸發,傳回false将取消展開動作.

onExpand

節點展開後觸發.

onBeforeCollapse

節點折疊之前觸發,傳回false取消折疊動作.

onCollapse

節點折疊後觸發.

onContextMenu

e, row

在節點上右鍵點選觸發.

onBeforeEdit

使用者開始編輯一個節點時觸發.

onAfterEdit

row,changes

使用者結束編輯節點時觸發.

onCancelEdit

使用者取消編輯節點時觸發.

方法

　　許多方法提供一個參數,參數名為id, 這個參數指明tree節點值.

Parameter

options

none

傳回treegrid的 options對象.

resize

設定treegrid 大小,options包含兩個屬性:

width: treegrid新的寬度.

height: treegrid新的高度.

fixRowHeight

固定特定行高度.

loadData

data

加載 treegrid 資料.

reload

重新加載treegrid 資料.如果傳遞了id參數, 重新加載特定的tree行, 其他的重新加載所有tree行.

示例代碼:

reloadFooter

footer

重新加載頁腳資料.

getData

得到加載資料.

getFooterRows

得到頁腳資料.

getRoot

得到根節點, 傳回的是節點對象

getRoots

得到根節點, 傳回的是節點數組.

getParent

得到父節點.

getChildren

得到子節點.

getSelected

得到選中節點并傳回它, 如果沒有選中節點傳回null.

getSelections

得到所有的選中節點.

getLevel

得到特定的節點的層級.

find

查找特定的節點和傳回節點資料.

select

選中一個節點.

unselect

取消選中一個節點.

selectAll

選中所有節點.

unselectAll

取消選中所有節點.

collapse

折疊一個節點.

expand

展開一個節點.

collapseAll

折疊所有節點.

expandAll

展開所有節點.

expandTo

展開從根節點到指定的節點.

toggle

切換節點的 expanded(展開)/collapsed (關閉)狀态.

append

param

附加一個節點到父節點. 'param' 參數包含以下屬性:

parent:父節點id , 如果沒有配置設定, 附加作為根節點.

data: 數組, 節點資料.

remove

移除一個節點和其子節點.

refresh

重新整理特定的節點.

beginEdit

開始編輯一個節點.

endEdit

結束編輯一個節點.

cancelEdit

取消編輯一個節點.

getEditors

得到特定行編輯器.每一個編輯器都有以下屬性:

actions:編輯器可以做的動作.

target: 目标編輯器jQuery對象.

field:字段名.

type:編輯器類型.

getEditor

得到特定的編輯器, options 包含兩個屬性:

id:行節點id.

field: 字段名.

以上知識對于充分了解并應用TreeGrid非常的重要，對于不明白的童鞋可以看下！下面分享如何使用EasyUI的TreeGrid控件進行我們的組織機構管理的開發，當然還涉及到其他的知識點，在前面的文章已有介紹，不明白的可以看下前面的文章，這兒重在說明一些方法，當然大家也可交流讨論，提出你們在開發過程中使用的常用方式方法。

　　一、“組織機構管理”主界面UI的ASPX代碼如下：　　

<code><%@ Page Language=</code><code>"C#"</code> <code>MasterPageFile=</code><code>"~/Site.Master"</code> <code>AutoEventWireup=</code><code>"true"</code> <code>CodeBehind=</code><code>"OrganizeAdmin.aspx.cs"</code> <code>Inherits=</code><code>"RDIFramework.WebApp.Modules.OrganizeAdmin"</code> <code>%></code>

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

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

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

<code> </code><code><%=</code><code>base</code><code>.BuildToolBarButtons()%></code>

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

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

　可以看到，代碼非常的簡潔，使用EasyUI開發的好處就在于此，不需要你拖動服務端的控件等這種正常的Asp.NET開發方式，對于這種開發方式的好處不言而喻。

　　綁定目前登入使用者所擁有的功能按鈕清單代碼如下：　

<code> </code><code>/// 獲得頁面的權限</code>

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

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

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

<code> </code><code>this</code><code>.permissionMove = </code><code>this</code><code>.IsAuthorized(</code><code>"OrganizeManagement.Move"</code><code>);</code>

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

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

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

<code> </code><code>this</code><code>.permissionUserOrganizePermission = </code><code>this</code><code>.IsAuthorized(</code><code>"OrganizeManagement.UserOrganizePermission"</code><code>);</code>

<code> </code><code>this</code><code>.permissionRolerOrganizePermission = </code><code>this</code><code>.IsAuthorized(</code><code>"OrganizeManagement.RolerOrganizePermission"</code><code>);</code>

<code> </code><code>/// 加載工具欄</code>

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

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

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

<code> </code><code>string</code> <code>linkbtn_template = </code><code>"<a id=\"btn{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(</code><code>string</code><code>.Format(linkbtn_template, </code><code>"Add"</code><code>, </code><code>"icon-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(</code><code>string</code><code>.Format(linkbtn_template, </code><code>"Edit"</code><code>, </code><code>"icon-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(</code><code>string</code><code>.Format(linkbtn_template, </code><code>"Delete"</code><code>, </code><code>"icon-delete0"</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(</code><code>string</code><code>.Format(linkbtn_template, </code><code>"MoveTo"</code><code>, </code><code>"icon-shape_move_forwards"</code><code>, permissionMove ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"移動選中的組織機構"</code><code>, </code><code>"移動"</code><code>));</code>

<code> </code><code>sb.Append(</code><code>string</code><code>.Format(linkbtn_template, </code><code>"Export"</code><code>, </code><code>"icon-export"</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(</code><code>string</code><code>.Format(linkbtn_template, </code><code>"UserOrganizePermission"</code><code>, </code><code>"icon-layout_key"</code><code>, permissionUserOrganizePermission ? </code><code>""</code> <code>: </code><code>"disabled=\"True\""</code><code>, </code><code>"設定使用者組織機構權限"</code><code>, </code><code>"使用者組織機構權限"</code><code>));</code>

<code> </code><code>sb.Append(</code><code>string</code><code>.Format(linkbtn_template, </code><code>"RoleOrganizePermission"</code><code>, </code><code>"icon-ruby_key"</code><code>, permissionRolerOrganizePermission ? </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>

添加組織機構界面視窗如下：

在添加組織機構界面，主負責人，副主管資料域的綁定控件使用的是“ComboGrid"控件，綁定的代碼如下：

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

<code> </code><code>top.$(</code><code>'#txt_Manager,#txt_AssistantManager'</code><code>).combogrid({</code>

<code> </code><code>panelWidth: 320,</code>

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

<code> </code><code>textField: </code><code>'RealName'</code><code>,</code>

<code> </code><code>url: </code><code>'Modules/handler/UserAdminHandler.ashx?action=GetUserListByPage'</code><code>,</code>

<code> </code><code>sortName: </code><code>'SortCode'</code><code>,</code>

<code> </code><code>sortOrder: </code><code>'asc'</code><code>,</code>

<code> </code><code>fitColumns: </code><code>true</code><code>,</code>

<code> </code><code>showPageList: </code><code>false</code><code>,</code>

<code> </code><code>striped: </code><code>true</code><code>,</code>

<code> </code><code>pagination: </code><code>true</code><code>,</code>

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

<code> </code><code>pageSize: 10,</code>

<code> </code><code>pageList: [10, 20, 30, 50],</code>

<code> </code><code>method: </code><code>'post'</code><code>,</code>

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

<code> </code><code>{ title: </code><code>'登入名'</code><code>, field: </code><code>'UserName'</code><code>, width: 60, sortable: </code><code>true</code> <code>},</code>

<code> </code><code>{ title: </code><code>'使用者名'</code><code>, field: </code><code>'RealName'</code><code>, width: 70 }</code>

”修改組織機構“代碼如下：

<code>EditOrganize: </code><code>function</code> <code>() { </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>//功能代碼邏輯...</code>

<code> </code><code>var</code> <code>row = mygrid.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-edit'</code><code>, width: 750, height: 520,</code>

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

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

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

<code> </code><code>pubMethod.bindComboGrid();</code>

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

<code> </code><code>top.$(</code><code>'#txt_ShortName'</code><code>).val(row.ShortName);</code>

<code> </code><code>top.$(</code><code>'#txt_ParentId'</code><code>).combotree(</code><code>'setValue'</code><code>, row.ParentId);</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_Manager'</code><code>).combogrid(</code><code>'setValue'</code><code>, row.Manager);</code>

<code> </code><code>top.$(</code><code>'#txt_AssistantManager'</code><code>).combogrid(</code><code>'setValue'</code><code>, row.AssistantManager);</code>

<code> </code><code>top.$(</code><code>'#txt_OuterPhone'</code><code>).val(row.OuterPhone);</code>

<code> </code><code>top.$(</code><code>'#txt_InnerPhone'</code><code>).val(row.InnerPhone);</code>

<code> </code><code>top.$(</code><code>'#txt_Postalcode'</code><code>).val(row.Postalcode);</code>

<code> </code><code>top.$(</code><code>'#txt_Address'</code><code>).val(row.Address);</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_IsInnerOrganize'</code><code>).attr(</code><code>'checked'</code><code>, row.IsInnerOrganize == </code><code>"1"</code><code>);</code>

<code> </code><code>top.$(</code><code>'#txt_Description'</code><code>).val(row.Description);</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>vparentid = top.$(</code><code>'#txt_ParentId'</code><code>).combobox(</code><code>'getValue'</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>vmanager = top.$(</code><code>'#txt_Manager'</code><code>).combogrid(</code><code>'getText'</code><code>);</code>

<code> </code><code>var</code> <code>vassistantmanager = top.$(</code><code>'#txt_AssistantManager'</code><code>).combogrid(</code><code>'getText'</code><code>);</code>

<code> </code><code>var</code> <code>query = </code><code>'action=EditOrganize&vparentid='</code> <code>+ vparentid + </code><code>'&vcategory='</code> <code>+ vcategory + </code><code>'&KeyId='</code> <code>+ row.Id + </code><code>'&vmanager='</code> <code>+ vmanager + </code><code>'&vassistantmanager='</code> <code>+ vassistantmanager + </code><code>'&'</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>mygrid.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>

<code>DeleteOrganize: function () { </code><code>//删除組織機構</code>

<code> </code><code>var</code> <code>childs = $(</code><code>'#organizeGrid'</code><code>).treegrid(</code><code>'getChildren'</code><code>, row.Id);</code>

<code> </code><code>if</code> <code>(childs.length > 0) {</code>

<code> </code><code>$.messager.alert(</code><code>'警告提示'</code><code>, </code><code>'目前所選有子節點資料，不能删除。'</code><code>, </code><code>'warning'</code><code>);</code>

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

<code> </code><code>var</code> <code>query = </code><code>'action=DeleteOrganize&KeyId='</code> <code>+ row.Id;</code>

<code> </code><code>$.messager.confirm(</code><code>'詢問提示'</code><code>, </code><code>'确認要删除選中的組織機構嗎？'</code><code>, function (data) {</code>

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

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

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

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

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

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

<code> </code><code>msg.warning(</code><code>'請選擇要删除的組織機構!'</code><code>);</code>

　在上圖中，我們可以看到對使用者“陳俊熙”設定了他可以通路的組織機構，我們現在以他的使用者“wikstone”登入系統，可以看到目前使用者隻能看到對應的組織機構了，如下圖所示：

　　使用者-組織機構權限設定代碼如下：

<code>SetUserOrganizePermission: </code><code>function</code> <code>() { </code><code>//設定使用者組織機構權限</code>

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

<code> </code><code>var</code> <code>curResourceTargetResourceIds = [];</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-layout_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>onLoad: </code><code>function</code> <code>() {</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/OrganizeAdminHander.ashx?action=treedata'</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>curResourceTargetResourceIds = [];</code>

<code> </code><code>var</code> <code>query = </code><code>'action=GetPermissionScopeTargetIds'</code>

<code> </code><code>+ </code><code>'&resourceCategory=PiUser&resourceId='</code> <code>+ rowData.Id</code>

<code> </code><code>+ </code><code>'&targetCategory=PiOrganize'</code><code>;</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>targetResourceTree = top.$(</code><code>'#rightnav'</code><code>);</code>

<code> </code><code>targetResourceTree.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>curResourceTargetResourceIds = data.split(</code><code>','</code><code>);</code>

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

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

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

<code> </code><code>var</code> <code>allSelectTargetResourceIds = permissionMgr.getSelectedResource().split(</code><code>','</code><code>);</code>

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

<code> </code><code>var</code> <code>revokeResourceIds = </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 < curResourceTargetResourceIds.length) {</code>

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

<code> </code><code>revokeResourceIds += curResourceTargetResourceIds[flagRevoke] + </code><code>','</code><code>; </code><code>//得到收回的權限清單</code>

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

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

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

<code> </code><code>grantResourceIds += allSelectTargetResourceIds[flagGrant] + </code><code>','</code><code>; </code><code>//得到授予的權限清單</code>

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

<code> </code><code>var</code> <code>query = </code><code>'action=GrantRevokePermissionScopeTargets&resourceId='</code> <code>+ top.$(</code><code>'#leftnav'</code><code>).datagrid(</code><code>'getSelected'</code><code>).Id</code>

<code> </code><code>+ </code><code>'&resourceCategory=PiUser&targetCategory=PiOrganize'</code>

<code> </code><code>+ </code><code>'&grantTargetIds='</code> <code>+ grantResourceIds + </code><code>"&revokeTargetIds="</code> <code>+ revokeResourceIds;</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>

本文轉自yonghu86 51CTO部落格，原文連結：http://blog.51cto.com/yonghu/1321302，如需轉載請自行聯系原作者

使用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多任務上傳添加進度條