欢迎使用CSDN-markdown编辑器

最新推荐文章于 2023-04-17 21:33:21 发布

Shaksper

最新推荐文章于 2023-04-17 21:33:21 发布

阅读量300

点赞数

分类专栏： C# zTree 部门用户树异步加载 JS 文章标签： ztree 部门和用户树树

本文链接：https://blog.csdn.net/jiyiliuxu/article/details/49561523

版权

C# 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

zTree 部门用户树异步加载

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

ztree 加载部门和用户树

最近的项目中客户要以树的形式展示部门及其下属的用户，从网上看到ztree功能强大，就用了一下。
废话不多说，直接上代码。

<！–由于本人是从事.net开发，所有的代码均为c#及JS–>

总体思路为首先加载部门表，然后以异步加载的形式加载用户

1、前台展示：
引用脚本：

 <link href="../lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../lib/zTree_v3/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
    <script src="../lib/zTree_v3/js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>
    <script src="../lib/zTree_v3/js/jquery.ztree.exedit-3.5.min.js" type="text/javascript"></script>
    <script src="../lib/zTree_v3/js/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>

<body style="overflow: hidden;">
    <div id="layout" style="margin: 2px; margin-right: 3px;">
        <div position="left" id="mainmenu" title="用户角色">
            <div id="tabcontainer" style="margin: 2px;">

                   <div id="menuContent"  style="display:none; overflow:auto;:2px auto; width:inherit;height:99%;" title="用户">
    <ul id="tree" class="ztree" style="margin-top:0; width:auto;height:400px;"></ul>
                </div>
              请选择部门:<input type="text" id="selDepartment" style="margin: 2px 0px;width:99%;height:99%;" onclick="showMenu()"/>

        </div>
        </div>
</div>

<script type="text/javascript">

//选中用户和角色ID
        var selectedUserID, selectedRoleID;
 //部门ID
        var _DepartmentId;
        //用户名
        var userName;
/配置ztree树
        var setting = {
            view: {
                dblClickExpand: false,
                height:500
            },
            async: {//异步加载配置
                enable: true,
                url:"Ajax_User.ashx",
                autoParam:["id=_DepartmentId"],  //自动传值，后台接收到的为_DepartmentId
                otherParam:{ "view": "GetUserByDepId"},//其他值

            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick,
            }
        };
        var zTree;
        var treeNodes;

   $(document).ready(function () {
             showMenu();
            //初始化部门树
            $.post("Ajax_Department.aspx", { cmd: "GetTree" }, function (data) {
                if (data != "") {
                    var zNodes = JSON2.parse(data);
                    $.fn.zTree.init($("#tree"), setting, zNodes);
                    zTree = $.fn.zTree.getZTreeObj("tree");
                    var nodes = zTree.getNodes();
                }
            });
        });
        //树的点击事件
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree"),
            nodes = zTree.getSelectedNodes(),
            v = "";
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = $("#selDepartment");
            cityObj.attr("value", v);
            var userid = "";
            if (treeNode.isParent) {
                alert("请先选择一个子节点");
                return;
            }

        //展示树
        function showMenu() {
            var cityObj = $("#selDepartment");
            var cityOffset = $("#selDepartment").offset();
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        }
 </script>片

2、后台获取数据

/获取部门树
 private void  GetTree()
    {
        List<DepartmentInfo> deps = new DepartmentManager().GetTreeDep();
        ZTree zTree = null;//自定义树的类便于向前台传值
        List<ZTree> tlist = new List<ZTree>();
        foreach (DepartmentInfo dep in deps)
        {
            zTree = new ZTree();
            zTree.id = dep.DepID;
            zTree.pId = dep.DepParentID;
            zTree.name =dep.DepName;
            zTree.open = false;
            zTree.isParent = true;//全部部门均为父类，这样便于异步加载用户后操作用户数据
            tlist.Add(zTree);
        }
        Response.Write(tlist.ToJson());
    }

//异步获取用户
private void GetUserByDepId(HttpContext context)
    {
        string depId = context.Request["_DepartmentId"];
        List<User> users =new  UserManager().GetTreeUserWithDep(depId);
        List<ZTree> ztree=new List<ZTree> ();
        foreach (var item in users)
        {
            ZTree zt = new ZTree() { 
            id=item.UserID,
            name=item.UName,
            isParent=false,//设为子节点，便于前台针对用户的操作
            pId=item.DepID,
            open=true//展开用户树
            };
            ztree.Add(zt);
        }
        context.Response.Write(ztree.ToJson());

    }

放出ZTree的API地址：
Demo演示:[http://www.ztree.me/v3/demo.php#_101](http://www.ztree.me/v3/api.php#_101)
API文档:[http://www.ztree.me/v3/api.php](http://www.ztree.me/v3/api.php)