解决ztree搜索中多级菜单展示不全问题

ztree 官网的中的 Search Nodes 例子中,所有菜单都是连着的,如果出现某个菜单下无子节点,那么在搜索时,此节点便不会自动展开,这里给出对应的增强版代码

var setting = {
        data: {
            key: {
                title: "t"
            },
            simpleData: {
                enable: true
            }
        },
        view: {
            fontCss: getFontCss
        }
    };

    var zNodes =[
        { id:1, pId:0, name:"系统参数",open:true},
        { id:11, pId:1, name:"通用参数"},
        { id:111, pId:11, name:"状态A"},
        { id:112, pId:11, name:"状态B"},
        { id:12, pId:1, name:"日志"},
        { id:121, pId:12, name:"操作类型"},
        { id:122, pId:12, name:"操作结果"},
        { id:1221, pId:122, name:"操作结果1"},
        { id:1222, pId:122, name:"操作结果2"},
        { id:12221, pId:1222, name:"操作结果21"},
        { id:12222, pId:1222, name:"操作结果22"},
        { id:12223, pId:1222, name:"操作结果23"},
        { id:2, pId:0, name:"业务参数",open:true},
        { id:21, pId:2, name:"工单类型"},
        { id:22, pId:2, name:"监控类型"},
        { id:23, pId:22, name:"监控子类型1"},
        { id:24, pId:22, name:"监控子类型2"},
        { id:25, pId:24, name:"监控子子类型1"},
        { id:26, pId:24, name:"监控子子类型2"},
    ];

    var lastValue = '', nodeList = [], fontCss = {};
    function searchNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var value = $.trim(key.val());
        lastValue = value;
        //zTree.expandAll(true);
        $('#treeDemo').html("");
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        if (value != "") {
            nodeList = zTree.getNodesByParamFuzzy("name", value);
        } else {
            nodeList = zTree.getNodesByParamFuzzy("name", "|||||||||||||||");
        }
        updateNodes(true);
    }

    var parentNode = [];
    function updateNodes(highlight) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        parentNode = [];
        for( var i=0, l=nodeList.length; i<l; i++) {
            nodeList[i].highlight = highlight;
            zTree.updateNode(nodeList[i]);
            if (!nodeList[i].isParent && !parentNode.contains(nodeList[i].getParentNode().pId)) {
                zTree.expandNode(nodeList[i].getParentNode(), true, false, true);
                parentNode.push(nodeList[i].getParentNode().pId);
                console.log(nodeList[i].getParentNode().pId);
            } else {
                zTree.expandNode(nodeList[i], true, true, true);
            }
        }
        console.log(parentNode);
    }

    Array.prototype.contains = function (obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    }

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

    var key;
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        key = $("#search_name");
        key.bind("blur", searchNode);
    });

效果演示图 这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值