ZTree的选择性展开树节点

最近项目需要用ZTree插件，之前没有接触过，所以研究了半天API，发现这个Ztree很灵活，确实非常好用，支持的功能也很多，话不多说，我需要根据子节点的名字展开对应父节点，并且对其名字的样式进行改变，在网上找了很久对该插件的样式改变的方法，最后总结了利用实现了功能需求，下面是实现的代码：

<!DOCTYPE html>
<HTML><HEAD><TITLE> ZTREE DEMO </TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--这里引入ztree的样式--><link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"></HEAD><BODY>
<ul id="tree" class="ztree" ></ul>
<div>ip:</div><input type="text" name="ipId" id="ipId"  /><span><button id="select" onclick="select()">查看</button></span><!--这里引入ztree的对应包--><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script  src="js/jquery.ztree.core.js"></script><script  src="js/jquery.ztree.excheck.js" ></script><script  src="js/jquery.ztree.exhide-3.5.min.js" ></script></BODY><SCRIPT type="text/javascript" >var ztreeObj;function select(){var data=document.getElementById("ipId").value;var result =ztreeObj.getNodesByParamFuzzy("name",data,null);//获取所有节点，使其为展开状态for(var i=0;i<result.length;i++){var parent = result[i].getParentNode();if(!parent.open){ztreeObj.expandNode(parent,true,true);}ztreeObj.checkNode(result[i] , true,true); }//获取所有满足要求的节点，对其样式改变for(var i=0;i<result.length;i++){result[i].open=true;ztreeObj.updateNode(result[i]);//对对应的节点样式颜色设置，此处是红色ztreeObj.setting.view.fontCss["color"] ="#FF0000";//对节点更新ztreeObj.updateNode(result[i]);}}var setting={view: {showLine:true,showIcon: true//显示节点图片//chkboxType: { "Y": "", "N": "" }}};//模拟的数据，也可以动态获取
var zTreeNodes=[{"isParent": true,"open":true,"name": "共享平台—分布式消息中间件","children": [{"id": 1,//"open":true,"name": "NameServer","isParent": true,"children": [{"id": 101,"isParent": "false","name": "10.145.216.130:9876"},{"id": 102,"isParent": "false","name": "10.145.216.131:9876"}]},{"id": 2,//"open":true,"name": "Controller","isParent": true,"children": [{"id": 201,"isParent": "false","name": "10.145.216.130:8021"}]},{"id": 3,//"open":true,"name": "web","isParent": true,"children": [{"id": 301,"isParent": "false","name": "10.145.216.130:10911"},{"id": 302,"isParent": "false","name": "10.145.216.130:10921"},{"id": 303,"isParent": "false","name": "10.145.216.131:10913"},{"id": 304,"isParent": "false","name": "10.145.216.131:10923"}]},{"id": 4,//"open":true,"name": "Broker","isParent": true,"children": [{"id": 401,"isParent": "false","name": "10.145.216.130:11281"},{"id": 402,"isParent": "false","name": "10.145.216.130:11981"},{"id": 403,"isParent": "false","name": "10.145.216.131:11281"},{"id": 404,"isParent": "false","name": "10.145.216.131:11981"}]},{"id": 5,//"open":true,"name": "Deamon","isParent": true,"children": [{"id": 501,"isParent": "false","name": "10.145.217.3:8081"}]},{"id": 6,//"open":true,"name": "conf_db","isParent": true,"children": [{"id": 601,"isParent": "false","name": "10.145.217.3:8806"}]},{"id": 7,//"open":true,"name": "Zookeeper","isParent": true,"children": [{"id": 701,"isParent": "false","name": "10.145.217.13:2122"},{"id": 702,"isParent": "false","name": "10.145.217.14:2122"},{"id": 703,"isParent": "false","name": "10.145.217.15:2122"},{"id": 704,"isParent": "false","name": "10.145.217.16:2122"},{"id": 705,"isParent": "false","name": "10.145.217.17:2122"}]}]
}
];$(function(){ ztreeObj=$.fn.zTree.init($("#tree"), setting, zTreeNodes);
//第一个参数为zTree的DOM容器，第二个为zTree设置详情可见官网api,第三个为zTree的节点数据
});</SCRIPT></HTML>

运行结果为

传入所需子节点名

运行结果

第一次写，如果不详细请见谅！

ZTree的选择性展开树节点相关推荐

flex tree 展开树节点
1展开树节点 public function expandChildrenOf(item:Object, open:Boolean):void 打开或关闭指定项目下的所有树项目.如果设置 dataPr ...
wpf展开树节点_WPF中展开一个TreeView控件的所有树节点
在 Windows Form 应用中,我们碰到需要展开一个TreeView 控件的所有树节点的时候很简单,微软已经替我们提供了ExpandAll 方法,我们只要简单的一行代码tv_QTree.Expa ...
【zTree小贴士】树节点的图标不显示
问题: 树节点的图标不显示原因: showIcon的值设置为false了解决方案: view:{showIcon: true} 如有错误,评论指正,谢谢~
wpf展开树节点_【转】WPF TreeView如何展开到某个节点
初用WPF的TreeView控件,需要将树展开到某个特定的TreeViewItem,各种方法都尝试过,却发现代码总在某些情况下出错,然后仔细研究,才发现其中的曲折. 解决问题的思路是,得到从树的根节点 ...
wpf展开树节点_回归树分析与sklearn决策树案例，来玩一会
摘要: 决策树是非常基础的算法,其不仅能够进行分类还可以进行回归处理,也就是回归树.要想提高决策树的性能还需要做好剪枝的工作. 关键词: 回归树,剪枝 1 回归树之前已经介绍过决策树的基本理论了:这 ...
angular中使用z-tree初始化之后，展开根节点不生效
今天解决了一个非常尴尬的问题,纠结了整整半个月,最后还是被自己没有仔细看文档给打败了. 具体的事情是这样的,我们的需求是实现可复选的树结构,因为要适配IE8,纠结了很久之后最后决定使用z-tree,适 ...
echarts树状图点击展开子节点_CPU眼里的结构设备树节点及属性详解
1 设备树(device tree)简介DTSpec定义一个devicetree的约束来描述硬件设备,boot引导程序将设备树传递给用户程序的内存空间中,并传递给用户相应设备树的指针.设备树为一个树形 ...
MFC树型控件搜索并展开高亮指定树节点
项目需要做一个关于目录树节点的搜索功能先讲一下大概思路,大部分人都会从根节点一步一步地往下展开,不断地迭代搜索,但是这个方法比较麻烦,因为要不断地记录父节点,一层一层往下,有几层就要记录几个父节点. ...
bootstrap树节点如何设置默认不展开_我开源了一个基于Vue的组织架构树组件
开门见山 Demo 演示地址:http://www.longstudy.club/vue... github 地址:https://github.com/qq44924588... 项目背景因为最近 ...

ZTree的选择性展开树节点

ZTree的选择性展开树节点相关推荐

最新文章

热门文章