<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 聯系我，非常感謝。