JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用
类别:Web前端 浏览量:2360
时间:2016-9-21 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
});
标签:javascript
您可能感兴趣
- web前端快速入门之html(Web前端开发规范2017HTML/JavaScript/CSS)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- JavaScript中==和===的区别
- js使用递归解析(关于JavaScript递归经典案例题详析)
- javascript怎么编写游戏(javaScript实现网页版的弹球游戏)
- JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用
- javascript:void(0)的用法
- javascript四种数组(javascript数组includes、reduce的基本使用)
- javascript 开发网站(帮你提高开发效率的JavaScript20个技巧)
- javascript构造重复数组(JavaScript平铺数组转树形结构的实现示例)
- MVC中JavaScriptResult
- JavaScript中实现AES加密解密
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)
- JavaScript 常用的开发规范
- dedecms新手建站教程网页设计(DEDECMS幻灯片中JavaScript实际应用举例)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
热门推荐
- centos下ftp服务器搭建(CentOS搭建FTP文件服务的步骤)
- dede高性能设置(让dedecms生成html速度快1倍)
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产(CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产)
- 如何防止表单重复提交
- SqlServer生成连续数字根据指定的数字操作(SqlServer生成连续数字根据指定的数字操作)
- tomcat启动闪退拒绝访问(详解Tomcat双击startup.bat闪退的解决方法)
- dedecms编辑器教程(Dedecms v5.7 编辑器默认回车键换行改为换段落的修改方法)
- php怎么实现动态配置(php实现映射操作实例详解)
- DataTable的增删改查操作
- hashtable的javascript实现
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9