实例详解实现版在某视频剪辑软件项目中使用并且带有搜索功能

实现版是一个依靠框架实现的多功能"树插件"。优异的性能、灵活的配置、多种功能的组合是实现版最大优点。

上篇文章给大家介绍了某视频剪辑软件中如何使用ztree，大家可以点击查看。

之前博客介绍过怎么在某视频剪辑软件里展示以及获取点击元素的内容，此文章之介绍搜索功能

超文本标记语言

El-form项目标签='机构' class=' z tree-par ' I class=' icon _ org '/I输入类型=' text '占位符='请输入机构id=' ser ' v-model='规则表单。机械装置‘@键起。输入=' search _ z tree '(' treedem '，' ser ')' @ click。stop=' control()' class=' log in-input ' El-button icon=' El-icon-arrow-down ' @ click。stop=' control()'/El-button div class=' z tree-z ' v-show=' ztreeCon ' ul id=' treedem ' class=' z tree '/ul/div/El-form-item main。射流研究…需要单独引入

"进口"。/./static/z tree/js/jquery。z树。ex hide-3.5。量滴js '；如果不单独引入这个会获取不到很多元素，在投入回车事件或者点击事件的时候直接执行此事件即可

代码部分

expand _ z tree(TreeID){ var treeObj=$。fn。ztree。getztreeObj(TreeID)；treeObj.expandAll(真);}，close _ z tree(TreeID){ var treeObj=$。fn。ztree。getztreeObj(TreeID)；var nodes=treeObj。transformto数组(treeObj。getnodes())；var NodeLength=nodes . length for(var I=0；我节点长度；i ) { if (nodes[i]).id=='0') { //根节点：展开treeObj.expandNode(nodes[i]，true，true，false)；} else { //非根节点：收起treeObj.expandNode(nodes[i]，false，true，false)；} } }，search_ztree(treeId，searchConditionId){ this。searchbyflag _ z树(treeId，search conditionid ' ')；}，searchByFlag_ztree(treeId，searchConditionId，flag) { //1 .搜索条件var搜索条件=$(“#”搜索条件id).val()；//2.得到模糊匹配搜索条件的节点数组集合var highlightNodes=新数组();if (searchCondition！=' '){ var treeObj=$。fn。ztree。getztreeObj(treeId)；突出显示节点=TreeObj。getnodesbyparamlfuzzy(' name '，searchCondition，null)；} //3.高亮显示并展示【指定节点这个。高亮显示andexpand _ z树(treeId、highlightNodes、searchCondition、flag)；}，高亮显示andexpand _ z树(treeId，highlightNodes，tx，flag){ var treeObj=$。fn。ztree。getztreeObj(treeId)；//1.先把全部节点更新为普通样式var树节点=tree obj。transformto数组(tree obj。getnodes())；for(var I=0；I tree nodes . lengthi){ tree nodes[I].高光=假树对象。updatenode(树节点[I])；} //2.收起树，只展开根节点下的一级节点这个。close _ z树(TreeID)；//3.把指定节点的样式更新为高亮显示，并展开if (highlightNodes！=null){ for(var I=0；I highlightnodes . lengthi){ if(flag！=空标志！='') { if (highlightNodes[i]).flag==flag) { //高亮显示节点，并展开highlightNodes[i].高亮=truetree obj。updatenode(突出显示节点[I])；//高亮显示节点的父节点的父节点.直到根节点，并展示var父节点=突出显示节点[I].getParentNode()；var父节点=这个。getparent nodes _ z树(treeId，父节点)；特雷obj。expandnode(父节点，真，假，真)；特雷obj。expandnode(父节点，真，假，真)；} } else { treeObj。updatenode(突出显示节点[I])；var父节点=突出显示节点[I].getParentNode()；var父节点=这个。getparent nodes _ z tree(treeId，父节点)；特雷obj。expandnode(父节点，真，假，真)；特雷obj。expandnode(父节点，真，假，真)；} } } }，getParentNodes_ztree(treeId，node) { if (node！=null){ var treeObj=$。fn。ztree。getztreeObj(treeId)；var父节点=节点。getparent node()；返回这个。getparentnodes _ z树(treeId，父节点)；} else {返回节点；} }展示

这个有个小小的臭虫，就是做键盘按下或者抬起的时候会有问题，https://yq.aliyun.com/articles/308489，这个文章就解决了这个问题

总结

边肖介绍的上述ztree用于vue项目，具有搜索功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！