zTree的使用

一、节点模糊搜索功能：搜索成功后，自动高亮显示并定位、展开搜索到的节点。

二、节点异步加载：1、点击展开时加载数据；2、选中节点时加载数据。

 

前台代码如下：

<script type="text/javascript">

    //ztree设置

    var setting = {

        view: {

            fontCss: getFontCss

        },

        check: {

            enable: true

        },

        data: {

            simpleData: {

                enable: true,

                idKey: "id",

                pIdKey: "pId",

                rootPId: 0

            }

        },

        async: {

            enable: true,

            url: "#{getStudentsJsonUrl}",

            autoParam: ["id", "level"]

        },

        callback: {

            beforeCheck: zTreeBeforeCheck,

            onNodeCreated: zTreeOnNodeCreated,

            beforeExpand: zTreeBeforeExpand

        }

    };



    var reloadFlag = false; //是否重新异步请求

    var checkFlag = true; //是否选中



    //节点展开前

    function zTreeBeforeExpand(treeId, treeNode) {

        reloadFlag = false;

        return true;

    };



    //节点创建后

    function zTreeOnNodeCreated(event, treeId, treeNode) {

        var zTree = $.fn.zTree.getZTreeObj(treeId);

        if (reloadFlag) {

            if (checkFlag) {

                zTree.checkNode(treeNode, true, true);

            }

            if (!treeNode.children) {

                zTree.reAsyncChildNodes(treeNode, "refresh");

            }

        }

    };



    //选中节点前

    function zTreeBeforeCheck(treeId, treeNode) {

        var zTree = $.fn.zTree.getZTreeObj(treeId);

        if (!treeNode.children) {

            reloadFlag = true;

            checkFlag = true;

            zTree.reAsyncChildNodes(treeNode, "refresh");

        }

        return true;

    }



    //页面加载完成

    _run(function () {

        require(['zTree/js/jquery.ztree.all-3.5'], function () {

            $.ajax({

                type: "POST",

                url: "#{getStudentsJsonUrl}",

                success: function (data) {

                    if (data && data.length != 0) { //如果结果不为空

                        $.fn.zTree.init($("#tree"), setting, data);

                    }

                    else { //搜索不到结果



                    }

                }

            });

        });



        //提交

        $("#inputSubmit").click(function () {

            var zTree = $.fn.zTree.getZTreeObj("tree");

            var nodes = zTree.getCheckedNodes(true);

            var ids = "";

            var names = "";

            for (var i = 0; i < nodes.length; i++) { //遍历选择的节点集合

                if (!nodes[i].isParent) {

                    ids += nodes[i].id.replace("level" + nodes[i].level, "") + ",";

                    names += nodes[i].name + ",";

                }

            }

            Simpo.ui.box.hideBox();

            parent.$(".boxFrm").contents().find("#inputRange").val(names.substr(0, names.length - 1));

            parent.$(".boxFrm").contents().find("#hidRange").val(ids.substr(0, ids.length - 1));

        })

    });



    //查找节点

    var lastNodeList = [];

    var lastKey;

    function searchNode() {

        var zTree = $.fn.zTree.getZTreeObj("tree");



        var key = $.trim($("#inputSearchNode").val());

        if (key != "" && key != lastKey) {

            nodeList = zTree.getNodesByParamFuzzy("name", key);

            for (var i = 0, l = lastNodeList.length; i < l; i++) { //上次查询的节点集合取消高亮

                lastNodeList[i].highlight = false;

                zTree.updateNode(lastNodeList[i]);

            }

            zTree.expandAll(false); //全部收缩

            if (nodeList.length > 0) {

                for (var i = 0, l = nodeList.length; i < l; i++) { //遍历找到的节点集合

                    if (nodeList[i].getParentNode()) {

                        zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //展开其父节点

                    }

                    nodeList[i].highlight = true;

                    zTree.updateNode(nodeList[i]);

                }

            }

            zTree.refresh(); // 很重要，否则节点状态更新混乱。

            lastNodeList = nodeList;

            lastKey = key;

        }

    }



    //加载数据

    function loadData() {

        var zTree = $.fn.zTree.getZTreeObj("tree");

        var rootNodes = zTree.getNodes();

        reloadFlag = true;

        checkFlag = false;

        for (var i = 0; i < rootNodes.length; i++) {

            if (!rootNodes[i].children) {

                zTree.reAsyncChildNodes(rootNodes[i], "refresh"); //异步加载

            }

        }

    }



    //全部收缩

    function closeAll() {

        var zTree = $.fn.zTree.getZTreeObj("tree");

        if ($("#inputCloseAll").val() == "全部收缩") {

            zTree.expandAll(false);

            $("#inputCloseAll").val("全部展开")

        }

        else {

            zTree.expandAll(true);

            $("#inputCloseAll").val("全部收缩")

        }

    }



    //高亮样式

    function getFontCss(treeId, treeNode) {

        return (treeNode.highlight) ? { color: "#A60000", "font-weight": "bold"} : { color: "#333", "font-weight": "normal" };

    }

</script>

View Code

    <div style="width: 200px; height: 260px; overflow: auto; border: solid 1px #666;">

        <ul id="tree" class="ztree">

        </ul>

    </div>

View Code

后台代码（后台返回Json数据）：

        public void SelStudent()

        {

            set("getStudentsJsonUrl", to(GetStudentsJson));

        }



        public void GetStudentsJson()

        {

            List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>();



            string level = ctx.Post("level");

            string id = ctx.Post("id");

            if (strUtil.IsNullOrEmpty(id))

            {

                #region 加载班级

                //获取当前登录用户

                Sys_User user = AdminSecurityUtils.GetLoginUser(ctx);

                //获取当前用户关联的老师

                Edu_Teacher teacher = edu_TeacService.FindByUserId(user.Id);

                //获取班级集合

                List<Edu_ClaNameFlow> list = edu_ClaNameFlowService.GetListByTeacherId(teacher.Id);

                foreach (Edu_ClaNameFlow item in list)

                {

                    Dictionary<string, string> dic = new Dictionary<string, string>();

                    dic.Add("id", "level0" + item.Calss.Id.ToString());

                    dic.Add("pId", "0");

                    dic.Add("name", item.Gra.Name + item.Calss.Name);

                    dic.Add("isParent", "true");

                    dicList.Add(dic);

                }

                #endregion

            }

            else

            {

                if (level == "0")

                {

                    //加载学生

                    List<Edu_Student> list = edu_StudService.GetListByClassId(id.Replace("level0", ""));

                    foreach (Edu_Student item in list)

                    {

                        Dictionary<string, string> dic = new Dictionary<string, string>();

                        dic.Add("id", "level1" + item.Id.ToString());

                        dic.Add("pId", id);

                        dic.Add("name", item.Name);

                        dic.Add("isParent", "false");

                        dicList.Add(dic);

                    }

                }

            }



            echoJson(dicList);

        }

View Code