js实现树级递归,通过js生成tree树形菜单(递归算法)
方法封装:
/**
* 数据转换为树形(递归),示例:toTreeByRecursion(source, 'id', 'parentId', null, 'children')
* @param {Array} source 数据
* @param {String} idField 标识字段名称
* @param {String} parentIdField 父标识字段名称
* @param {Any} parentIdNoneValue 父级标识空值
* @param {String} childrenField 子节点字段名称
* @param {Object} treeOption tree树形配置
*/function toTreeByRecursion (
source = [],
idField = 'id',
parentIdField = 'parentId',
parentIdNoneValue = '',
childrenField = 'children',
treeOption = undefined
) {
const treeOptions = {
enable: false, // 是否开启转tree插件数据
keyField: 'key', // 标识字段名称,默认为key
valueField: 'value', // 值字段名称,默认为value
titleField: 'title', // 标题字段名称,默认为title keyFieldBind: 'id', // 标识字段绑定字段名称,默认为id
valueFieldBind: 'id', // 值字段名称绑定字段名称,默认为id
titleFieldBind: 'name' // 标题字段名称绑定字段名称,默认为name
}
// 合并tree树形配置
if (treeOption) {
Object.assign(treeOptions, treeOption)
} // 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(source))
return cloneData.filter(parent => {
// 返回每一项的子级数组
const branchArr = cloneData.filter(child => parent[idField] === child[parentIdField]) // 绑定tree树形配置
if (treeOptions.enable) {
branchArr.map(child => {
child[treeOptions.keyField] = child[treeOptions.keyFieldBind]
child[treeOptions.valueField] = child[treeOptions.valueFieldBind]
child[treeOptions.titleField] = child[treeOptions.titleFieldBind]
return child
})
} // 如果存在子级,则给父级添加一个children属性,并赋值,否则赋值为空数组
if (branchArr.length > 0) {
parent[childrenField] = branchArr
} else {
parent[childrenField] = []
} // 绑定tree树形配置
if (treeOptions.enable) {
parent[treeOptions.keyField] = parent[treeOptions.keyFieldBind]
parent[treeOptions.valueField] = parent[treeOptions.valueFieldBind]
parent[treeOptions.titleField] = parent[treeOptions.titleFieldBind]
} return parent[parentIdField] === parentIdNoneValue // 返回第一层
})
}
使用示例:
var jsonData = [
{
id: '1',
name: '1',
parentId: null,
rank: 1
},
{
id: '2',
name: '1-1',
parentId: '1',
rank: 1
},
{
id: '3',
name: '1-2',
parentId: '1',
rank: 1
}, {
id: '4',
name: '2',
parentId: null,
rank: 1
},
{
id: '5',
name: '2-1',
parentId: '4',
rank: 1
},
{
id: '6',
name: '2-2',
parentId: '4',
rank: 1
},
{
id: '7',
name: '2-2-1',
parentId: '6',
rank: 1
}
]
const treeOption = {
enable: false, // 是否开启转tree插件数据
keyField: 'key', // 标识字段名称
valueField: 'value', // 值字段名称
titleField: 'title', // 标题字段名称 keyFieldBind: 'id', // 标识字段绑定字段名称
valueFieldBind: 'id', // 值字段名称绑定字段名称
titleFieldBind: 'name' // 标题字段名称绑定字段名称
}
const treeData = toTreeByRecursion(jsonData, 'id', 'parentId', null, 'children', treeOption)
console.log(treeData)
说明:
- parentIdNoneValue 父级标识空值这个参数如果跟你数据无父级时的值不一致时,就配置这个参数。比如:这里默认值为null,你根节点parentId的值为-1或''。
- treeOption 参数可以不传,如果要绑定tree树形控件(一般都会有key、value、title这三个字段),那就需要配置这个参数,如果参数默认的配置跟你的不一样,那就通过参数覆盖的方式重新定义。
- treeOption 的三个绑定字段是指绑定你数据中的字段,实质就是把原数据字段绑定的tree树形控件需要的三个字段key、value、title。
- 想到了再补充。。。
js实现树级递归,通过js生成tree树形菜单(递归算法)的更多相关文章
- js模仿块级作用域(js没有块级作用域私有作用域)
js模仿块级作用域(js没有块级作用域私有作用域) 一.总结 1.js没有块级作用域:在for循环中定义的i,出了for循环还是有这个i变量 2.js可以模拟块级作用域:用立即执行的匿名函数:(匿名函 ...
- 菜鸟笔记:node.js+mysql中将JSON数据构建为树(递归制作树状菜单数据接口)
初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...
- js无限级树菜单
以前做网站,树形菜单一般都很简单,自己定义风格样式,简单的js控制,后来原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现这个树比较简单好用. http://hovertree.com/texi ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- 6个函数的output看JS的块级作用域
1. var output = 0; (function() { output++; }()); console.log(output); 函数对全局的output进行操作,因为JS没有块级作用域,所 ...
- 下拉的DIV+CSS+JS二级树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery 树状结构 jQuery-treeview.js 插件
由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...
随机推荐
- 10-9 重要的内置函数(zip、filter、map、sorted)
reverse----reversed l = [1,2,3,4,5,6] l.reverse() #不会保留原列表 print(l) l =[1,2,3,4,5,6] l2 = reversed(l ...
- Python List cmp()方法
描述 cmp() 方法用于比较两个列表的元素.高佣联盟 www.cgewang.com 语法 cmp()方法语法: cmp(list1, list2) 参数 list1 -- 比较的列表. list2 ...
- PHP attributes() 函数
实例 返回 XML 的 body 元素的属性和值: <?php$note=<<<XML<note><to>Tove</to>高佣联盟 www ...
- Canal简介
以下内容主要摘自Canal 官方wiki和网友博客:https://www.jianshu.com/p/6299048fad66 一.背景 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨 ...
- mysqld_multi多实例部署
mysql多实例部署 目录 mysql多实例部署 下载软件 配置用户和组并解压二进制程序至/usr/local下 创建实例数据存放的目录 初始化各实例 配置配置文件/etc/my.cnf 启动各实例 ...
- JQuery插件,轻量级表单模型验证(续 一)
之前的代码结构,不方便扩展多结构的模型验证 重新结构设计了一下验证模型核心 var validateForm = (function(model) { model.Key = "[data- ...
- 导航菜单(动画)--- jQuery
本文章实现是一个导航菜单的功能 (1)点击当前菜单显示二级菜单,再次点击收起当前菜单. (2)当有一个二级菜单显示,点击其他菜单,上一个已点击菜单会收起.只展示当前点击的菜单,只显示一个菜单,类似手风 ...
- JavaScript笔记(二)
一.JavaScript面向对象 1.类 constructor 构造函数 constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成实例时,自动调用该 ...
- JVM初探(五):类的实例化
一.概述 我们知道,一个对象在可以被使用之前必须要被正确地实例化.而实例化实际指的就是以一个java类为模板创建对象/实例的过程.比如说常见的 Person = new Person()代码就是一个将 ...
- C#LeetCode刷题之#217-存在重复元素(Contains Duplicate)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3772 访问. 给定一个整数数组,判断是否存在重复元素. 如果任何 ...