<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

<table id="tt" ></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} 
    ]] 
});

　　属性

<%@ 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>

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;
    }

“用户-组织机构权限设置”功能主要用于设置特定用户可以访问的组织机构。有时我们会有这样的应用，某些数据属于某个组织机构内部的数据，只能指定其他组织机构特定的用户访问，那么通过此设置，我们就可以轻松的控制特定的用户访问指定的组织机构，“用户-组织机构权限设置”如下图所示。

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);
                    }
                });
            }
        });
    }

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

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