具体效果见上图。

具体代码

以下代码是基于Vue编写的。

Html部分

<div class="search-box clearfix"><a-input placeholder="请输入搜索关键词..." v-model="key" @keyup.enter="searchDev" /><a-button @click="searchDev">搜索</a-button>
</div>
<div class="device-list"><div class="ztree radio-ztree" id="deparment-ztree"></div>
</div>

Js部分

// tree基础配置
var treeOpts = {view: {showLine: false,dblClickExpand: false,showIcon: function showIcon(treeId, treeNode){return !treeNode.isParent;}},check: {enable: false,},callback: {}
};//设备树渲染方法，treeData由接口获得并传入到方法中
renderDeptTree(treeData){var el = 'deparment-ztree'var treeObj;try{$.fn.zTree.getZTreeObj(el).destroy();} catch(error){}// 添加自定义Domfunction addDiyDom(treeId, treeNode){if(treeNode.type == 'DEPT'){ // 添加统计数值var aObj = $("#" + treeNode.tId + "_a");var count = treeNode.total;var str = '<div class="count-box">(<span class="count">' + count[0] + '</span>/<span class="online">' + count[1] + '</span>/<span class="downline">' + count[2] + '</span>)</div>';aObj.append(str);} else if(treeNode.type == 'DEV'){ // 添加收藏按钮var aObj = $("#" + treeNode.tId + "_a");var str = '';if(treeNode.gzzt == '0'){str = $('<span class="setfavorite addfavorite"><i class="icon material-icons">' + heart + '</i></span>');} else if(treeNode.gzzt == '1'){str = $('<span class="setfavorite removefavorite"><i class="icon material-icons">' + solidHeart + '</i></span>');}aObj.append(str);}}// 基本配置treeOpts.view.addDiyDom = addDiyDom;// 点击事件treeOpts.callback.beforeClick = function(treeId, treeNode, clickFlag){if(treeNode.type == 'DEPT'){if(treeNode.open){ // 点击父级展开或者收起子级$.fn.zTree.getZTreeObj(el).expandNode(treeNode, false, false, false);} else{$.fn.zTree.getZTreeObj(el).expandNode(treeNode, true, false, true);}return false;} else{return true;}}treeOpts.callback.onClick = function(event, treeId, treeNode){// 点击父级展开子级treeObj.expandNode(treeNode);if(treeNode.type == 'DEV'){// 设置设备编号self.sbbh = treeNode.id;// 子页面方法调用document.getElementById("liveview").contentWindow.window.page.init(treeNode.id);}} else{return false;}}$.fn.zTree.init($("#" + el), treeOpts, treeData);treeObj = $.fn.zTree.getZTreeObj(el);
},
// 搜索设备
searchDev(){var self = this;var el = 'deparment-ztree';var key = self.key;var nodeList;zTreeObj = $.fn.zTree.getZTreeObj(el);var allNode = zTreeObj.transformToArray(zTreeObj.getNodes());// 查找节点function filterFunc(node) {if(node.name.indexOf(key) != -1){return true;} else{return false;}};// 查找父级function findParent(zTreeObj, node) {zTreeObj.expandNode(node, true, false, false);var pNode = node.getParentNode();if (pNode != null) {nodeList.push(pNode);findParent(zTreeObj, pNode);}};// 隐藏所有节点zTreeObj.hideNodes(allNode);// 根据关键词搜索if(key){nodeList = zTreeObj.getNodesByFilter(filterFunc);nodeList = zTreeObj.transformToArray(nodeList);for (var n in nodeList) {if (nodeList.hasOwnProperty(n)){findParent(zTreeObj, nodeList[n]);}}zTreeObj.showNodes(nodeList);} else{ // 搜索关键词为空时展示所有节点且收起所有节点zTreeObj.showNodes(allNode);zTreeObj.expandAll(false);}
},

zTree模糊搜索(子级和父级都不匹配时隐藏节点)相关推荐

四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
【Vue】—子级向父级传递数据
[Vue]-子级向父级传递数据 <template><div><h2>Son</h2><div v-for='(item,index) in da ...
子标签获取父级Id值
子标签获取父级id值 1.首先,通过子标签传递,使用"this": 2.function获取所传递的值: 代码如下标签中(id = "show1") oncl ...
SQL 递归查询子级或父级
实际业务中经常会使用到无限级分类,当我们需要根据一个指定分类推算出它下面的所有子级,包括子级的子级等,或者推算出所有父级,包括父级的父级等,我一般是通过后端代码来递归推算.其实也可以通过SQL语句来实 ...
Thinkcmf子栏目获取父级栏目所有子栏目列表
网站建设时经常需要输出某个栏目的子栏目,对应的在子栏目列表页也需要输出父级栏目的子栏目列表,thinkcmf可以输出所有子栏目,但却无法在子栏目列表页也适用, 因此就需要通过对数据库表查询来完成需求: ...
android view父级隐藏,Android指定的子级已经有父级。必须先对子级的父级调用removeView（）...
在我的应用中,我必须经常在两种布局之间切换.错误在下面发布的布局中发生. 第一次调用布局时,没有发生任何错误,一切都很好.然后,当我调用不同的布局(空白),然后再次调用我的布局时,出现以下错误: &g ...
Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中
完整代码如下: import { Component } from '@angular/core';import { NzFormatEmitEvent } from 'ng-zorro-antd/t ...
vue router-link子级返回父级页面
vue-router嵌套路由,从二级路由跳转到一级路由时,间歇性导致一级路由重叠解决方法: 1.使用this.$router.push跳转转载于:https://www.cnblogs.com/K ...
CSS父级子级学习总结
CSS 父级子级 http://www.divcss5.com/rumen/r239.shtml 1.认识了解简单讲CSS父级 CSS子级是相对而言,如一个DIV "A"被另外一 ...
javascript中定位父级offsetParent 及偏移大小
偏移量(offset dimension)是javascript中一个重要的概念.javascript中涉及到偏移的有offsetWidth.offsetHeight.offsetLeft.offse ...

zTree模糊搜索(子级和父级都不匹配时隐藏节点)

具体代码

Html部分

Js部分

zTree模糊搜索(子级和父级都不匹配时隐藏节点)相关推荐

最新文章

热门文章