ztree模糊搜索并显示父层级&&手动触发oncheck

ztree增加模糊搜索功能

html部分

<div class="add_map_container tonly_add_map_container" id="tonly_add_map_container">
	<div class="zTreeDemoBackground left">
		<input type="text" id="type_search_tonly" placeholder="请输入设备名称" style="padding-left: 5px;font-size: 0.2rem"/>
			<ul class="ztree treeTonly" id="treeDept" style="padding: 0px 5px;"></ul>
	</div>
</div>

js部分

//定义setting
var setting = {
     view: {
         selectedMulti: false, //是否允许多选
         showIcon: false
     },
     data: {
         simpleData: {
             enable: true
         }
     },
     check: {
         enable: true,
     },
     callback: {
         onCheck: treenodeClick
     }
};
var zNodes = []; 

//监听搜索框input的change事件
$("body").off("keyup", '#type_search_tonly').on("keyup", '#type_search_tonly', function () {
     AutoMatch(this);
});

//根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch(txtObj) {
	InitialZtree();
    if (txtObj.value.length > 0) {
        var zTree = $.fn.zTree.getZTreeObj("treeDept");
        var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
        //将找到的nodelist节点更新至Ztree内
        $.fn.zTree.init($("#treeDept"), setting, nodeList);
    }
}

//还原zTree的初始数据
function InitialZtree() {
    $.fn.zTree.init($("#treeDept"), setting, zNodes);
}

//勾选树节点，获取该节点的所有叶子节点id
function treenodeClick(event, treeId, treeNode, clickFlag) {
    var nodeParentId = treeNode.getParentNode() ? treeNode.getParentNode().id : null;
    var nodeParentName = treeNode.getParentNode() ? treeNode.getParentNode().name : null;
    console.log(nodeParentId,nodeParentName);
    //此处treeNode 为当前节点
    if (treeNode.checked == false) {
        for (var n = 0; n < tonlyCheckArr.length; n++) {
            if (treeNode.isParent) {
                if (tonlyCheckArr[n].nodeParentId == treeNode.id) {
                    tonlyCheckArr.splice(n, 1);
                    n--;
                }
            } else {
                if (tonlyCheckArr[n].id == treeNode.id) {
                    tonlyCheckArr.splice(n, 1);
                    n--;
                }
            }
        }
    } else if (treeNode.checked == true) {
        if (treeNode.isParent) {
            tonlyCheckArr = getAllChildrenNodes(treeNode, tonlyCheckArr);
        } else {
            var obj = {
                "nodeParentId": nodeParentId,
                "nodeParentName": nodeParentName,
                "name": treeNode.name,
                "id": treeNode.id
            };
            tonlyCheckArr.push(obj);
        }
    }
}

//使用了递归，得到叶子节点的数据
function getAllChildrenNodes(treeNode, arr) {
    if (treeNode.isParent) {
        var childrenNodes = treeNode.children;
        if (childrenNodes) {
            for (var i = 0; i < childrenNodes.length; i++) {
                if (childrenNodes[i].isParent) {
                    getAllChildrenNodes(childrenNodes[i], arr);
                } else {
                    var obj = {
                        "nodeParentId": childrenNodes[i].getParentNode().id,
                        "nodeParentName": childrenNodes[i].getParentNode().name,
                        "name": childrenNodes[i].name,
                        "id": childrenNodes[i].id
                    };
                    arr.push(obj);
                }
            }
        }
    }
    return arr;
}

效果图

如果只需要勾选子级不需要显示该子节点的父节点信息，那么目前已经可以了。

---

如果需要在显示显示某个组下的某个节点，这样是做不到的。在模糊搜索的列表里面勾选是没有父节点的。

ztree增加模糊搜索和显示父级功能&&手动触发oncheck

html部分

给树状同级增加一个专门显示搜索结果的ul，默认将它隐藏，搜索时显示

<div class="add_map_container tonly_add_map_container" id="tonly_add_map_container">
	<div class="zTreeDemoBackground left">
		<input type="text" id="type_search_tonly" placeholder="请输入设备名称" style="padding-left: 5px;font-size: 0.2rem"/>
			 <ul class="ztree treeTonly" id="treeDept" style="padding: 0px 5px;"></ul>
			 <ul class="ztree treeTonly" id="treeDeptSearch" style="padding: 0px 5px;display: none;"></ul>
	</div>
</div>

js部分

input 的监听事件不变，修改触发的函数，没有修改内容，也不需要用到InitialZtree方法

//定义搜索的setting
var settingSearch = {
   view: {
       selectedMulti: false, //是否允许多选
       showIcon: false
   },
   data: {
       simpleData: {
           enable: true
       }
   },
   check: {
       enable: true
   },
   callback: {
       onCheck: treenodeClickSearch
   }
};

//根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch(txtObj) {
    if (txtObj.value.length > 0) {
        var zTree = $.fn.zTree.getZTreeObj("treeDept");
        var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
        $("#treeDept").hide();
        $("#treeDeptSearch").show();
        //将找到的nodelist节点更新至搜索的Ztree内
        $.fn.zTree.init($("#treeDeptSearch"), settingSearch, nodeList);
    }else{
        $("#treeDept").show();
        $("#treeDeptSearch").hide();
    }
}

//搜索完成勾选某个 隐藏搜索ul显示主ul并勾选触发主tree的onCheck事件
//手动触发onCheck事件至关重要   这个也找了很久
//当它触发了onCheck事件，那么上面的treenodeClick方法就可以找到他的父级了。
function treenodeClickSearch(event, treeId, treeNode, clickFlag) {
    $("#treeDept").show();
    $("#treeDeptSearch").hide();
    $("#type_search_tonly").val("");
    var treeObj = $.fn.zTree.getZTreeObj("treeDept");
    var node = treeObj.getNodeByParam("name", treeNode.name);
    treeObj.checkNode(node,true,true); //选中
    treeObj.setting.callback.onCheck('','treeDept',node);//手动触发onCheck事件
}