一、平级结构转树形结构

/**
* 平级结构转树形结构
*
* 示例: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方法,用来处理树形结构!的更多相关文章

  1. Vue.js学习(八)—— 树形结构下拉框组件vue-treeselect

    vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持. 具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow ...

  2. vue.js与element-ui实现菜单树形结构

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法.借鉴文章链接在最底部. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如 ...

  3. js中同一个onclick绑定了两个js方法出现的问题

    问题: js中如果同一个onclick绑定了两个js方法问题,即 <li onclick="f1(),f2()"></li> 两个方法f1,f2中都分别有一 ...

  4. 两种js方法发起微信支付:WeixinJSBridge,wx.chooseWXPay区别

    原文链接:https://www.2cto.com/weixin/201507/412752.html 1.为什么会有两种JS方法可以发起微信支付? 当你登陆微信公众号之后,左边有两个菜单栏,一个是微 ...

  5. 公共的强制保留两位小数的js方法

    强制保留两位小数的js方法 //写一个公共的强制保留两位小数的js方法 function toDecimal2 (x) { var f = parseFloat(x) if (isNaN(f)) { ...

  6. 两个变量交换的四种方法(Java) 七种方法(JS)

    两个变量交换的四种方法(Java)   对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) 1 class TestEV 2 ...

  7. JS调用OC方法并传值,OC调用JS方法并传值////////////////////////zz

     iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)     最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...

  8. 解决同一页面中两个iframe互相调用jquery,js函数

    这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframe width="10 ...

  9. 常用js方法整理(个人)

    开头总要有点废话 今天想了下,还是分享下自己平时积累的一些实用性较高的js方法,供大家指点和评价.本想分篇介绍,发现有点画蛇添足.整理了下也没多少拿得出手的方法,自然有一些是网上看到的个人觉得很有实用 ...

随机推荐

  1. 现有教学数据库JX_DB,作业

    现有教学数据库JX_DB,数据库有以下三个基本表: 学生表student,它由学号sno.姓名sname.性别sex.出生日期Bdate.所在系dept五个属性构成.其中,学号不能为空,值是唯一的: ...

  2. 【Rust】使用HashMap解决官方文档中的闭包限制

    问题概述 值缓存是一种更加广泛的实用行为,我们可能希望在代码中的其他闭包中也使用他们.然而,目前 Cacher 的实现存在两个小问题,这使得在不同上下文中复用变得很困难. 第一个问题是 Cacher  ...

  3. 如何使用picGo+typora配置云笔记

    PicGo的使用 安装 picGo 2.3版本 (window可用)---官网有点慢,已经下载到个人仓库 https://gitee.com/lht1132950411/study/blob/mast ...

  4. 简历应该怎么写,HR看一篇简历仅需要5秒吗,简历模板大全

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 最近有很多小伙伴问奇哥,说奇哥 ...

  5. docker 快速上手

    Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口 安装 docker 设置仓库 $ sudo yum install -y yum-utils $ sudo yum-conf ...

  6. 白嫖Azure与体验GoLand远程开发

    前言 近期因为有本地开发远程使用Linux编译部署的需求,而虚拟机的性能实在是不敢恭维,WSL的坑之前也踩过(没有systemd等),故考虑使用SSH连接云服务器开发. 目前VSCode提出了Remo ...

  7. CentOS7及以下版本安装禅道

    由于是CentOS7以及以下系统,禅道已经集成了 Apache Nginx Mysql 服务,不需要我们再次安装搭建,我们只进行解压使用就好: 一.进行下载安装 1.在终端命令中输入以下命令确认系统是 ...

  8. 一个支持数据绑定与数据联动的Dashboard

    什么是仪表盘 仪表盘是不同部件的组合,可以在一个页面集中显示各类信息,方便用户集中查看信息.并快速处理业务 关于制作部件,请参见:制作部件 CabloyJS仪表盘的特点 更灵活的自适应能力,可以针对m ...

  9. 实验一:在FW上配置静态路由实现互通

    实验:在FW上配置静态路由实现互通 网络拓扑图 一.配置步骤 1.配置IP地址 R1: FW: ISP:       2.配置路由 ①在R2上面配置静态路由 ②在ISP上面配置静态路由 3.在FW上配 ...

  10. c++ 超长整数减法 高精度减法

    c++ 超长整数减法 高精度减法 实现思路 和加法类似,设置临时变量记录借位 当对应位数相减得到的结果大于等于0时,该位数字为本身值,否则需要加上借位的10.则\(t=(t+10)%10\) 打卡代码 ...