ztree keyUp功能实现

浅浅的花香味﹌ 2022-05-20 02:10 157阅读 0赞

需求：

1.根据输入框内容，对树进行模糊查询

2.将查询到得树内容进行标红，未匹配得数据进行隐藏

页面效果：

![70][]![70 1][]

页面代码：

具体keyUp代码如下：

//container左侧边栏ztree搜索  
    var queryHideNodes = \[\];//查询隐藏的  
    var queryShowNodes = \[\];//查询展示的  
      
    $(".ztreeSearch").keyup(function(e)\{    
var treeId = $(".ztree").attr("id");  
var treeObj = $.fn.zTree.getZTreeObj(treeId);  
var queryWord=$(".ztreeSearch").val().toUpperCase();  
//颜色重置  
function resetColor()\{  
for( var i=0; i<queryShowNodes.length;i++) \{//初始将上次查询的内容颜色改回黑色  
    treeObj.setting.view.fontCss\["color"\]="black";  
        treeObj.updateNode(queryShowNodes\[i\]);  
    \}     
\}  
  
resetColor();  
  
//展示查询的节点儿  
function showQueryNode(node)\{  
if(node.getParentNode()!=null)\{  
treeObj.expandNode(node.getParentNode(),true);  
\}  
\}  
  
function filterHideFunc(node)\{  
var boolen=true;  
for(var i=0;i<queryShowNodes.length;i++)\{  
if(queryShowNodes\[i\].nodeRoute.indexOf(node.nodeRoute)!=-1)\{  
boolen=false;  
\}  
\}  
    return boolen;  
\}  
function filterShowFunc1(node)\{  
    if(node.name.toUpperCase().indexOf(queryWord)==-1) return false;  
    return true;  
\}  
  
function filterShowFunc2(node)\{  
var boolen=false;  
for(var i=0;i<queryShowNodes.length;i++)\{  
if(queryShowNodes\[i\].nodeRoute.indexOf(node.nodeRoute)!=-1)\{  
boolen=true;  
\}  
\}  
    return boolen;  
\}  
  
queryShowNodes=treeObj.getNodesByFilter(filterShowFunc1);//过滤得到匹配的名称的节点  
queryHideNodes=treeObj.getNodesByFilter(filterHideFunc);//过滤得到隐藏的  
var queryShowNodes2=\[\];  
queryShowNodes2=treeObj.getNodesByFilter(filterShowFunc2);//过滤得到展示的节点  
if(!queryShowNodes.length)\{  
treeObj.showNodes(queryHideNodes);  
return true;  
\}  
  
if(queryHideNodes.length)\{  
    for( var i=0; i<queryShowNodes.length;i++) \{  
        showQueryNode(queryShowNodes\[i\]);  
    \}  
    for( var i=0; i<queryShowNodes.length;i++) \{  
        //改变展示节点的颜色  
        treeObj.setting.view.fontCss\["color"\]="red";  
            treeObj.updateNode(queryShowNodes\[i\]);  
        \}  
    \}  
    treeObj.hideNodes(queryHideNodes);  
    treeObj.showNodes(queryShowNodes2);  
  
$(this).focus();  
     
    \});

[70]: https://img-blog.csdn.net/20180710201706213?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQwMzUy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220520/f73e381c30244f149b416cbdac47f812.png