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

2025-02-26 技术教程

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

组织机构管理源码分享

在上三篇文章

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

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

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

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

　　接下来我分享“组织机构管理”模块主要的核心代码组织机构管理使用的EasyUI控件，主要是EasyUI的TreeGrid控件，组织机构管理主界面如下图所示：

　在进行代码讲解之前，我们先来回顾一个TreeGrid相关的知识。easyUI TreeGrid 从$.fn.datagrid.defaults继承，覆盖默认值$.fn.treegrid.defaults。treegrid 是使用显示分层数据在grid中,treegrid 是基于datagrid和关联treeview 和关联可编辑的grid,treegrid 允许你创建定制的,异步加载展开行数据,和显示分层的数据在多列中。如下图所示：

使用示例　　通过html标记创建treegrid ,大多数情况下treegrid 遵循相同的结构格式化为datagrid

<table id="tt" class="easyui-treegrid" 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

$('#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新增的属性.

NameTypeDescriptionDefaultidFieldstring定义键字段标识一个tree节点,该项是必须的.nulltreeFieldstring定义tree节点字段,该项是必须的.nullanimateboolean定义当节点展开/关闭的时候,是否显示动画效果.falseloaderfunction(param,success,error)定义如何从远程服务器端加载数据. 返回false将终止这个动作. 这个函数提供一下参数 :
param: 传递给远程服务器的参数对象.
success(data): 当检索数据成功之后执行的回调函数.
error(): 当检索数据失败的时候调用的回调函数.json loaderloadFilterfunction(data,parentId)返回过滤后的显示数据.

事件

　　事件从datagrid继承, 以下是datagrid新增事件.

NameParametersDescriptiononClickRowrow当用户点击一个节点时触发.onDblClickRowrow当用户双击一个节点时触发.onClickCellfield,row当用户点击一个表格的时触发.onDblClickCellfield,row当用户双击一个表格的时触发.onBeforeLoadrow, param一个请求去加载数据之前触发, 返回false将取消加载动作.onLoadSuccessrow, data数据加载成功之后触发.onLoadErrorarguments数据加载失败之后触发,arguments 参数和jQuery.ajax的error函数一样.onBeforeExpandrow节点展开之前触发,返回false将取消展开动作.onExpandrow节点展开后触发.onBeforeCollapserow节点折叠之前触发,返回false取消折叠动作.onCollapserow节点折叠后触发.onContextMenue, row在节点上右键点击触发.onBeforeEditrow用户开始编辑一个节点时触发.onAfterEditrow,changes用户结束编辑节点时触发.onCancelEditrow用户取消编辑节点时触发.

方法

　　许多方法提供一个参数,参数名为id, 这个参数指明tree节点值.

NameParameterDescriptionoptionsnone返回treegrid的 options对象.resizeoptions设置treegrid 大小,options包含两个属性:
width: treegrid新的宽度.
height: treegrid新的高度.fixRowHeightid固定特定行高度.loadDatadata加载 treegrid 数据.reloadid重新加载treegrid 数据.如果传递了id参数, 重新加载特定的tree行, 其他的重新加载所有tree行.

示例代码:

$('#tt').treegrid('reload', 2);// 重新加载指定id值是2的行 $('#tt').treegrid('reload');// 重新加载所有行 reloadFooterfooter重新加载页脚数据.getDatanone得到加载数据.getFooterRowsnone得到页脚数据.getRootnone得到根节点, 返回的是节点对象getRootsnone得到根节点, 返回的是节点数组.getParentid得到父节点.getChildrenid得到子节点.getSelectednone得到选中节点并返回它, 如果没有选中节点返回null.getSelectionsnone得到所有的选中节点.getLevelid得到特定的节点的层级.findid查找特定的节点和返回节点数据.selectid选中一个节点.unselectid取消选中一个节点.selectAllnone选中所有节点.unselectAllnone取消选中所有节点.collapseid折叠一个节点.expandid展开一个节点.collapseAllid折叠所有节点.expandAllid展开所有节点.expandToid展开从根节点到指定的节点.toggleid切换节点的 expanded(展开)/collapsed (关闭)状态.appendparam附加一个节点到父节点. 'param' 参数包含以下属性:
parent:父节点id , 如果没有分配, 附加作为根节点.
data: 数组, 节点数据.
示例代码:

// 添加一些节点到选中节点 var node = $('#tt').treegrid('getSelected'); $('#tt').treegrid('append',{ parent: node.id, // 节点有一个'id'值,定义是通过'idField'属性 data: [{ id: '073', name: 'name73' }] }); removeid移除一个节点和其子节点.refreshid刷新特定的节点.beginEditid开始编辑一个节点.endEditid结束编辑一个节点.cancelEditid取消编辑一个节点.getEditorsid得到特定行编辑器.每一个编辑器都有以下属性:
actions:编辑器可以做的动作.
target: 目标编辑器jQuery对象.
field:字段名.
type:编辑器类型.getEditoroptions得到特定的编辑器, options 包含两个属性:
id:行节点id.
field: 字段名.

以上知识对于充分理解并应用TreeGrid非常的重要，对于不明白的童鞋可以看下！下面分享如何使用EasyUI的TreeGrid控件进行我们的组织机构管理的开发，当然还涉及到其他的知识点，在前面的文章已有介绍，不明白的可以看下前面的文章，这儿重在说明一些方法，当然大家也可交流讨论，提出你们在开发过程中使用的常用方式方法。

　　一、“组织机构管理”主界面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(); }

添加组织机构界面窗口如下：

在添加组织机构界面，主负责人，副主管数据域的绑定控件使用的是“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); } }); } }); }

“角色-组织机构权限设置”功能与“用户-组织机构权限设置”功能类似，这儿只是做的对角色的控制。（角色-组织机构）权限设置界面如下：。