zTree树型组件(expandNode) 根据输入的关键字模糊查询并定位标红显示并且只展开匹配到的子节点的所有父节点

来源:互联网 发布:linux 策略路由 编辑:程序博客网 时间:2024/05/17 10:25

在网上找了下都是些简单就过的,根本找不到问题的解决方案,于是自己 结合zTree的官方API提供的方法来实现 代码如下

绑定树型数据:

function InspectionTemplateInitLeftTree(tree, table) {
        var item_name = $("#ItemName_@(Perfix)").val();
        $.get("@Url.Action("GetAllTreeJson", new { area = "IQC", controller = "InspectionTemplate" })", { itemname: item_name, rand: Math.random() }, function (data) {
            if (data != null) {
                var setting = {
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    view: {
                        fontCss: getFontCss
                    }
                    
                };
                $.fn.zTree.init($("#" + tree), setting, data);
            }
        });
    }

具体实现方法函数:

var lastValue = "", nodeList = [], allParentIds = [], fontCss = {};

//去除重复ID的方法

function unique(arr) {
        var result = [], hash = {};
        for (var i = 0, elem; (elem = arr[i]) != null; i++) {
            if (!hash[elem]) {
                result.push(elem);
                hash[elem] = true;
            }
        }
        return result;
    }

//定位方法
    function searchNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("@(Perfix)treeLeft");
        //debugger;
        var value = $.trim($("#ItemName_@(Perfix)").get(0).value);
        if (lastValue === value) return;
        lastValue = value;
        if (value == "") {
            updateNodes(false);
            lastValue = "";
            zTree.expandAll(false);
            return;
        }
        updateNodes(false);//每次进来都把上一次的状态还原
        allParentIds = [];
        var isLastLev = false;
        nodeList = zTree.getNodesByParamFuzzy("name", value);
        for (var i = 0; i < nodeList.length; i++) {
            if (nodeList[i].pId != null && parseInt(nodeList[i].lev) == 3) {
                isLastLev = true;//判断检索出来的数据是不是最末级数据如果查询出的都是末级则找出其父父级ID
            }
        }
        for (var i = 0; i < nodeList.length; i++) {
            if (nodeList[i].isParent) {
                if (nodeList[i].pId == null) {
                    allParentIds.push(nodeList[i].id);
                }
                else {
                    allParentIds.push(nodeList[i].pId);
                    allParentIds.push(nodeList[i].id);
                }
            }
            else {
                if (isLastLev)//如果查询出的都是末级则找出其父父级ID
                {
                    var ParNode = zTree.getNodeByParam("id", nodeList[i].pId == null ? nodeList[i].id : nodeList[i].pId, null);
                    if (ParNode.pId == null) {
                        allParentIds.push(ParNode.id);
                    }
                    else {
                        allParentIds.push(ParNode.pId);
                    }
                }
                allParentIds.push(nodeList[i].pId == null ? nodeList[i].id : nodeList[i].pId);
                allParentIds.push(nodeList[i].id);
            }
        }
        allParentIds = unique(allParentIds);
        updateNodes(true);
    }
    function updateNodes(highlight) {
        var zTree = $.fn.zTree.getZTreeObj("@(Perfix)treeLeft");
        for (var i = 0; i < allParentIds.length; i++) {
            var node = zTree.getNodeByParam("id", allParentIds[i], null);
            if (node) {
                if (node.name.indexOf($.trim($("#ItemName_@(Perfix)").val())) != -1 || highlight == false) {
                    node.highlight = highlight;
                }
                zTree.updateNode(node);
                zTree.expandNode(node, parseInt(node.lev) == 3 ? false : highlight, false, i == 0 ? true : false, false);//这里用三目运算符来判断只定位第一个找到的元素(即光标定位在第一个元素上效率可以提高数倍)
            }
        }
    }

//定义字体样式
    function getFontCss(treeId, treeNode) {
        return (!!treeNode.highlight) ? { color: "#A60000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };
    }

下面是效果图:

 

 

0 0
原创粉丝点击