两个比较好用的JS方法,用来处理树形结构!
一、平级结构转树形结构
/**
* 平级结构转树形结构
*
* 示例:const jsonDataTree = listTransToTreeData(jsonData, 'id', 'pid', 'chindren');
* @param list 平级数据列表
* @param idStr id的字符串
* @param pidStr 父id字符串
* @param chindrenStr children的字符串
*/
export const listTransToTreeData = (list: any, idStr: string, pidStr: string, chindrenStr: string) => {
let r = [], hash: any = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = list.length;
for (; i < len; i++) {
hash[list[i][id]] = list[i];
}
for (; j < len; j++) {
let aVal = list[j], hashVP = hash[aVal[pid]];
if (hashVP) {
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
} else {
r.push(aVal);
}
}
return r;
}
二、遍历树形结构并做一些处理事情
/**
* 遍历处理树形结构
* @param list 树形结构列表
* @param childName 子节点属性名,一般是children
* @param func 每个节点要执行的方法
* @param isOnlyLeaf 是否只在叶子节点执行该方法
* @param isChildCallBackFn 判断是否有children属性时执行的方法
*/
export function ergodicNodes(list: { [x: string]: any; }[],
childName: string | number,
func: (arg0: { [x: string]: any; }) => void, isOnlyLeaf: any,
isChildCallBackFn: Function) {
list.forEach((item: { [x: string]: any; }) => {
if (item[childName] && item[childName].length > 0) {
isChildCallBackFn(item);
ergodicNodes(item[childName], childName, func, isOnlyLeaf, isChildCallBackFn);
if (!isOnlyLeaf) {
for (let key in item) {
func(item)
}
return
}
} else {
for (let key in item) {
func(item)
}
return
}
})
return list;
}
ergodicNodes的用法示例
const treeList: any[] = listTransToTreeData(JSON.parse(JSON.stringify(_treeData.data)), 'id', 'pid', 'children');
// 每个节点执行的方法
const callback_fn = (item: any) => {
item.key = item.id;
item.title = item.name;
if(item.schemaName && item.pid === null) item.icon = <UserOutlined />;
if(item.schemaName && item.tableName) item.icon = <TableOutlined />;
};
// 有children属性时执行的方法
const child_callback = (item: any) => {};
const convertTree = ergodicNodes(treeList, 'children', callback_fn, false, child_callback);
setTreeData(convertTree);
两个比较好用的JS方法,用来处理树形结构!的更多相关文章
- Vue.js学习(八)—— 树形结构下拉框组件vue-treeselect
vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持. 具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow ...
- vue.js与element-ui实现菜单树形结构
由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法.借鉴文章链接在最底部. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如 ...
- js中同一个onclick绑定了两个js方法出现的问题
问题: js中如果同一个onclick绑定了两个js方法问题,即 <li onclick="f1(),f2()"></li> 两个方法f1,f2中都分别有一 ...
- 两种js方法发起微信支付:WeixinJSBridge,wx.chooseWXPay区别
原文链接:https://www.2cto.com/weixin/201507/412752.html 1.为什么会有两种JS方法可以发起微信支付? 当你登陆微信公众号之后,左边有两个菜单栏,一个是微 ...
- 公共的强制保留两位小数的js方法
强制保留两位小数的js方法 //写一个公共的强制保留两位小数的js方法 function toDecimal2 (x) { var f = parseFloat(x) if (isNaN(f)) { ...
- 两个变量交换的四种方法(Java) 七种方法(JS)
两个变量交换的四种方法(Java) 对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) 1 class TestEV 2 ...
- JS调用OC方法并传值,OC调用JS方法并传值////////////////////////zz
iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...
- 解决同一页面中两个iframe互相调用jquery,js函数
这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframe width="10 ...
- 常用js方法整理(个人)
开头总要有点废话 今天想了下,还是分享下自己平时积累的一些实用性较高的js方法,供大家指点和评价.本想分篇介绍,发现有点画蛇添足.整理了下也没多少拿得出手的方法,自然有一些是网上看到的个人觉得很有实用 ...
随机推荐
- SSO 方案演进
背景介绍 随着业务与技术的发展,现今比以往任何时候都更需要单点登录 SSO 身份验证. 现在几乎每个网站都需要某种形式的身份验证才能访问其功能和内容. 随着网站和服务数量的增加,集中登录系统已成为一种 ...
- springMvc和Hibernate集成实现用户添加
源码:http://pan.baidu.com/s/1i4xVLE9(百度云) 步骤:一.创建数据库(mysql) 二.导入相应jar包(注意不同数据库jdbc.jar包)配置web.xml.spri ...
- 安装Supervisor到CentOS(YUM)
Supervisor是一个Linux下进程管理工具. Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为守护进程,并监控进程状态,异常退出时能自动重启,可以 ...
- Beyond Compare文件对比神器,快来给文件找茬!
在工作中很多场景下都需要比对两个文件之间的差异,你是否还傻傻的同时打开两个文件,用眼睛一行一行的核对? 赶紧来试试这个神器Beyond Compare!!它可以快速的帮你找出两个文件的差异,而且还有其 ...
- 7. Docker CI、CD
在上图这个新建的docker-compose.yml文件中把刚才的代码粘贴进去. 可把上述文件保存后,然后到/etc/ssh/sshd_config文件中更改下对应的端口号即可. 然后重新启动sshd ...
- c++ 平衡树
平衡树的性质 它其实就是一个 BST(Binary Search Tree 二叉搜索树). 当然,不同的平衡树会有自己的特性 BST 的性质 只有一个:任意一个节点的左子树的所有节点都比它的优先级高, ...
- 深度学习与计算机视觉教程(15) | 视觉模型可视化与可解释性(CV通关指南·完结)
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/37 本文地址:http://www.showmeai.tech/article-det ...
- 剖析 SPI 在 Spring 中的应用
vivo 互联网服务器团队 - Ma Jian 一.概述 SPI(Service Provider Interface),是Java内置的一种服务提供发现机制,可以用来提高框架的扩展性,主要用于框架的 ...
- 关于Node.js 链接mysql超时处理(默认8小时)
备注:这是在pm2配置node环境下,超过8小时mysql自动关闭的情况下出现的解决方法:1.封装mysql.js var mysql = require('mysql'); var connecti ...
- nodeJS与MySQL实现分页数据以及倒序数据
大家在做项目时肯定会遇到列表类的数据,如果在前台一下子展示,速度肯定很慢,那么我们可以分页展示,比如说100条数据,每10条一页,在需要的时候加载一页,这样速度肯定会变快了.那么这里我给大家介绍如何在 ...