您的位置: 首页  >  IT文章  >  javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）

javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）

分类: IT文章 • 2024-12-02 10:40:25
javascript将行结构数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）

js接收到后台的数据如下

javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）
 1 /// 部门信息
 2 var departRows = [{
 3     parentDepartId: 'root',
 4     departId: 'DC',
 5     departName: '集团'
 6 }, {
 7     parentDepartId: 'DC',
 8     departId: '01',
 9     departName: '上海本部'
10 }, {
11     parentDepartId: 'DC',
12     departId: '02',
13     departName: '中华企业'
14 }, {
15     parentDepartId: '02',
16     departId: '0200',
17     departName: '中华企业股份有限公司本部'
18 }, {
19     parentDepartId: '02',
20     departId: '0201',
21     departName: '上海古北（集团）有限公司'
22 }, {
23     parentDepartId: '0201',
24     departId: '020100',
25     departName: '上海古北（集团）有限公司本部'
26 }, {
27     parentDepartId: '0201',
28     departId: '020101',
29     departName: '上海古北顾村置业有限公司'
30 }, {
31     parentDepartId: '0201',
32     departId: '020102',
33     departName: '上海古北京宸置业发展有限公司'
34 }, {
35     parentDepartId: '0201',
36     departId: '020103',
37     departName: '苏州洞庭房地产发展有限公司'
38 }];
View Code

通常我们所使用的一些tree插件是无法直接解析上边这种数据源的，那么我们怎么将行结构的数据转化为树形结构数据，提供给easyui、extjs等一系列tree控件使用呢？

javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）
 1 /// <summary>
 2 /// 行结构数据转化为树形结构数据
 3 /// </summary>
 4 /// <param name="rows">行结构数据</param> 
 5 /// <param name="attributes">属性信息</param> 
 6 function convertTreeData(rows, attributes) {
 7     var keyNodes = {}, parentKeyNodes = {};
 8     for (var i = 0; i < rows.length; i++) {
 9         var row = rows[i];
10         row.id = row[attributes.keyField];
11         row.parentId = row[attributes.parentKeyField];
12         row.text = row[attributes.textField];
13         row.children = [];
14 
15         keyNodes[row.id] = row;
16 
17         if (parentKeyNodes[row.parentId]) { parentKeyNodes[row.parentId].push(row); }
18         else { parentKeyNodes[row.parentId] = [row]; }
19 
20         var children = parentKeyNodes[row.id];
21         if (children) { row.children = children; }
22 
23         var pNode = keyNodes[row.parentId];
24         if (pNode) { pNode.children.push(row); }
25     }
26     return parentKeyNodes[attributes.rootParentId];
27 }
View Code

可以看到上边函数没有使用递归、嵌套循环等，只有一层循环，转化效率相对来说还是比较高效的，可以将此函数作为公用函数直接调用，也可以封装到插件内部使用。具体使用方法如下

javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）javascript将行构造数据转化为树形结构，可提供给常用的tree插件直接使用（高效转化方案）
 1 /// 属性配置信息
 2 var attributes = {
 3     // 标识字段名
 4     keyField: 'departId',
 5     // 上级标识字段名
 6     parentKeyField: 'parentDepartId',
 7     // 文本字段名
 8     textField: 'departName',
 9     // 根节点标识
10     rootKey: 'root'
11 }
12 
13 /// treeData即为转化后的树形结构数据
14 var treeData = convertTreeData(departRows, attributes);
15 
16 /// 可提供给easyui等插件直接使用
17 $('#testTree').tree({
18     data: treeData
19 });
View Code

相关推荐