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 数组中作为父键的下标或关联键名 * 返回 多维数组 ** ...
 
随机推荐
- 为什么 A 能 ping 通 B,B 却不能 ping 通 A ?
			
有开发小哥咨询了一个问题,记录一下处理过程分享给有需要的朋友. 问题如下: A.B 两台开发服务器连接交换机,并且 A.B 两台服务器的 IP 地址设置为同一个网段,却发现 A 能 ping 通 B ...
 - windows中的换行符和Linux中的换行符
			
# cat -A tmp.tmp 120.4987 12.717858^M$ ^M 对应的字符是 \r # cat tmp.txt | awk -vRS='\r\n' '{print $2,$1}' ...
 - taro+vue3+TS+Pinia+tailwindcss+NutUI项目创建与开发
			
一.初始化 1.Taro 基本安装并初始化项目 npx @tarojs/cli init WechatAppDemo -选择框架:vue3 -是否使用ts?y -请选择css预编译器:无 -请选择we ...
 - centos7 双网卡同网段双网关配置
			
需求: #1.服务器为双网卡: #2.网卡1为互联网 172.16.137.99/24/254 #3.网卡2为旅游专网 172.16.137.97/24/1 #4.互联网路由器为172.16.137. ...
 - centos7 添加自定义程序为系统服务
			
centos6版本的系统服务是/etc/init.d启动脚本的方式,centos7采用强大的systemctl来管理系统服务,大幅提供了系统服务的运行效率,但是服务的配置和以前版本完全不同,这是很大的 ...
 - Ngrinder 制作脚本-(二)
			
接上一篇文章:了解了Ngrinder的介绍和工作原理之后,相信大家都想着怎么使用这款工具进行性能测试 一.Ngrinder-Controller 的安装 环境要求: (1)jdk1.8以上 (2)Ja ...
 - ASPNET Core   ActionFilterAttribute中断后续请求
			
转载自:https://www.cnblogs.com/luconsole/p/4346669.html SPNET MVC如何正确的中断请求? 感觉是这样? 在aspnet开发过程中如果想要中断当前 ...
 - idea热部署插件JRebel激活
			
首先到github上去下载一个反向代理软件,我下载的是windows x64版本. https://github.com/ilanyu/ReverseProxy/releases/tag/v1.4 第 ...
 - ORACLE 创建只读用户
			
create user cxuser01 identified by test123 default tablespace USERS temporary tablespace TEMP; --创建 ...
 - Study python_02
			
分支结构 简单的使用if语句 使用if-else import random# 调用一个随机数包(只看if的情况可忽略) n1 = random.randrange(100) n2 = random. ...