原文地址:http://www.cnblogs.com/huyong/p/3404647.htmljavascript
在上三篇文章php
《使用Jquery+EasyUI進行框架項目開發案例講解之一---員工管理源碼分享》 css
《使用Jquery+EasyUI 進行框架項目開發案例講解之二---用戶管理源碼分享》html
《使用Jquery+EasyUI 進行框架項目開發案例講解之三---角色管理源碼分享》java
咱們分享了使用Jquery EasyUI來進行ASP.NET項目的開發的相關方法,每個模塊都有其共用性,細細理解與掌握,我相信使用EasyUI進行開發仍是至關方便的。node
接下來我分享「組織機構管理」模塊主要的核心代碼組織機構管理使用的EasyUI控件,主要是EasyUI的TreeGrid控件,組織機構管理主界面以下圖所示:jquery
在進行代碼講解以前,咱們先來回顧一個TreeGrid相關的知識。easyUI TreeGrid 從$.fn.datagrid.defaults繼承,覆蓋默認值$.fn.treegrid.defaults。treegrid 是使用顯示分層數據在grid中,treegrid 是基於datagrid和關聯treeview 和關聯可編輯的grid,treegrid 容許你建立定製的,異步加載展開行數據,和顯示分層的數據在多列中。以下圖所示:ajax
<table id="tt" class="easyui-treegrid" style="width:600px;height:400px" data-options="url:'get_data.aspx',idField:'id',treeField:'name'"> <thead> <tr> <th data-options="field:'name',width:180">Task Name</th> <th data-options="field:'persons',width:60,align:'right'">Persons</th> <th data-options="field:'begin',width:80">Begin Date</th> <th data-options="field:'end',width:80">End Date</th> </tr> </thead> </table>
使用javascript建立treegrid 數據庫
<table id="tt" style="width:600px;height:400px"></table>
$('#tt').treegrid({ url:'get_data.aspx', idField:'id', treeField:'name', columns:[[ {title:'Task Name',field:'name',width:180}, {field:'persons',title:'Persons',width:60,align:'right'}, {field:'begin',title:'Begin Date',width:80}, {field:'end',title:'End Date',width:80} ]] });
屬性從 datagrid繼承,如下是treegrid新增的屬性.json
Name | Type | Description | Default |
---|---|---|---|
idField | string | 定義鍵字段標識一個tree節點,該項是必須的. | null |
treeField | string | 定義tree節點字段,該項是必須的. | null |
animate | boolean | 定義當節點展開/關閉的時候,是否顯示動畫效果. | false |
loader | function(param,success,error) | 定義如何從遠程服務器端加載數據. 返回false將終止這個動做. 這個函數提供一下參數 : param: 傳遞給遠程服務器的參數對象. success(data): 當檢索數據成功以後執行的回調函數. error(): 當檢索數據失敗的時候調用的回調函數. |
json loader |
loadFilter | function(data,parentId) | 返回過濾後的顯示數據. |
事件從datagrid繼承, 如下是datagrid新增事件.
Name | Parameters | Description |
---|---|---|
onClickRow | row | 當用戶點擊一個節點時觸發. |
onDblClickRow | row | 當用戶雙擊一個節點時觸發. |
onClickCell | field,row | 當用戶點擊一個表格的時觸發. |
onDblClickCell | field,row | 當用戶雙擊一個表格的時觸發. |
onBeforeLoad | row, param | 一個請求去加載數據以前觸發, 返回false將取消加載動做. |
onLoadSuccess | row, data | 數據加載成功以後觸發. |
onLoadError | arguments | 數據加載失敗以後觸發,arguments 參數和jQuery.ajax的error函數同樣. |
onBeforeExpand | row | 節點展開以前觸發,返回false將取消展開動做. |
onExpand | row | 節點展開後觸發. |
onBeforeCollapse | row | 節點摺疊以前觸發,返回false取消折疊動做. |
onCollapse | row | 節點摺疊後觸發. |
onContextMenu | e, row | 在節點上右鍵點擊觸發. |
onBeforeEdit | row | 用戶開始編輯一個節點時觸發. |
onAfterEdit | row,changes | 用戶結束編輯節點時觸發. |
onCancelEdit | row | 用戶取消編輯節點時觸發. |
方法
許多方法提供一個參數,參數名爲id, 這個參數指明tree節點值.
Name | Parameter | Description |
---|---|---|
options | none | 返回treegrid的 options對象. |
resize | options | 設置treegrid 大小,options包含兩個屬性: width: treegrid新的寬度. height: treegrid新的高度. |
fixRowHeight | id | 固定特定行高度. |
loadData | data | 加載 treegrid 數據. |
reload | id | 從新加載treegrid 數據.若是傳遞了id參數, 從新加載特定的tree行, 其餘的從新加載全部tree行. 示例代碼: $('#tt').treegrid('reload', 2); // 從新加載指定id值是2的行 $('#tt').treegrid('reload'); // 從新加載全部行 |
reloadFooter | footer | 從新加載頁腳數據. |
getData | none | 獲得加載數據. |
getFooterRows | none | 獲得頁腳數據. |
getRoot | none | 獲得根節點, 返回的是節點對象 |
getRoots | none | 獲得根節點, 返回的是節點數組. |
getParent | id | 獲得父節點. |
getChildren | id | 獲得子節點. |
getSelected | none | 獲得選中節點並返回它, 若是沒有選中節點返回null. |
getSelections | none | 獲得全部的選中節點. |
getLevel | id | 獲得特定的節點的層級. |
find | id | 查找特定的節點和返回節點數據. |
select | id | 選中一個節點. |
unselect | id | 取消選中一個節點. |
selectAll | none | 選中全部節點. |
unselectAll | none | 取消選中全部節點. |
collapse | id | 摺疊一個節點. |
expand | id | 展開一個節點. |
collapseAll | id | 摺疊全部節點. |
expandAll | id | 展開全部節點. |
expandTo | id | 展開從根節點到指定的節點. |
toggle | id | 切換節點的 expanded(展開)/collapsed (關閉)狀態. |
append | param | 附加一個節點到父節點. 'param' 參數包含如下屬性: parent:父節點id , 若是沒有分配, 附加做爲根節點. data: 數組, 節點數據. 示例代碼: // 添加一些節點到選中節點 var node = $('#tt').treegrid('getSelected'); $('#tt').treegrid('append',{ parent: node.id, // 節點有一個'id'值,定義是經過'idField'屬性 data: [{ id: '073', name: 'name73' }] }); |
remove | id | 移除一個節點和其子節點. |
refresh | id | 刷新特定的節點. |
beginEdit | id | 開始編輯一個節點. |
endEdit | id | 結束編輯一個節點. |
cancelEdit | id | 取消編輯一個節點. |
getEditors | id | 獲得特定行編輯器.每個編輯器都有如下屬性: actions:編輯器能夠作的動做. target: 目標編輯器jQuery對象. field:字段名. type:編輯器類型. |
getEditor | options | 獲得特定的編輯器, options 包含兩個屬性: id:行節點id. field: 字段名. |
以上知識對於充分理解並應用TreeGrid很是的重要,對於不明白的童鞋能夠看下!下面分享如何使用EasyUI的TreeGrid控件進行咱們的組織機構管理的開發,固然還涉及到其餘的知識點,在前面的文章已有介紹,不明白的能夠看下前面的文章,這兒重在說明一些方法,固然你們也可交流討論,提出大家在開發過程當中使用的經常使用方式方法。
1、「組織機構管理」主界面UI的ASPX代碼以下:
<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="OrganizeAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.OrganizeAdmin" %> <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="organizeGrid"></table> <script type="text/javascript" src="../Scripts/Business/OrganizeAdmin.js?v=5"></script> </asp:Content>
能夠看到,代碼很是的簡潔,使用EasyUI開發的好處就在於此,不須要你拖動服務端的控件等這種常規的Asp.NET開發方式,對於這種開發方式的好處不言而喻。
綁定當前登陸用戶所擁有的功能按鈕列表代碼以下:
/// <summary> /// 得到頁面的權限 /// </summary> private void GetPermission() { this.permissionAdd = this.IsAuthorized("OrganizeManagement.Add"); this.permissionEdit = this.IsAuthorized("OrganizeManagement.Edit"); this.permissionMove = this.IsAuthorized("OrganizeManagement.Move"); this.permissionDelete = this.IsAuthorized("OrganizeManagement.Delete"); this.permissionExport = this.IsAuthorized("OrganizeManagement.Export"); //this.permissionAccredit = this.IsAuthorized("UserManagement.Accredit"); this.permissionUserOrganizePermission = this.IsAuthorized("OrganizeManagement.UserOrganizePermission"); this.permissionRolerOrganizePermission = this.IsAuthorized("OrganizeManagement.RolerOrganizePermission"); } /// <summary> /// 加載工具欄 /// </summary> /// <returns>工具欄HTML</returns> public override string BuildToolBarButtons() { StringBuilder sb = new StringBuilder(); string linkbtn_template = "<a id=\"btn{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-add", permissionAdd ? "" : "disabled=\"True\"", "新增組織機構", "新增")); sb.Append(string.Format(linkbtn_template, "Edit", "icon-edit", permissionEdit ? "" : "disabled=\"True\"", "修改選中的組織機構", "修改")); sb.Append(string.Format(linkbtn_template, "Delete", "icon-delete0", permissionDelete ? "" : "disabled=\"True\"", "刪除選中組織機構", "刪除")); sb.Append("<div class='datagrid-btn-separator'></div> "); sb.Append(string.Format(linkbtn_template, "MoveTo", "icon-shape_move_forwards", permissionMove ? "" : "disabled=\"True\"", "移動選中的組織機構", "移動")); sb.Append(string.Format(linkbtn_template, "Export", "icon-export", permissionExport ? "" : "disabled=\"True\"", "導出組織機構數據", "導出")); sb.Append("<div class='datagrid-btn-separator'></div> "); sb.Append(string.Format(linkbtn_template, "UserOrganizePermission", "icon-layout_key", permissionUserOrganizePermission ? "" : "disabled=\"True\"", "設置用戶組織機構權限", "用戶組織機構權限")); sb.Append(string.Format(linkbtn_template, "RoleOrganizePermission", "icon-ruby_key", permissionRolerOrganizePermission ? "" : "disabled=\"True\"", "設置角色組織機構權限", "角色組織機構權限")); return sb.ToString(); }
綁定TreeGridJS代碼以下:
$(function () { autoResize({ dataGrid: '#organizeGrid', gridType: 'treegrid', callback: mygrid.bindGrid, height: 5 }); $('#btnAdd').click(OrganizeAdminMethod.AddOrganize); //新增組織機構 $('#btnEdit').click(OrganizeAdminMethod.EditOrganize); //修改組織機構 $('#btnDelete').click(OrganizeAdminMethod.DeleteOrganize); //刪除組織機構 $('#btnMoveTo').click(OrganizeAdminMethod.MoveTo); //移動組織機構 $('#btnExport').click(OrganizeAdminMethod.ExportOrganize); //導出組織機構數據 $('#btnUserOrganizePermission').click(OrganizeAdminMethod.SetUserOrganizePermission); //設置用戶組織機構權限 $('#btnRoleOrganizePermission').click(OrganizeAdminMethod.SetRoleOrganizePermission); //設置角色組織機構權限 $('#a_refresh').click(function () { //刷新 mygrid.reload(); }); }); var mygrid = { bindGrid: function (winsize) { navgrid = $('#organizeGrid').treegrid({ toolbar: '#toolbar', title: '組織機構列表', iconCls: 'icon icon-org', width: winsize.width, height: winsize.height, nowrap: true, rownumbers: true, animate: true, resizable: true, collapsible: false, url: actionUrl, idField: 'Id', treeField: 'FullName', frozenColumns: [[ { title: '組織機構名稱', field: 'FullName', width: 200 }, { title: '編碼', field: 'Code', width: 100 } ]], columns: [[ { title: '簡稱', field: 'ShortName', width: 120 }, { title: '主負責人', field: 'Manager', width: 70, align: 'center' }, { title: '電話', field: 'OuterPhone', width: 100, align: 'center' }, { title: '傳真', field: 'Fax', width: 100, align: 'center' }, { title: '有效', field: 'Enabled', width: 50, align: 'center', formatter: imgcheckbox }, { title: '排序', field: 'SortCode', width: 80, align: 'center' }, { title: '備註', field: 'Description', width: 300 }, { title: 'ParentId', field: 'ParentId', hidden: true }, { title: 'Category', field: 'Category', hidden: true }, { title: 'InnerPhone', field: 'InnerPhone', hidden: true }, { title: 'Postalcode', field: 'Postalcode', hidden: true }, { title: 'Address', field: 'Address', hidden: true }, { title: 'Web', field: 'Web', hidden: true }, { title: 'AssistantManager', field: 'AssistantManager', hidden: true }, { title: 'IsInnerOrganize', field: 'IsInnerOrganize', hidden: true } ]] }); }, 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="禁用" />'; }
添加組織機構界面窗口以下:
在添加組織機構界面,主負責人,副主管數據域的綁定控件使用的是「ComboGrid"控件,綁定的代碼以下:
bindComboGrid: function () { top.$('#txt_Manager,#txt_AssistantManager').combogrid({ panelWidth: 320, idField: 'Id', textField: 'RealName', url: 'Modules/handler/UserAdminHandler.ashx?action=GetUserListByPage', sortName: 'SortCode', sortOrder: 'asc', fitColumns: true, showPageList: false, striped: true, pagination: true, rownumbers: true, fitColumns: true, pageSize: 10, pageList: [10, 20, 30, 50], method: 'post', columns: [[ { title: '登陸名', field: 'UserName', width: 60, sortable: true }, { title: '用戶名', field: 'RealName', width: 70 } ]] });
修改組織機構界面以下:
」修改組織機構「代碼以下:
EditOrganize: function () { //修改組織機構 if ($(this).linkbutton('options').disabled == true) { return; } //功能代碼邏輯... var row = mygrid.selected(); if (row) { var editDailog = top.$.hDialog({ href: formUrl, title: '修改組織機構', iconCls: 'icon-edit', width: 750, height: 520, onLoad: function () { pubMethod.bindCtrl(row.Id); pubMethod.bindCategory(); pubMethod.bindComboGrid(); top.$('#txt_Code').val(row.Code); top.$('#txt_FullName').val(row.FullName); top.$('#txt_ShortName').val(row.ShortName); top.$('#txt_ParentId').combotree('setValue', row.ParentId); top.$('#txt_Category').combobox('setValue', row.Category); top.$('#txt_Manager').combogrid('setValue', row.Manager); top.$('#txt_AssistantManager').combogrid('setValue', row.AssistantManager); top.$('#txt_OuterPhone').val(row.OuterPhone); top.$('#txt_InnerPhone').val(row.InnerPhone); top.$('#txt_Fax').val(row.Fax); top.$('#txt_Postalcode').val(row.Postalcode); top.$('#txt_Web').val(row.Web); top.$('#txt_Address').val(row.Address); top.$('#chk_Enabled').attr('checked', row.Enabled == "1"); top.$('#chk_IsInnerOrganize').attr('checked', row.IsInnerOrganize == "1"); top.$('#txt_Description').val(row.Description); }, 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 vparentid = top.$('#txt_ParentId').combobox('getValue'); var vcategory = top.$('#txt_Category').combobox('getValue'); var vmanager = top.$('#txt_Manager').combogrid('getText'); var vassistantmanager = top.$('#txt_AssistantManager').combogrid('getText'); var query = 'action=EditOrganize&vparentid=' + vparentid + '&vcategory=' + vcategory + '&KeyId=' + row.Id + '&vmanager=' + vmanager + '&vassistantmanager=' + vassistantmanager + '&' + top.$('#uiform').serialize(); $.ajaxjson(actionUrl, query, function (d) { if (d.Success) { msg.ok(d.Message); editDailog.dialog('close'); mygrid.reload(); } else { MessageOrRedirect(d); } }); } } }); } else { msg.warning('請選擇要修改的組織機構!'); return false; } return false; }
刪除組織機構代碼以下:
DeleteOrganize: function () { //刪除組織機構 if ($(this).linkbutton('options').disabled == true) { return; } //功能代碼邏輯... var row = mygrid.selected(); if (row != null) { var childs = $('#organizeGrid').treegrid('getChildren', row.Id); if (childs.length > 0) { $.messager.alert('警告提示', '當前所選有子節點數據,不能刪除。', 'warning'); return false; } var query = 'action=DeleteOrganize&KeyId=' + row.Id; $.messager.confirm('詢問提示', '確認要刪除選中的組織機構嗎?', function (data) { if (data) { $.ajaxjson(actionUrl, query, function (d) { if (d.Success) { msg.ok(d.Message); mygrid.reload(); } else { MessageOrRedirect(d); } }); } else { return false; } }); } else { msg.warning('請選擇要刪除的組織機構!'); return false; } return false; }
「用戶-組織機構權限設置」功能主要用於設置特定用戶能夠訪問的組織機構。有時咱們會有這樣的應用,某些數據屬於某個組織機構內部的數據,只能指定其餘組織機構特定的用戶訪問,那麼經過此設置,咱們就能夠輕鬆的控制特定的用戶訪問指定的組織機構,「用戶-組織機構權限設置」以下圖所示。
在上圖中,咱們能夠看到對用戶「陳俊熙」設置了他能夠訪問的組織機構,咱們如今以他的用戶「wikstone」登陸系統,能夠看到當前用戶只能看到對應的組織機構了,以下圖所示:
用戶-組織機構權限設置代碼以下:
SetUserOrganizePermission: function () { //設置用戶組織機構權限 if ($(this).linkbutton('options').disabled == true) { return; } //功能代碼邏輯... var userGrid; var curResourceTargetResourceIds = []; var setDialog = top.$.hDialog({ title: '(用戶-組織機構)權限設置', width: 670, height: 600, iconCls: 'icon-layout_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/OrganizeAdminHander.ashx?action=treedata', onSelect: function (node) { top.$('#rightnav').tree('getChildren', node.target); } }); top.$('#leftnav').datagrid('selectRow', 0); }, onSelect: function (rowIndex, rowData) { curResourceTargetResourceIds = []; var query = 'action=GetPermissionScopeTargetIds' + '&resourceCategory=PiUser&resourceId=' + rowData.Id + '&targetCategory=PiOrganize'; $.ajaxtext('handler/PermissionHandler.ashx', query, function (data) { var targetResourceTree = top.$('#rightnav'); targetResourceTree.tree('uncheckedAll'); if (data == '' || data.toString() == '[object XMLDocument]') { return; } curResourceTargetResourceIds = data.split(','); for (var i = 0; i < curResourceTargetResourceIds.length; i++) { var node = targetResourceTree.tree('find', curResourceTargetResourceIds[i]); if (node) targetResourceTree.tree("check", node.target); } }); } }); }, submit: function () { var allSelectTargetResourceIds = permissionMgr.getSelectedResource().split(','); var grantResourceIds = ''; var revokeResourceIds = ''; var flagRevoke = 0; var flagGrant = 0; while (flagRevoke < curResourceTargetResourceIds.length) { if ($.inArray(curResourceTargetResourceIds[flagRevoke], allSelectTargetResourceIds) == -1) { revokeResourceIds += curResourceTargetResourceIds[flagRevoke] + ','; //獲得收回的權限列表 } ++flagRevoke; } while (flagGrant < allSelectTargetResourceIds.length) { if ($.inArray(allSelectTargetResourceIds[flagGrant], curResourceTargetResourceIds) == -1) { grantResourceIds += allSelectTargetResourceIds[flagGrant] + ','; //獲得授予的權限列表 } ++flagGrant; } var query = 'action=GrantRevokePermissionScopeTargets&resourceId=' + top.$('#leftnav').datagrid('getSelected').Id + '&resourceCategory=PiUser&targetCategory=PiOrganize' + '&grantTargetIds=' + grantResourceIds + "&revokeTargetIds=" + revokeResourceIds; $.ajaxjson('handler/PermissionHandler.ashx', query, function (d) { if (d.Data > 0) { msg.ok('設置成功!'); } else { alert(d.Message); } }); } }); }
「角色-組織機構權限設置」功能與「用戶-組織機構權限設置」功能相似,這兒只是作的對角色的控制。(角色-組織機構)權限設置界面以下:。
相關資源分享
一、基於.NET的快速信息化系統開發整合框架 —RDIFramework.NET—系統目錄
四、Jquery EasyUI本地實例文件(若是嫌官網速度過慢,能夠下載這個看)
八、JavaScript權威指南(第六版)中文版(強烈推薦)在線觀看
做者: EricHu 出處: http://www.cnblogs.com/huyong 微博: 騰訊 Email: 406590790@qq.com QQ 交流:406590790
QQ 羣:16653241(已滿) 237326100 平臺博客: 【CSDN】http://blog.csdn.net/chinahuyong 【CNBLOGS】http://www.cnblogs.com/huyong 關於做者:高級工程師、信息系統項目管理師、DBA。專一於微軟平臺項目架構、管理和企業解決方案,多年項目開發與管理經驗,曾屢次組織並開發多個大型項目,精通DotNet,DB(SqlServer、Oracle等)技術。熟悉Java、Delhpi及Linux操做系統,有紮實的網絡知識。在面向對象、面向服務以及數據庫領域有必定的造詣。 若有問題或建議,請多多賜教! 本文版權歸做者和CNBLOGS博客共有,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接,若有問題,能夠經過郵箱或QQ 聯繫我,很是感謝。