本文将稍微提升点难度
一般树的插件 (比如 ztree), 初始化时都支持是两种 JSON 数据结构.
1. 标准结构
javascript 代码
- var root = {
- id: 'root',
- children: [
- {
- id: "1",
- children: [
- { id: "1-1", children: [] },
- { id: "1-2", children: [] }
- ]
- },
- {
- id: "2",
- children: [
- { id: "2-1", children: [] },
- { id: "2-2", children: [] }
- ]
- }
- ]
- };
2. 简单结构
javascript 代码
- var data = [
- { id: "root", pid: null },
- { id: "1", pid: "root" },
- { id: "1-1", pid: "1" },
- { id: "1-2", pid: "2" },
- { id: "2", pid: "root" },
- { id: "2-1", pid: "2" },
- { id: "2-2", pid: "2" }
- ]
标准结构本身就是树形结构, 简单结构是数组的形式, 这里不关心那种结构更好.
问题是:
某些树形插件值支持一种结构, 而后台的接口也可能只实现了另外一种形式.
那么就需要考虑这两种结构该如何相互转化?
此问题一看, 就知道需要使用递归.
1. 标准结构 => 简单结构
javascript 代码
- function transform(data, array, parent) {
- var node = {};
- node.id = data.id;
- node.pid = parent;
- array.push(node);
- data.children.forEach(function(element) {
- transform(element, array, data.id);
- });
- return array;
- }
- var root = {
- id: 'root',
- children: [
- {
- id: "1",
- children: [
- { id: "1-1", children: [] },
- { id: "1-2", children: [] }
- ]
- },
- {
- id: "2",
- children: [
- { id: "2-1", children: [] },
- { id: "2-2", children: [] }
- ]
- }
- ]
- };
- console.log( transform(root, [], null));
2. 简单结构 => 标准结构
javascript 代码
- function transform(data, object) {
- // 始终保证 object 有 children 属性
- !object.children && (object.children = []);
- // 遍历数组
- data.forEach(function(element) {
- if (element.pid == object.id) {
- // 根节点处理
- if (!element.pid) {
- object.id = element.id;
- } else {
- var node = {};
- node.id = element.id;
- object.children.push(node);
- // 针对此节点递归
- transform(data, node);
- }
- }
- });
- return object;
- }
- var data = [
- { id: "root", pid: null },
- { id: "1", pid: "root" },
- { id: "1-1", pid: "1" },
- { id: "1-2", pid: "1" },
- { id: "2", pid: "root" },
- { id: "2-1", pid: "2" },
- { id: "2-2", pid: "2" }
- ];
- console.log( transform(data, {}) )
上述递归中都有数据的传递, 这是一种 accumulator 技术. 比如第一个函数中的 array 和第二个函数中 data, 递归过程中始终是同一个数据.
上述递归算法尚有优化的空间, 尤其第二个. 写得过程中, 很容易绕晕. 最好读者自己重新实现一遍.
来源: http://www.qdfuns.com/article/17398/0910e72ca38b6d60ad76bc265e5ccf2d.html