搜索树 ,需要点击两次

linkb 发布于 2017/05/18 16:40
阅读 41
收藏 0

@zTree 你好,想跟你请教个问题:网上找的搜索树代码 效果出来了。可有的条件需要点击两次才能出来

附上代码:

/**
 * Created by linkb on 2017/5/8.
 */
/**
 * 展开树
 * @param treeId
 */
function expand_ztree(treeId) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    treeObj.setting.view.expandSpeed = "";
    treeObj.expandAll(true);
    treeObj.setting.view.expandSpeed = "fast";
}
/**
 * 收起树:只展开根节点下的一级节点
 * @param treeId
 */
function close_ztree(treeId) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    var nodeLength = nodes.length;
    for (var i = 0; i < nodeLength; i++) {
        if (nodes[i].id == '86') {
            //根节点:展开
            treeObj.expandNode(nodes[i], true, false, false);
        } else {
            //非根节点:收起
            treeObj.expandNode(nodes[i], false, true, false);
        }
    }
}

/**
 * 查询树,高亮显示并展示【模糊匹配查询条件的节点s】
 * @param treeId
 * @param searchConditionId 文本框的id
 */
function search_ztree(treeId, searchConditionId) {
    searchByFlag_ztree(treeId, searchConditionId, "");
}

/**
 * 查询树,高亮显示并展示【模糊匹配查询条件的节点s】
 * @param treeId
 * @param searchConditionId     查询条件Id
 * @param flag                  需要高亮显示的节点标识
 */
function searchByFlag_ztree(treeId, searchConditionId, flag) {
    //<1>.查询条件
    var searchCondition = $('#' + searchConditionId).val();
    //<2>.得到模糊匹配查询条件的节点数组集合
    var highlightNodes = new Array();
    if (searchCondition != "") {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
    }
    //<3>.高亮显示并展示【指定节点s】
    highlightAndExpand_ztree(treeId, highlightNodes, flag);
}

/**
 * 高亮显示并展示【指定节点s】
 * @param treeId
 * @param highlightNodes 需要高亮显示的节点数组
 * @param flag           需要高亮显示的节点标识
 */
function highlightAndExpand_ztree(treeId, highlightNodes, flag) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    //<1>. 先把全部节点更新为普通样式
    var treeNodes = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i < treeNodes.length; i++) {
        treeNodes[i].highlight = false;
        treeObj.updateNode(treeNodes[i]);
    }

    expand_ztree(treeId)
    //<2>.收起树, 只展开根节点下的一级节点
    close_ztree(treeId);

    //<3>.把指定节点的样式更新为高亮显示,并展开
    if (highlightNodes != null) {
        for (var i = 0; i < highlightNodes.length; i++) {
            if (flag != null && flag != "") {
                if (highlightNodes[i].flag == flag) {
                    //高亮显示节点,并展开
                    highlightNodes[i].highlight = true;
                    treeObj.updateNode(highlightNodes[i]);
                    //高亮显示节点的父节点的父节点....直到根节点,并展示
                    var parentNode = highlightNodes[i].getParentNode();
                    var parentNodes = getParentNodes_ztree(treeId, parentNode);
                    treeObj.expandNode(parentNodes, true, false, true);
                    treeObj.expandNode(parentNode, true, false, true);

                }
            } else {
                //高亮显示节点,并展开
                highlightNodes[i].highlight = true;
                treeObj.updateNode(highlightNodes[i]);
                //高亮显示节点的父节点的父节点....直到根节点,并展示
                var parentNode = highlightNodes[i].getParentNode();
                var parentNodes = getParentNodes_ztree(treeId, parentNode);
                treeObj.expandNode(parentNodes, true, false, true);
                treeObj.expandNode(parentNode, true, false, true);
                setFontCss_ztree(treeId, highlightNodes[i]);

            }
        }
    }
}

/**
 * 递归得到指定节点的父节点的父节点....直到根节点
 */
function getParentNodes_ztree(treeId, node) {
    if (node != null) {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var parentNode = node.getParentNode();
        treeObj.expandNode(parentNode, true, false, false);
        if (parentNode != null) {
            return getParentNodes_ztree(treeId, parentNode);
        } else {
            return node;
        }
    }
}
/**
 * 设置树节点字体样式
 */
function setFontCss_ztree(treeId, treeNode) {
    if (treeNode.id == 0) {
        //根节点
        return {color: "#333", "font-weight": "bold"};
    } else if (treeNode.isParent == false) {
        //叶子节点
        return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : {
            color: "#333",
            "font-weight": "normal"
        };
    } else {
        //父节点
        return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : {
            color: "#333",
            "font-weight": "normal"
        };
    }
}

加载中
返回顶部
顶部