项目中使用到zTree模糊搜索,查看官方API,官方提供的fuzzySearch()方法可以实现模糊搜索,但是当我点击子节点进行查询的时候,怎么也获取不到后台数据,js调试发现获取到的名字中加了span标签,后台无法获取数据。于是在网上查询资料后自己做一个demo。
主要代码
页面代码
<div class="zTreeDemoBackground left"> 搜索:<input type="text" id="key" class="empty" style="width: 80px;margin-left: 3px;font-weight: normal;"/> <ul id="tree" class="ztree"></ul> </div>
js代码
ztree初始化
function zTreeOnClick(event, treeId, treeNode) { $("#timing").html($("#Rtime").val()); var name=treeNode.name; alert("你点击了:"+name); } var setting = { callback: { onClick: zTreeOnClick }, view: { fontCss: setFontCss }, data: { simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"国家", open:true}, { id:11, pId:1, name:"中国"}, { id:111, pId:11, name:"北京"}, { id:111, pId:11, name:"上海"}, { id:111, pId:11, name:"河南"}, { id:111, pId:11, name:"云南"}, { id:12, pId:1, name:"美国",isParent:true}, { id:122, pId:12, name:"华盛顿"}, { id:13, pId:1, name:"日本", isParent:true}, { id:133, pId:13, name:"东京"} ]; function showIconForTree(treeId, treeNode) { return !treeNode.isParent; }; $(document).ready(function(){ $.fn.zTree.init($("#tree"), setting, zNodes); document.getElementById("key").value = ""; //绑定事件 key = $("#key"); key.bind("focus", focusKey) .bind("blur", blurKey) .bind("propertychange", searchNode) .bind("input", searchNode); });
隐藏不符合节点
//显示上次搜索后背隐藏的结点 zTree.showNodes(hiddenNodes); //查找不符合条件的叶子节点 function filterFunc(node){ var _keywords=$("#key").val(); if(node.isParent||node.name.indexOf(_keywords)!=-1) return false; return true; }; //获取不符合条件的叶子结点 hiddenNodes=zTree.getNodesByFilter(filterFunc); //隐藏不符合条件的叶子结点 zTree.hideNodes(hiddenNodes);
高亮显示符合条件节点并打开
//搜索节点 function searchNode(e) { var zTree = $.fn.zTree.getZTreeObj("tree"); var value = $.trim(key.get(0).value); var keyType = "name"; if (key.hasClass("empty")) { value = ""; } if (lastValue === value) return; lastValue = value; if (value === ""){ updateNodes(false); return; }; updateNodes(false); nodeList = zTree.getNodesByParamFuzzy(keyType, value); //调用ztree的模糊查询功能,得到符合条件的节点 updateNodes(true); //更新节点 } //高亮显示被搜索到的节点 function updateNodes(highlight) { var zTree = $.fn.zTree.getZTreeObj("tree"); for( var i=0, l=nodeList.length; i<l; i++) { nodeList[i].highlight = highlight; zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //将搜索到的节点的父节点展开 zTree.updateNode(nodeList[i]); } }
设置颜色,需要配置view: {fontCss: setFontCss }
function setFontCss(treeId, treeNode) { return (!!treeNode.highlight) ? {color:"#00ff66", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; }
效果图:
搜索结果:
完整demo:https://download.csdn.net/download/f954618482/10452681
ztree官网:http://www.treejs.cn/v3/main.php#_zTreeInfo