贴代码:

// 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 代码递归实现树形数据与数组相互转换。的更多相关文章

  1. js利用递归生成随机数填充到数组

    用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值 var  array = new Array(5); function addNumToArray(array,num){     i ...

  2. table-tree 表格树、树形数据处理、数据转树形数据

    前言 公司想搞个表格树的展示页面,看着element有个表格树,还以为可以用. 用出来只用表格没有树,研究半天没研究个所以然,只能从新找个 npm里找到一个:vue-table-with-tree-g ...

  3. SqlServer 递归查询树形数据

    一直没有在意过数据库处理树形数据的重要性,直到有一天朋友问起我关于树形数据查询的问题时才发现根本不会,正好这个时候也要用到递归进行树形数据的查询于是在网上查了一圈,语法总结如下 参考文献:https: ...

  4. WPF下递归生成树形数据绑定到TreeView上

    最终效果图:(用于学习类的效果 图片丑了点,看官莫怪) 新建窗体 然后在前端适当位置插入如下代码: <TreeView x:Name="> <TreeView.ItemTe ...

  5. js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码

    一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...

  6. m_Orchestrate learning system---三十五、php数据和js数据的解耦:php数据(php代码)不要放到js代码中

    m_Orchestrate learning system---三十五.php数据和js数据的解耦:php数据(php代码)不要放到js代码中 一.总结 一句话总结:也就是以html为中介,用html ...

  7. JS随机生成不重复数据的代码分享

    JS随机生成不重复数据. 代码如下: <script> // 定义存放生成随机数的数组 var array=new Array(); // 循环N次生成随机数 for(var i = 0 ...

  8. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  9. js格式化树形数据(扁平化数据)

    需求: 1.把如下数据按照parent_id等于id的规则建立父子关系 2.同一层级的数组按照order升序 [ { "id": 1, "name": &quo ...

  10. PHP 发布两个不用递归的树形数组构造函数(转)

    <?php/** *创建父节点树形数组 * 参数 $ar 数组,邻接列表方式组织的数据 $id 数组中作为主键的下标或关联键名 $pid 数组中作为父键的下标或关联键名 * 返回 多维数组 ** ...

随机推荐

  1. win10+py38环境分分钟装好geopandas

    python版本是anaconda自带3.8,尝试了下面这个网上最推荐的安装方法 conda install --channel conda-forge geopandas 但多次以失败告终,看了几个 ...

  2. idea因时区连不上msyql8问题

    转载自https://www.cnblogs.com/lakei/p/11303174.html Connection to api@localhost failed. [08001] Could n ...

  3. oracle查看归档信息

    1.查看归档信息 show parameter recovery_file_dest #查看归档目录 show parameter recovery_file_dest_size #查看归档可以存储的 ...

  4. rhel8.0配置本地 yum 源

    1.首先挂载cdromcat >> /etc/fstab  <<EOF/dev/sr0        /media                  iso9660       ...

  5. 用cmd的方式执行exe程序

    在asp.net中调用process.start执行程序,需要设置运行iis进程用户的权限,比较麻烦, MS的站点上有一篇说明:http://support.microsoft.com/default ...

  6. leecode 19 快慢指针

    记录leecode刷题思路 19. 删除链表的倒数第 N 个结点 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点. 示例 1: 输入:head = [1,2,3,4,5], n = ...

  7. 源码安装pg9.6

    源码安装pg9.6 添加用户 useradd pg96 下载源码包 wget https://ftp.postgresql.org/pub/source/v9.6.24/postgresql-9.6. ...

  8. Docker学习——Kubernetes(八)

    在线阅读:GitBook 下载:pdf Kubernetes 是 Google 团队发起并维护的基于 Docker 的开源容器集群管理系统,它不仅支持常见的云平台,而且支持内部数据中心. 建于 Doc ...

  9. 1.3 C语言--指针与结构体

    指针 指针概念的引入 关于内存 程序有数据和指令组成,数据和指令在执行过程中存放在内存中.变量是程序数据中的一种,因此变量也存储在内存中:内存中的每个字节都有一个唯一的编码,即内存地址.32位机的内存 ...

  10. 前端通过input 输入框实现动态添加行 , 键盘上下左右点击可同步操作中心位置

    1. input 代码 ,我们项目组的input封装了,不过不影响使用 通过 @keyup 事件绑定show方法,需要将当前行的信息以及index传递,方便操作 另外要单独给这些需要操作的输入框添加c ...