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

js接收到后台的数据如下

 /// 部门信息
 var departRows = [{
     parentDepartId: 'root',
     departId: 'DC',
     departName: '集团'
 }, {
     parentDepartId: 'DC',
     departId: '01',
     departName: '上海本部'
 }, {
     parentDepartId: 'DC',
     departId: '02',
     departName: '中华企业'
 }, {
     parentDepartId: '02',
     departId: '0200',
     departName: '中华企业股份有限公司本部'
 }, {
     parentDepartId: '02',
     departId: '0201',
     departName: '上海古北（集团）有限公司'
 }, {
     parentDepartId: '0201',
     departId: '020100',
     departName: '上海古北（集团）有限公司本部'
 }, {
     parentDepartId: '0201',
     departId: '020101',
     departName: '上海古北顾村置业有限公司'
 }, {
     parentDepartId: '0201',
     departId: '020102',
     departName: '上海古北京宸置业发展有限公司'
 }, {
     parentDepartId: '0201',
     departId: '020103',
     departName: '苏州洞庭房地产发展有限公司'
 }];

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

 /// <summary>
 /// 行结构数据转化为树形结构数据
 /// </summary>
 /// <param name="rows">行结构数据</param>
 /// <param name="attributes">属性信息</param>
 function convertTreeData(rows, attributes) {
     var keyNodes = {}, parentKeyNodes = {};
     for (var i = 0; i < rows.length; i++) {
         var row = rows[i];
         row.id = row[attributes.keyField];
         row.parentId = row[attributes.parentKeyField];
         row.text = row[attributes.textField];
         row.children = [];

         keyNodes[row.id] = row;

         if (parentKeyNodes[row.parentId]) { parentKeyNodes[row.parentId].push(row); }
         else { parentKeyNodes[row.parentId] = [row]; }

         var children = parentKeyNodes[row.id];
         if (children) { row.children = children; }

         var pNode = keyNodes[row.parentId];
         if (pNode) { pNode.children.push(row); }
     }
     return parentKeyNodes[attributes.rootParentId];
 }

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

使用方法

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

var treeData = convertTreeData(departRows, attributes);

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

下载