- 浏览: 494080 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--<script type="text/javascript" src="vue.min.js"></script>--> <script type="text/javascript" src="vue.min.js"></script> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="app"> </div> <script type="text/javascript"> var menu = []; var node0 = { id: 'test1', code: 'code', name: 'name1', state: 'open/close', ico: 'ico', parentId: 0, checked: 'true/false', attributes: {}, children: [] }; var node1 = { id: 'test', code: 'code', name: 'name1', state: 'open/close', ico: 'ico2', parentId: 0, checked: 'true/false', attributes: {}, children: [] }; var node2 = { id: 3, code: 'code', name: 'name1', state: 'open/close', ico: 'ico', parentId: 0, checked: 'true/false', attributes: {}, children: [node0] }; var node3 = { id: 3, code: 'code', name: 'name1', state: 'open/close', ico: 'ico', parentId: 0, checked: 'true/false', attributes: {}, children: [node1] }; var node4 = { id: 4, code: 'code', name: 'name1', state: 'open/close', ico: 'ico', parentId: 0, checked: 'true/false', attributes: {}, children: [node1] }; var node5 = { id: 5, code: 'code', name: 'name1', state: 'open/close', ico: 'ico', parentId: 0, checked: 'true/false', attributes: {}, children: [node3, node2] }; node3 menu.push(node5); menu.push(node4); console.info(JSON.stringify(menu)); var menuTest = filterByName(menu, '3'); console.info("menuTest == " + JSON.stringify(menuTest)); function filterByName(menu, name) { var menuNew = []; for (var i = 0; i < menu.length; i++) { var nodeNew = undefined; var node = menu[i]; var childrenNode = node.children; var childrenMenu = []; if (childrenNode) { if (childrenNode.length > 0) { childrenMenu = filterByName(childrenNode, name); } } if (childrenMenu) { if (childrenMenu.length > 0) { nodeNew = new Object(); nodeNew = nodeFillNewFromOld(node, nodeNew); nodeNew.children = childrenMenu; } else { if (checkNodeEquals(node, name)) { nodeNew = new Object(); nodeNew = nodeFillNewFromOld(node, nodeNew); } } } if (nodeNew) { menuNew.push(nodeNew); } } return menuNew; } function nodeFillNewFromOld(oldNode, newNode) { newNode.id = oldNode.id; newNode.code = oldNode.code; newNode.name = oldNode.name; newNode.state = oldNode.state; newNode.ico = oldNode.ico; newNode.parentId = oldNode.parentId; newNode.checked = oldNode.checked; newNode.attributes = oldNode.attributes; newNode.children = undefined; return newNode; } function checkNodeEquals(node, name) { if (node.name.indexOf(name) != -1) { return true; } else { return false; } // if (node.id == name) { // return true; // } else { // return false; // } } </script> </body> </html>
- jsTest.zip (1002 Bytes)
- 下载次数: 1
发表评论
-
定时调用函数功能实现
2021-06-11 10:26 1102<html> <head> & ... -
uniApiJs
2021-06-08 18:04 0//获取当前的地理位置、速度 function getLoca ... -
百度人脸识别
2021-05-21 16:11 360package com.gaojinsoft.htwy.y20 ... -
点击DIV触发上传文件的方法
2021-05-20 14:11 1190<div Style="float:left ... -
前端格式化工具与检测工具选择与使用
2021-05-10 20:26 714//工具安装前的准备与 ... -
indexedDb TEST
2021-03-24 08:36 504<!DOCTYPE html> <html& ... -
defineProperty Array push 监听
2020-10-31 15:16 461<!DOCTYPE html> <html ... -
weuiJsLayer.js
2020-07-24 09:56 259var weuiJsAlterMap = {}; f ... -
dataViewCommonJs
2020-05-09 17:00 352// var _elementIdToDataMap={} ... -
editorconfig配置
2020-03-28 20:36 458# https://editorconfig.org root ... -
commonJs
2020-03-26 21:25 359//本包使用需要先引入jquery //获取数组中的重复元素 ... -
setFormData
2019-12-20 22:30 0function setFormData(selector,d ... -
高德地图获取地址
2019-09-11 14:42 495高德帐号 135704744 <!doctype ... -
前端实现从剪贴板中获取数据
2019-05-16 14:01 1461//绑定在了body上,也可以绑定在其他可用元素行,但是不是所 ... -
js prototype原理与使用
2018-08-14 15:59 763js prototype原理与使用 prototype 使您 ... -
javascript匿名函数与闭包
2016-09-27 14:10 423javascript匿名函数与闭包 ... -
JavaScript 作用域和作用域链
2016-09-27 09:08 511JavaScript 作用域和作用域链 JavaScrip ... -
Javascript函数
2016-09-28 15:00 499Javascript函数 定义函数 使用function关 ... -
Javascript执行步骤与顺序
2016-09-26 01:09 403Javascript执行步骤与顺序 1.JavaScript ... -
URI和URL的区别、URL编码
2016-09-05 11:47 563URI和URL的区别 URI,是uniform resourc ...
相关推荐
在JavaScript编程中,处理树形结构数据是一种常见的需求,特别是在数据可视化、文件系统管理或组织层级结构等场景。树形结构数据通常包含嵌套的数组,每个元素代表一个节点,可能有子节点(children)属性。`...
**JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...
这个方法允许我们在用户输入关键词后,实时过滤树中的节点,只显示与关键词匹配的子节点。 要实现模糊查询,首先需要在HTML中设置一个输入框供用户输入查询关键字,并监听其`keyup`事件。当用户输入时,触发模糊...
在JavaScript编程中,处理树结构的数据时,常常需要进行节点过滤操作,以便根据特定条件筛选出我们需要的部分。"树结点过滤 拼或者汉字都可以 TreeFilter"这个主题正是关于如何在树形结构中实现过滤功能,不论是通过...
这些JS目录树实现的差异可能在于它们的性能、可定制性、动画效果、是否支持拖放操作、是否支持搜索和过滤等功能。通过研究和比较这些实现,你可以根据实际项目需求选择或定制合适的解决方案。 总的来说,理解和掌握...
这个“一个漂亮的目录树代码(JS版)”是一个JavaScript实现的目录树组件,它可以帮助开发者创建美观且交互性强的文件或目录结构。下面我们将深入探讨这个话题。 首先,目录树是一种以树形结构展示文件系统或逻辑...
JavaScript 动态树是一种在网页应用中常用的交互式数据展示方式,它允许用户以树状结构来组织和操作数据。这种技术在各种场景下都非常实用,例如文件管理系统、组织架构展示、导航菜单等。本资源“js动态树合集”...
dhtmlxGrid是一款强大的JavaScript数据网格组件,它提供了丰富的功能,如数据排序、分页、过滤、编辑等。这个组件可以处理大量数据,并支持多种数据源。在压缩包中出现的`dhtmlxgrid_v10_pro_60724.zip`可能包含了...
JavaScript DTree是一种基于JavaScript实现的目录树控件,它在Web应用中被广泛用于展示层次结构数据,如文件系统、组织结构或者网站导航。DTree以其简洁高效、可定制化的特点,深受开发者喜爱。在这个话题中,我们将...
本项目“原生js实现无限目录树”提供了一种解决方案,它涵盖了两种实现方式:一次性加载所有数据和异步加载下级数据。下面我们将深入探讨这两种实现方式以及它们在实际应用中的价值。 首先,一次性加载所有数据的...
在JavaScript编程中,树形结构是一种非常常见的数据结构,它模拟了自然界中的树,由节点(也称为顶点)和边组成。在这个场景下,我们讨论的是如何使用递归方法来构建和操作树形结构,无论是普通的写法还是基于对象的...
EXTJS过滤树是一种在EXTJS框架中实现的高级特性,主要用于增强树形组件的功能,让用户能够更高效地浏览和操作大量的层次数据。在EXTJS中,树形组件(TreePanel)通常用于展示具有层级关系的数据,例如组织结构、文件...
JavaScript是一种广泛应用于网页和...综上所述,JavaScript实现树形菜单需要理解数据结构、DOM操作、事件处理和性能优化等多个方面的知识。通过不断实践和学习,你可以创建出功能强大且用户体验良好的树形菜单组件。
8. **用户交互优化**:为了提升用户体验,可以添加搜索功能,允许用户在输入框中输入关键词过滤树中的节点。 在实际项目中,可能会使用库或框架,如jQuery、Vue.js或React.js,它们提供了便利的API和生命周期方法,...
"JS后台管理树形菜单代码.rar" 是一个包含JavaScript实现的树形菜单插件,适用于后台管理场景。这个压缩包提供了实现这种功能的代码示例,帮助开发者快速构建出美观且高效的树状菜单。 首先,我们来详细了解一下...
`js`目录下的JavaScript文件则包含实现树形控件逻辑的代码。这些文件可能会引入一些库,如jQuery或Vue.js,来简化DOM操作和事件处理。 对于样式,`images`目录可能包含了一些图标资源,如展开/折叠箭头,用于美化树...
此外,JavaScript中的闭包和高阶函数特性使得我们可以轻松地实现对树形结构的高级操作,例如对树节点进行映射、过滤或者组合。 在Java中,树形结构的实现方式类似,只是语法和类库略有不同。Java通常使用类和继承来...
- 可以增加搜索、过滤和排序功能,使得用户可以更方便地查找和管理树中的数据。 - 为树形菜单添加展开/折叠、拖放、右键菜单等交互特性,提升用户体验。 通过以上步骤,我们就能利用JavaScript将服务端返回的平行...
"基于ztree封装的Vue树形组件,轻松实现海量数据的高性能渲染"这个项目,就是针对这一需求,将经典的zTree库与Vue.js相结合,为开发者提供了一个强大且高效的解决方案。 zTree是一个基于JavaScript的开源树形插件,...