Js 代码递归实现树形数据与数组相互转换。
贴代码:
// Grid-》Tree 结构组装。
var tree = [];
this.setTreeData(table, tree, "");
//组装树形
setTreeData = (source, list, pid) => {
if (typeof (source) == "undefined") return;
source.forEach((father) => {
if (father.PID == pid) {
list.push(father);
if (!father.IsLowest) {
if (typeof (father.children) == "undefined") {
father.children = [];
}
father.children = this.setTreeData(source, father.children, father.ContractListDtlID);
}
}
//Tree -> 数组机构
//树形数据转换成grid,调用者自己决定children 属性删除与否 2019-
var list= [];
this.setGridDataFromTree(list, tree, "");
setGridDataFromTree= function(list,dataSource){
if (!(Array.isArray(dataSource) && dataSource.length >0)) return ;
dataSource.forEach((father) => {
// debugger;
list.push(father);
if (typeof (father.children) == "undefined") {
} else {
this.setGridDataFromTree(list, father.children);
}
});
// return;
}
})
return list;
}
如上代码在开发React项目, 用到内容。
需要注意的是, Gird 与Tree 结构转换是一个引用赋值。 也就是说改gird 或者treeData之后 值会影响变。
不需要的话,深拷贝之后再转。
浅拷贝的好处就是利用引用特性, 改treeData 值界面保存后去gridData 是可以的, 减少了TreeData -》 GridData 操作。
当然控件本身需要额外增加这种判断,来做显示界面刷新。
shouldComponentUpdate(newProps, newState) {
if (newProps.tableData !== this.props.tableData
|| JSON.stringify(newProps.tableData) !== JSON.stringify(this.props.tableData)) {
this.loadData(newProps);
}
// debugger;
return true;
}
Js 代码递归实现树形数据与数组相互转换。的更多相关文章
- js利用递归生成随机数填充到数组
用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值 var array = new Array(5); function addNumToArray(array,num){ i ...
- table-tree 表格树、树形数据处理、数据转树形数据
前言 公司想搞个表格树的展示页面,看着element有个表格树,还以为可以用. 用出来只用表格没有树,研究半天没研究个所以然,只能从新找个 npm里找到一个:vue-table-with-tree-g ...
- SqlServer 递归查询树形数据
一直没有在意过数据库处理树形数据的重要性,直到有一天朋友问起我关于树形数据查询的问题时才发现根本不会,正好这个时候也要用到递归进行树形数据的查询于是在网上查了一圈,语法总结如下 参考文献:https: ...
- WPF下递归生成树形数据绑定到TreeView上
最终效果图:(用于学习类的效果 图片丑了点,看官莫怪) 新建窗体 然后在前端适当位置插入如下代码: <TreeView x:Name="> <TreeView.ItemTe ...
- js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码
一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...
- m_Orchestrate learning system---三十五、php数据和js数据的解耦:php数据(php代码)不要放到js代码中
m_Orchestrate learning system---三十五.php数据和js数据的解耦:php数据(php代码)不要放到js代码中 一.总结 一句话总结:也就是以html为中介,用html ...
- JS随机生成不重复数据的代码分享
JS随机生成不重复数据. 代码如下: <script> // 定义存放生成随机数的数组 var array=new Array(); // 循环N次生成随机数 for(var i = 0 ...
- js递归生成树形下拉菜单
需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...
- js格式化树形数据(扁平化数据)
需求: 1.把如下数据按照parent_id等于id的规则建立父子关系 2.同一层级的数组按照order升序 [ { "id": 1, "name": &quo ...
- PHP 发布两个不用递归的树形数组构造函数(转)
<?php/** *创建父节点树形数组 * 参数 $ar 数组,邻接列表方式组织的数据 $id 数组中作为主键的下标或关联键名 $pid 数组中作为父键的下标或关联键名 * 返回 多维数组 ** ...
随机推荐
- beanshell脚本构造生成随机大小的文件
文件下载地址:链接: https://pan.baidu.com/s/1wum8hfBeLMipdtQlqysp8A?pwd=8e7r 提取码: 8e7r #!/bin/bash -e # sh fi ...
- docker的生命周期
所有博客仅用于自己学习记录,如有侵权请联系删除,文章来源于公开视频资料,如有需要请移步这里:https://www.bilibili.com/video/BV1o14y1w7b8?p=11&v ...
- pgsql 自定义函数
CREATE OR REPLACE FUNCTION test1(id INTEGER,id1 INTEGER) RETURNS INTEGER LANGUAGE plpgsql AS $$ decl ...
- 不安全的权限 0644,建议使用 0600 虚拟机无法分配内存 virtual memory exhausted: Cannot allocate memory
我都不知道我写了啥,自己都很混乱 aoteman@aoteman-virtual-machine:/tmp$ sudo -s #进入root用户模式 [sudo] aoteman 的密码: 12对不起 ...
- Linux 查询 磁盘空间 系统报错:No space left on device
报这个错误是磁盘空间不足导致的 使用 du -h -d 1 / | sort -nr 这个命令 一级一级排查
- adb 测试常用命令
adb 环境安装并配置环境变量 常用命令汇总: 1.查看电脑已经连接的手机设备 adb devices 2.通过logcat日志获取应用APP入口 mac/linux:adb logcat Activ ...
- Mac技术服务, 感谢 点赞打赏!
Mac技术服务 首先,非常感谢大家对我的支持和鼓励,我会继续给大家提供更好更优秀的服务 如果需要单独解决Mac问题,您也可以选择付费服务,感谢大家的理解与支持! * 普通问题/软件安装:10元--10 ...
- 【电脑】电脑windows10添加开机启动项
1.添加开机启动项,首先按组合键"win+R"唤出运行窗口,输入"shell:startup"点击确认,打开启动项文件夹. 2.将需要设置为开机启动的软件快捷方 ...
- NIO基本编写
一.编写server端 1 public class Server implements Runnable{ 2 //1 多路复用器(管理所有的通道) 3 private Selector selet ...
- 20220305认证第1题 leetcode 1385. 两个数组间的距离值
给你两个整数数组 arr1 , arr2 和一个整数 d ,请你返回两个数组之间的 距离值 . 「距离值」 定义为符合此距离要求的元素数目:对于元素 arr1[i] ,不存在任何元素 arr2[j] ...