JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用
JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用一、AJAX获取的Json数据
/// 部门信息
var departRows = [{
parentDepartId: 'root',
departId: 'DC',
departName: '集团'
}, {
parentDepartId: 'DC',
departId: '01',
departName: '上海总部'
}, {
parentDepartId: 'DC',
departId: '02',
departName: '苏州分部'
}, {
parentDepartId: '02',
departId: '0200',
departName: '苏州分部部门A'
}, {
parentDepartId: '02',
departId: '0201',
departName: '苏州分部部门B'
}, {
parentDepartId: '0201',
departId: '020100',
departName: '苏州分部部门B小组A'
}, {
parentDepartId: '0201',
departId: '020101',
departName: '苏州分部部门B小组B'
}, {
parentDepartId: '0201',
departId: '020102',
departName: '苏州分部部门B小组C'
}, {
parentDepartId: '0201',
departId: '020103',
departName: '苏州分部部门B小组D'
}];
二、通常tree插件是无法直接解析上边这种数据源的,转化方法
/// </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];
}
三、将转化的数据作为tree插件的数据源
/// 属性配置信息
var attributes = {
// 标识字段名
keyField: 'departId',
// 上级标识字段名
parentKeyField: 'parentDepartId',
// 文本字段名
textField: 'departName',
// 根节点标识
rootKey: 'root'
}
/// treeData即为转化后的树形结构数据
var treeData = convertTreeData(departRows, attributes);
/// 可提供给easyui等插件直接使用
$('#testTree').tree({
data: treeData
});