树结构转为表结构数据

于 2024-04-20 14:29:32 发布
阅读量166 收藏 1
点赞数 1
文章标签： 前端 javascript 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52209816/article/details/137998920
版权

convertToTableData(data) {

      const tableData = [];

      if (data && Array.isArray(data)) {

        // 遍历县

        data.forEach(county => {

          const countyName = county.areaname;

          if (county.children && Array.isArray(county.children)) {

            // 遍历街

            county.children.forEach(street => {

              const streetName = street.areaname;

              if (street.children && Array.isArray(street.children)) {

                // 遍历社区

                street.children.forEach(community => {

                  const communityName = community.areaname;

                  // 将当前区域信息转为对象并添加到数组中

                  tableData.push({

                    xian: countyName,

                    jiedao: streetName,

                    shequ: communityName

                  });

                });

              }

            });

          }

        });

      }

      return tableData;

    },

Xren-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于Vue + element制作扁平化树形结构渲染表格（动态行列合并，树结构算法应用）
m0_49083276的博客
09-15 2270
1）扁平转树和树形转扁平，element-ui的表格组件从数组索引0开始渲染一直到最后，如果后端没有按照顺序传数据会导致表格错乱，所以我们需要将数据二次处理（扁平转树再转扁平），达到整理数据的效果//扁平转树if (!} else {});} else {});},//树转扁平// 将当前节点添加到结果数组中// 递归遍历子节点// 从每个根节点开始遍历},//重构数据},
java代码将树形数据输出为excel表格（可以渲染无限级）
个人日常记录,分析
08-07 4128
用最简单描述，帮助大家最快速的上手！！！
用javascript实现的TreeTable, 可以当做树(Tree)用
11-09 3989
这个TreeTable，如果只有一列的话，就是常用的Tree控件了 这是我写的TreeTable.js文件 Javascript代码   var _treeTableIcons = {};   // 树结点是否有竖线，因为如果有竖线的话，行高过高，线就不能连在一起，很难看，最好像windows的资源管理器一样，不要添加结点之间的连线。默认也是不添加连线的   var
Layui实现TreeTable(树形数据表格)
RoyRaoHR的博客
10-21 1万+
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee：ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。 优化结果： 原页面 treetable实现的页面 实现 下载引入treetable.js 我用的版本是
vue中树状结构转行数据，并渲染成table的方法
Soul_mate_61的博客
11-06 6418
场景： 我们现在有一个树状结构的数据，如下图： 大概的数据结构如下： const tree = { value: '根节点', children: [ { value: '学校', children: [ { value: '学生', children: [ ...
javascript将扁平的数据转为树形结构的高效率算法
10-15
首先，要进行这种转换，数据源通常是一个数组，其中每个元素都有一个唯一的`id`和一个`parent_id`，用来标识其在树结构中的位置。例如，给定以下扁平数组： ```javascript let menu_list = [ // ... 省略的数组...
算法笔记，有序链表转为二叉搜索树
03-19
【有序链表转为二叉搜索树】 在计算机科学中，有序链表转换为高度平衡的二叉搜索树是一项常见的算法问题。这个问题的目标是利用已排序的链表数据，构建一棵二叉搜索树（BST），使得这棵树在保持二叉搜索树特性的...
数据结构期末试题51
08-03
1. 数据结构的基本结构分为集合、线性结构、树形结构和图状结构。物理结构主要包括顺序存储结构和链式存储结构。 2. 在连通图中，最少的边数是n-1，因为要确保所有顶点都能通过边相连。完全无向图的边数是n*(n-1)/2...
数据结构课设-文字分析统计
05-10
在这个项目中，常见的数据结构如数组、链表、栈、队列、树、图等可能会被用到。例如，数组和链表可以用于存储字符或单词；栈和队列可能在处理句子的前后关系时发挥作用；而树（如二叉树、Trie树）和图（如邻接矩阵或...
数据结构试卷及参考答案_71
08-08
本试卷涉及的数据结构知识点广泛，包括图的表示、最小生成树、排序算法、二叉树、完全二叉树、堆、哈夫曼树、链表、栈等。 1. **邻接表**：无向图的邻接表是一种图的存储方式，每个表头结点对应图中一个顶点，其...
【笔记】列表与树形结构相互转换
qq_36864724的博客
02-20 160
【代码】【笔记】列表与树形结构相互转换。
treeData 树结构数据处理(react)
最新发布
qq_38980678的博客
02-05 1080
=树(tree)==形结构是一种重要的非线性结构，依据分支关系定义的层次结构，在这种结构中，每个元素至多只有一个前趋，但可以有多个后继。在一个常规项目中，当我们遇到需要进行处理的tree结构数据，后端返回给前端的数据往往存在多层性和不确定性。：树(Tree)是n(n 大于等于0)个节点的有限集合T，当n=0时称为空树，否则，称为非空树。：根节点是第一层，其他的节点的层次是它的父节点的层次加1。：有子树的节点是它的子树的根节点的父节点。：A是B的父节点，则B是A的子节点。：位于树顶部的节点，它没有父节点。
纯JS 动态加载无限级树形结构tree到Table自动合并单元格
u013941372的博客
07-16 2104
有个奇葩？需求，要求把tree树形结构的数据显示到tabe上，因为级别不定包括上级的表格合并写起来还是有些难度的，所以给大家分享一下 先看一下成品 以下是json格式，可根据具体情况修改 { "result":{ "code":1, "data":{ "list":[ { "test":"01", "value":1,
table-tree 表格树、树形数据处理、数据转树形数据
dinghuoruo0011的博客
04-11 3500
前言 公司想搞个表格树的展示页面，看着element有个表格树，还以为可以用。 用出来只用表格没有树，研究半天没研究个所以然，只能从新找个 npm里找到一个：vue-table-with-tree-grid 正文 element的坑 element：http://element-cn.eleme.io/#/zh-CN/component/table ...
树形选择变成表格树选择
qq_42173653的博客
01-29 1335
需求：在接口不改动的情况下由树形结构改成表格树结构，如下图 原图 调整后 1.这里使用的是antdesign框架，首先将a-tree改为a-table <!-- <a-tree checkable v-model="checkedKeys" :treeData="menuTree" @check="checkItem"></a-tree> --> <a-table :columns="columns" :data-source="data" :pagi
HTML使用treeTable实现树形表格
热门推荐
weixin_39336385的博客
09-08 2万+
一、前言 参考文章：https://gitee.com/im286er/treetable-lay 备注:这个大佬写得很全面，也有演示地址，不过是直接读取本地的json文本，我写这文章就是补充下后端动态的给前端传值，本人小白，第一次写，主要是为了做下笔记，有需要的朋友将就的看下。 先看下效果图： 备注：我是用springboot写的，所以后面的所有静态文件都是放在/static/下 二、前端部分...
js 一维数组转为数结构
08-05
### 回答1： 在 JavaScript 中，可以使用 map() 函数将一维数组转换为树形结构。首先，需要对数组元素进行处理，使其具有 id、parentId 等属性，然后遍历数组，将元素划分到合适的父节点下。代码示例如下： ``` function convertToTree(data) { let tree = []; let map = {}; data.forEach(function (item) { map[item.id] = item; }); data.forEach(function (item) { let parent = map[item.parentId]; if (parent) { (parent.children || (parent.children = [])).push(item); } else { tree.push(item); } }); return tree; } ``` ### 回答2： 将一维数组转为树结构，可以通过递归的方式实现。 假设有一个一维数组arr，数组的元素是对象，每个对象有两个属性：id和parentId。id表示节点的唯一标识，parentId表示节点的父节点的id。 首先，创建一个空对象tree，用来存储转换后的树结构。然后，遍历数组arr，对每个数组元素进行处理。 对于数组元素arr[i]，判断其parentId是否为null或undefined，如果是，则将arr[i]作为根节点添加到tree中。否则，查找tree中的节点中id等于arr[i].parentId的节点，将arr[i]作为该节点的子节点添加到该节点下。 示例代码如下： ``` function arrayToTree(arr) { var tree = {}; for (var i = 0; i < arr.length; i++) { var node = arr[i]; if (node.parentId == null) { tree[node.id] = node; // 将根节点添加到tree中 } else { var parentNode = findNode(tree, node.parentId); // 查找父节点 if (parentNode) { if (!parentNode.children) { parentNode.children = []; // 初始化子节点数组 } parentNode.children.push(node); // 将子节点添加到父节点下 } } } return tree; } function findNode(tree, id) { for (var key in tree) { var node = tree[key]; if (node.id === id) { return node; } if (node.children) { var result = findNode(node.children, id); if (result) { return result; } } } return null; } ``` 以上是将一维数组转为树结构的一个简单示例。实际应用中，可以根据具体需求进行适当的调整和扩展。 ### 回答3： 将JavaScript中的一维数组转为数据结构，可以通过创建相关的数据结构来实现。 常见的数据结构包括栈、队列、链表和树等。下面以一维数组转为树结构为例进行说明。 首先，我们需要定义树的节点类Node，节点类通常包括一个值和指向子节点的指针。 ```javascript class Node { constructor(value) { this.value = value; this.children = []; } } ``` 接下来，我们可以编写一个函数将一维数组转为树结构。 ```javascript function arrayToTree(array) { // 创建根节点 const root = new Node(array[0]); let currentNode = root; for (let i = 1; i < array.length; i++) { // 如果数组元素比当前节点值小，则将其作为当前节点的子节点 if (array[i] < currentNode.value) { const childNode = new Node(array[i]); currentNode.children.push(childNode); currentNode = childNode; } // 如果数组元素比当前节点值大，则遍历当前节点的父节点，找到合适的位置 else if (array[i] > currentNode.value) { let parent = currentNode; while (parent && array[i] > parent.value) { parent = parent.parent; } const childNode = new Node(array[i]); parent.children.push(childNode); currentNode = childNode; } } return root; } ``` 使用以上函数，我们可以将一维数组转为树结构。 ```javascript const array = [3, 1, 4, 2, 5]; const tree = arrayToTree(array); console.log(tree); ``` 转换结果将会是一个树结构，并且通过console.log可以打印出树的结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Xren-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值