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

使用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 允许你创建定制的,异步加载展开行数据,和显示分层的数据在多列中。如下图所示：

使用示例

     
         
             
Task Name
             
Persons
             
Begin Date
             
End Date
         
     
 

　使用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新增的属性.

事件

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

方法

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

$('#tt').treegrid('reload', 2);       // 重新加载指定id值是2的行  $('#tt').treegrid('reload');  // 重新加载所有行  

// 添加一些节点到选中节点  var node = $('#tt').treegrid('getSelected');  $('#tt').treegrid('append',{   parent: node.id,  // 节点有一个'id'值,定义是通过'idField'属性        data: [{                id: '073',              name: 'name73'          }]  });  

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

　　一、"组织机构管理"主界面UI的ASPX代码如下：　　

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

　可以看到，代码非常的简洁，使用EasyUI开发的好处就在于此，不需要你拖动服务端的控件等这种常规的Asp.NET开发方式，对于这种开发方式的好处不言而喻。

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

/// 
        /// 获得页面的权限        /// 
        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");        }        /// 
        /// 加载工具栏        /// 
        /// 工具栏HTML        public override string BuildToolBarButtons()        {            StringBuilder sb = new StringBuilder();            string linkbtn_template = "{4}";            sb.Append("刷新 ");            sb.Append("
 ");            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("
 ");            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("
 ");            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);                    }                });            }        });    }

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

相关资源分享

1、基于.NET的快速信息化系统开发整合框架 -RDIFramework.NET-系统目录

2、Jquery EasyUI官方网站

3、Jquery学习官方网站

4、Jquery EasyUI本地实例文件（如果嫌官网速度过慢，可以下载这个看）

5、Jquery权威指南下载

6、Jquery权威指南源代码下载

7、Jquery EasyUI 1.3中文.chm文件下载

8、JavaScript权威指南（第六版）中文版（强烈推荐）在线观看

作者： EricHu

出处： http://www.cnblogs.com/huyong

微博： 腾讯

Email: [email protected]

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 联系我，非常感谢。