JavaScript 将行结构数据转化为树结构数据源（高效转化方案）

js接收到后台的数据如下

 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

把行数据转化成树形结构数据源

 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

上边方法只使用了一个循环，没有递归、嵌套循环，转化效率相对来说还是比较高效的

使用方法

// 属性配置信息
var attributes = {
    // key对应字段
    keyField: 'departId',
    // 上级key对应字段
    parentKeyField: 'parentDepartId',
    // 文本对应字段
    textField: 'departName',
    // 根节点上级key对应的值
    rootKey: 'root'
}

var treeData = convertTreeData(departRows, attributes);

// easyui直接解析treeData
$('#testTree').tree({
    data: treeData
});

下载