zTree的使用

时间:2014-03-05 16:33:46   收藏:0   阅读:582

一、节点模糊搜索功能:主要是搜索成功后,节点展开与收缩的控制;这里的代码只考虑三级节点,写死的,有待完善。

二、节点异步加载:1、展开节点时加载数据;2、选中节点时加载数据

 

注意:前后台代码并不是对应的,这里只是示意。

 

前台代码如下:

bubuko.com,布布扣
<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
        }
    };

    //节点展开前
    function zTreeBeforeExpand(treeId, treeNode) {
        createFlag = false;
        return true;
    };

    var createFlag = false;
    //节点创建后
    function zTreeOnNodeCreated(event, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        if (createFlag) {
            zTree.checkNode(treeNode, true, true);
            zTree.reAsyncChildNodes(treeNode, "refresh");
        }
    };

    //选中节点前
    function zTreeBeforeCheck(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        if (!treeNode.children) {
            createFlag = 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 = "";
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].level == 2) {
                    ids += nodes[i].id.replace("level2", "") + ",";
                }
            }
            $("#hidIds").val(ids.substr(0, ids.length - 1));
            $("#frm").submit();
        })
    });

    //查找节点
    var lastNodeList = [];
    var lastKey;
    function searchNode() {
        var key = $.trim($("#inputSearchNode").val());
        if (key != "" && key != lastKey) {
            lastKey = key;
            var zTree = $.fn.zTree.getZTreeObj("tree");
            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() && nodeList[i].getParentNode().open == false) {
                        if (nodeList[i].getParentNode().getParentNode() && nodeList[i].getParentNode().getParentNode().open == false) {
                            zTree.expandNode(nodeList[i].getParentNode().getParentNode(), true, null, false);
                        }
                        zTree.expandNode(nodeList[i].getParentNode(), true, null, false);
                    }
                    nodeList[i].highlight = true;
                    zTree.updateNode(nodeList[i]);
                }
            }
            lastNodeList = nodeList;
        }
    }

    function getFontCss(treeId, treeNode) {
        return (treeNode.highlight) ? { color: "#A60000", "font-weight": "bold"} : { color: "#333", "font-weight": "normal" };
    }
</script>
View Code
bubuko.com,布布扣
<div style="width: 200px; height: 260px; overflow: auto; border: solid 1px #666;">
        <ul id="tree" class="ztree">
        </ul>
    </div>
View Code

后台代码(后台返回Json数据):

bubuko.com,布布扣
 public void GetEvaJson()
        {
            List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>();

            //获取第一级
            List<Sys_Evaluation> evaBigList = sys_EvaluationService.findAll<Sys_Evaluation>();
            foreach (Sys_Evaluation eva in evaBigList)
            {
                Dictionary<string, string> dic = new Dictionary<string, string>();
                dic.Add("id", eva.Id.ToString());
                dic.Add("pId", "0");
                dic.Add("name", eva.Name);
                dic.Add("isParent", "true");
                dicList.Add(dic);
            }

            //获取第二级
            List<Sys_EvaluationSub> evaSubList = sys_EvaluationSubService.findAll<Sys_EvaluationSub>();
            StringBuilder sbIds = new StringBuilder();
            foreach (Sys_EvaluationSub evaSub in evaSubList)
            {
                Dictionary<string, string> dic = new Dictionary<string, string>();
                dic.Add("id", "level1" + evaSub.Id.ToString());
                dic.Add("pId", evaSub.Evaluation.Id.ToString());
                dic.Add("name", evaSub.Name);
                dic.Add("isParent", "true");
                dicList.Add(dic);
                sbIds.Append(evaSub.Id + ",");
            }

            //获取第三级
            List<Sys_Evaluationitem> list = sys_EvaluaTionItemService.GetListByIds(sbIds.ToString(0, sbIds.Length - 1));
            foreach (Sys_Evaluationitem item in list)
            {
                Dictionary<string, string> dic = new Dictionary<string, string>();
                dic.Add("id", "level2" + item.Id.ToString());
                dic.Add("pId", "level1" + item.MinTerm.Id.ToString());
                dic.Add("name", item.Name);
                dic.Add("isParent", "false");
                dicList.Add(dic);
            }

            echoJson(dicList);
        }
View Code

zTree的使用,布布扣,bubuko.com

原文:http://www.cnblogs.com/s0611163/p/3581209.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!