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

　　使用示例

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

　　事件

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

 　　方法　　

$('#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" %>
<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);
                    }
                });
            }
        });

    }

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

相关资源分享 

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

2、Jquery EasyUI官方网站

3、Jquery学习官方网站

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

5、Jquery权威指南下载

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

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

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