你的位置:首页 > Java教程

[Java教程]javascript将行结构数据转化为树形结构,可提供给常用的tree插件直接使用(高效转化方案)


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

通常我们所使用的一些tree插件是无法直接解析上边这种数据源的,那么我们怎么将行结构的数据转化为树形结构数据,提供给easyui、extjs等一系列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

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

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

View Code
下载