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
});

下载