Ztree实现模糊查询并点击checkbox回显选中的根结点文本

    码了这么久了,第一次写博客.

    废话不多说了,直接上代码.

    首先是Ztree实现模糊查询,根据关键字查询

function query() {

    var _keywords = $("#orgName").val();
    if ($("#orgName").val() == "输入姓名查询") {
        _keywords = "";
    }
    var shownNodes = [];
    var parentNodesSet = new Set();
    //显示上次搜索后被隐藏的结点
    zTreeObj.showNodes(hiddenNodesFinal);
    //查找不符合条件的叶子节点
    function filter(node) {
        if (!node.isParent && node.name.indexOf(_keywords) != -1) {
            shownNodes.push(node);
            return false;
        }
        return true;
    };
    //获取不符合条件的叶子结点
    hiddenNodes = zTreeObj.getNodesByFilter(filter);
    //放到父节点集合中
    for (var i = 0; i < shownNodes.length; i++) {
        addParentNodes(shownNodes[i]);
    }
    //递归找出所有父节点放到集合中
    function addParentNodes(node) {
        if (node != null) {
            var parentNode = node.getParentNode();
            if (parentNode != null) {
                console.log("parentNode:" + parentNode);
                parentNodesSet.add(parentNode);
                addParentNodes(parentNode);
            }
        } else {
            return;
        }
    }
    //隐藏节点与父节点求差集找出最终应该隐藏的节点
    var a = new Set(hiddenNodes);
    var b = parentNodesSet;
    var differenceABSet = new Set([...a].filter(x => !b.has(x)));
    //集合转数组
    hiddenNodesFinal = Array.from(differenceABSet);
    //隐藏不符合条件的叶子结点
    zTreeObj.hideNodes(hiddenNodesFinal);
}

    查询直接调用这个方法就可以了

    通过点击checkbox回显文本

    本来很简单的一个功能,但是有了模糊查询之后,简单的事情就变得复杂了起来.

    

    首先触发ztree的选中事件

    本来想是通过点击checkbox获取当前点击根节点的数据,但是找了一圈也没有发现有省劲的获取方式,于是就通过遍历当前树的选中结点和未选中结点.

    

var user = "";
var id = "";
var phone = "";

//点击事件
function onClick(e, treeId, treeNode) {
    user = $("#ToPersonName").val();
    phone = $("#ToPersonPhone").val();
    id = $("#ToPersonID").val();

    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    var nodesTrue = treeObj.getCheckedNodes(true);
    for (var i = 0; i < nodesTrue.length; i++) {
        if (nodesTrue[i].phone != null && nodesTrue[i].phone != "无") {
            saveData(nodesTrue[i].name, nodesTrue[i].id, nodesTrue[i].phone);
        }
    }
    var nodesFalse = treeObj.getCheckedNodes(false);
    for (var i = 0; i < nodesFalse.length; i++) {
        if (id.split(",").indexOf(nodesFalse[i].id) != 0) {
            var start = id.indexOf("," + nodesFalse[i].id);
            if (start != -1) {
                id = id.replace("," + nodesFalse[i].id, "");
                user = user.replace("," + nodesFalse[i].name, "");
                phone = phone.replace("," + nodesFalse[i].phone, "");
            }
        } else {
            var start = id.indexOf(nodesFalse[i].id);
            var ids = id.split(",");
            if (ids.length != 1 && start != -1) {
                id = id.replace(nodesFalse[i].id + ",", "");
                user = user.replace(nodesFalse[i].name + ",", "");
                phone = phone.replace(nodesFalse[i].phone + ",", "");
            } else if (ids.length == 1){
                id = id.replace(nodesFalse[i].id, "");
                user = user.replace(nodesFalse[i].name, "");
                phone = phone.replace(nodesFalse[i].phone, "");
            }
        }
    }
    $("#ToPersonName").val(user);
    $("#ToPersonPhone").val(phone);
    $("#ToPersonID").val(id);
}



saveData = function (name, treeid, treephone) {
    var ids = id.split(",");
    if (ids.indexOf(treeid) == -1) {
        if (user != "") {
            user += "," + name;
            id += "," + treeid;
            phone += "," + treephone;
        } else {
            user = name;
            id = treeid;
            phone = treephone;
        }
    }
}

  虽然费了些功夫,但是还是实现了ztree通过点击根节点,根据根结点的选中属性回显为本的逻辑

    其实如果没有这个模糊查询的话,直接通过getCheckedNodes(true)就可以实现此功能,但是由于模糊查询导致每次查询后树已经改变了,就无法直接获取了.

    很简单的Ztree通过JS实现的功能,虽然简单,但是希望对你有帮助.