`

js 树形结构整合

    博客分类:
  • js
阅读更多

 

一。根据标识符去掉空菜单。

// 根据菜单有‘/’页面没有‘/’的特点
function deleteEmptyMenu(data) {
  const newData = []
  for (let i = 0; i < data.length; i++) {
    if (data[i].path.indexOf('/') === -1 || data[i].children.length > 0) {
      if (data[i].children && data[i].children.length > 0) {
        const json = {
          path: data[i].path,
          children: []
        }
        newData.push(json)
        const rtData = deleteEmptyMenu(data[i].children)
        const length = newData.length - 1
        newData[length].children.push(rtData)
      } else {
        newData.push(data[i])
      }
    }
  }
  return newData
}

 

 

 

 

二。技术:主要就是使用了递归调用的方法来实现的

分享到:
评论

相关推荐

    EXT 分页,树形结构案列

    EXT 分页与树形结构是EXT JavaScript框架中的两种核心特性,它们在开发高效、互动性强的Web应用程序时扮演着重要角色。EXT是一个强大的客户端JavaScript库,用于构建富互联网应用程序(RIA)。在这里,我们将深入...

    jQuery ztree文件夹树形结构菜单插件

    使用jQuery ztree时,我们需要在JavaScript中配置并初始化树形结构。在`MtrSearchZTree.js`中,你可以找到类似以下的代码来设置树形菜单的参数和数据: ```javascript var setting = { view: { showLine: true, /...

    无刷新树形结构(有源码)

    无刷新树形结构是一种网页设计技术,主要用于展示层次化数据,如目录结构、组织架构等。在这种结构中,用户可以在不重新加载整个页面的情况下展开、折叠或者导航节点,提供了更流畅的用户体验。FlyTreeView 是一个...

    【JavaScript源代码】jQuery treeview树形结构应用.docx

    - 引入`jquery.treeview.js`,这是treeview插件的JavaScript文件,提供了创建和操作树形结构的功能。 2. **编写HTML结构**: 创建一个HTML页面`treeview_jQuery.html`,在`&lt;head&gt;`部分包含必需的CSS和JS引用。...

    bootstrop 树形结构模版

    Bootstrap Tree ...理解并熟练运用 `tree-multiselect.js` 插件,可以帮助你在 Bootstrap 项目中构建功能强大的树形结构选择器,提高用户体验。记得在实际使用前,先仔细阅读文档和示例,以便更好地掌握其用法。

    Mtree树形结构菜单

    在IT领域,树形结构菜单是一种常见的用户界面元素,它以层级化的方式组织信息,使得用户能够更加直观地浏览和导航复杂的数据结构。本项目名为"Mtree树形结构菜单",其核心功能是提供一个五级深度的菜单系统,允许...

    bootstrap树形下拉框 下拉框树形菜单

    在本场景中,我们将探讨如何利用`bootstrap-treeview.js`创建一个带有树形结构的下拉菜单。 首先,你需要确保已经包含了Bootstrap的基本样式和JavaScript库,这通常包括`bootstrap.css`和`bootstrap.js`。这些文件...

    基于jquery的树形结构JsTree 使用心得

    JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享一些实用的技巧和注意事项。 ### 一、Js...

    js代码-数组转化树形结构

    在JavaScript开发中,数组到树形结构的转换是一种常见的数据处理需求,特别是在处理层次结构数据时,例如组织结构、文件目录或菜单系统等。数组到树形结构的转换可以帮助我们更方便地展示和操作这些数据。本文将详细...

    vue实现树形结构样式和功能的实例代码

    在介绍如何使用Vue实现树形结构样式和功能时,我们首先要了解树形结构在前端界面中是如何体现的。树形结构通常用来表示有层级关系的数据,比如文件系统的目录结构,组织架构图等。在Web开发中,树形控件允许用户以...

    jstree+JS树形菜单合集

    本资源"jstree+JS树形菜单合集"聚焦于JavaScript实现的树形菜单,涵盖了多种应用场景和实现方式。 首先,我们来看"struts+hibernate树形菜单"。Struts是Java Web开发中的一个MVC框架,而Hibernate则是一个ORM(对象...

    javascript树形菜单

    JavaScript树形菜单是一种常见的用户界面元素,用于组织和展示层次化的数据或选项。在网页设计和开发中,这种菜单能够帮助用户以清晰、直观的方式浏览和操作多级数据,例如文件系统、组织结构或者导航菜单。...

    树形结构显示插件zTree_v3-3.5.28

    zTree是一款广泛应用于Web开发中的树形结构显示插件,特别适用于构建层级关系清晰、交互友好的界面。该插件以其灵活性、易用性和丰富的功能深受开发者喜爱。在本文中,我们将深入探讨zTree的核心特性、使用方法以及...

    struts简单示例+js树形菜单

    - **HTML结构**:创建基本的HTML元素,如`&lt;ul&gt;`和`&lt;li&gt;`,作为树形结构的基础。 - **CSS样式**:定义树形菜单的外观,包括展开/折叠的图标、层级间距等。 - **JavaScript逻辑**:处理点击事件,实现节点的展开与...

    javascript 树形菜单

    JavaScript树形菜单是一种常见的网页交互元素,用于展示层次结构的数据,比如网站导航、组织结构或者文件系统。在本文中,我们将深入探讨JavaScript实现树形菜单的核心概念、常见方法以及相关工具。 首先,让我们...

    ExtJs2.0 SSH 实现简单结构与上传文件 数据库同步树形结构

    标题中的“ExtJs2.0 SSH 实现简单结构与上传文件 数据库同步树形结构”表明了这个项目的核心特性。首先,`ExtJs2.0`用于构建用户界面,尤其是树形结构展示,这在数据管理中十分常见,如组织架构、文件目录等。树形...

    基于ztree封装的Vue树形组件,轻松实现海量数据的高性能渲染.zip

    总之,这个"基于ztree封装的Vue树形组件"为Vue开发者提供了一种高效处理大规模层级数据的工具,结合了zTree的强大功能和Vue的便捷性,使得在构建复杂前端应用时,能够更加轻松地实现树形结构的展示和交互。

    无限级别动态树形菜单

    3. **动态生成**:指根据后台传来的数据实时构建树形结构的过程。这种方式灵活性高,适用于数据经常变动的情况。 #### 三、技术选型与实现原理 1. **XML 数据格式**:用于存储树形结构数据,易于理解和处理。通过 ...

    树形下拉列表框

    在网页开发中,JavaScript 是实现这一功能的主要编程语言,它可以对HTML中的`&lt;select&gt;`元素进行扩展和定制,以创建出具有树形结构的下拉菜单。 ### JavaScript 与 Select 标签 在HTML中,`&lt;select&gt;`元素用于创建一...

    树形表格 treetable 完整版 带演示demo例子

    总之,“树形表格treetable完整版”提供了一种高效且灵活的方式来处理和展示层次数据,配合其演示demo,开发者可以轻松地将这种功能整合到自己的项目中,提升数据展现的直观性和用户体验。通过二次开发,可以进一步...

Global site tag (gtag.js) - Google Analytics