一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点):

var serverList = [
{id : 2,pid : -1},
{id : 1,pid : -1},
{id : 3,pid : 1},
{id : 4,pid : 1},
{id : 5,pid : 1},
{id : 9,pid : 1},
{id : 10,pid : 9},
{id : 8,pid : 9},
{id : 7,pid : 8},
{id : 6,pid : 7},
{id : 11,pid : 6},
{id : 12,pid : 11},
{id : 16,pid : 12},
{id : 17,pid : 16},
{id : 18,pid : 17},
{id : 19,pid : 17},
{id : 20,pid : 17},
{id : 21,pid : 17},
{id : 22,pid : 21},
{id : 23,pid : 17},
{id : 24,pid : 17},
{id : 25,pid : 17},
{id : 26,pid : 17},
{id : 27,pid : 26},
{id : 28,pid : 27},
{id : 29,pid : 27},
{id : 30,pid : 29},
{id : 31,pid : 29},
{id : 13,pid : -1},
{id : 14,pid : 13},
{id : 15,pid : 14}
];

我通过缩进来显示它们的父子关系。

然而,easyui tree所需求数据的格式是这样的:

var treeList = [
{id : 2},
{id : 1,children : [
{id : 3},
{id : 4},
{id : 5},
{id : 9,children : [
{id : 10},
{id : 8,children : [
{id : 7,children : [
id : 6
]}
]},
       ......
]}
]}
];

如果采用分层加载,则只需通过简单的转换操作就能将后台查询出来的一层数据list转换成easyui tree的数据格式,

但是如果遇到一次全部加载的需求,我们就必须将后台查询出来的serverList转换成符合easyui tree 数据格式的treeList,为此我写了如下转换的JS方法:

function TreeHelper(list){
this.list = list;
}
(function(TreeHelper){
function getAllChildren(list,item){
var children = getNextLevelChildren(list,item);
for(var i=0,ii=children.length;i<ii;i++){
getAllChildren(list,children[i]);
}
}
//遍历list剩下的数据,找到item的下一层的子节点
function getNextLevelChildren(list,item){
var children = [];
for(var i=list.length-1;i>=0;i--){
var mid = list[i];
if(mid.pid === item.id){
delete mid.pid;
children.push(mid);
list.splice(i,1);
}
}
if(children.length > 0){
item.children = children;
}
return children;
}
TreeHelper.prototype.dataTransferer = function(){
var list = this.list;
//根节点必须在数组前面
list.sort(function(a,b){
if(a.pid > b.pid){
return 1;
}else{
return -1;
}
});
var item,
result = [];
//遍历根节点,递归处理其所有子节点的数据
//每处理完一个根节点,就将其及其所有子节点从list中删除,加快递归速度
while(list.length){
item = list[0];
list.splice(0,1);
delete item.pid;
getAllChildren(list,item);
result.push(item);
}
return result;
};
})(TreeHelper);

测试:

var treeData = new TreeHelper(serverList).dataTransferer();
console.log(JSON.stringify(treeData)); 输出:
[{"id":2},{"id":13,"children":[{"id":14,"children":[{"id":15}]}]},{"id":1,"children":[{"id":3},{"id":9,"children":[{"id":10},{"id":8,"children":[{"id":7,"children":[{"id":6,"children":[{"id":11,"children":[{"id":12,"children":[{"id":16,"children":[{"id":17,"children":[{"id":19},{"id":18},{"id":21,"children":[{"id":22}]},{"id":26,"children":[{"id":27,"children":[{"id":28},{"id":29,"children":[{"id":31},{"id":30}]}]}]},{"id":25},{"id":24},{"id":23},{"id":20}]}]}]}]}]}]}]}]},{"id":4},{"id":5}]}]

easyui tree 的数据格式转换的更多相关文章

  1. Jquery EasyUI Tree树形结构的Java实现(实体转换VO)

    前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...

  2. easyui tree loadFilter的使用

      实例化.这里增加了三个属性,可以指定idFiled,textFiled和parentField.所以这里的simpleData可以不严格转换成tree的数据格式. $(function(){ $( ...

  3. [转]easyui tree 模仿ztree 使用扁平化加载json

    原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...

  4. .Net Mvc 返回Json,动态生成EasyUI Tree

    最近做一个项目,开始接触EasyUI,感觉很强大,很适合我这种对前台不是很感冒的人.在学习Tree的过程中,感觉网上的资料挺乱的,很多只是把EasyUI API 抄了一遍.现在把最近这段时间的学到的, ...

  5. EasyUI tree 异步树与采用扁平化实现的同步树

    所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips:   可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...

  6. 通过EasyUI Tree说明SQL GUID和自增列ID的使用场景

    最新在开发中用到了EasyUI里面的Tree,通过API可以看到这个Tree的数据格式如下: 其中ID比较重要,API也说了,最开始我考虑到GUID比自增ID多占用了一些空间,所以采用的自增ID,测试 ...

  7. easyui tree 模仿ztree 使用扁平化加载json

    1,载入扩展JS //作者孙宇 //自定义loadFilter的实现 $.fn.tree.defaults.loadFilter = function (data, parent) { var opt ...

  8. 【原】无脑操作:EasyUI Tree实现左键只选择叶子节点、右键浮动菜单实现增删改

    Easyui中的Tree组件使用频率颇高,经常遇到的需求如下: 1.在树形结构上,只有叶子节点才能被选中,其他节点不能被选中: 2.在叶子节点上右键出现浮动菜单实现新增.删除.修改操作: 3.在非叶子 ...

  9. 【EasyUI学习-2】Easyui Tree的异步加载

    作者:ssslinppp       1. 摘要 2. tree的相关介绍 3. 异步加载tree数据,并实现tree的折叠展开 3.1 功能说明: 3.2 前台代码 3.3 后台代码 4. 其他 1 ...

随机推荐

  1. 加载xib文件的两种方式

    一.加载xib文件的两种方式 1.方法一(NewsCell是xib文件的名称) NSArray *objects = [[NSBundle mainBundle] loadNibNamed:@&quo ...

  2. Mac下一个/usr/include失踪

    Mac升级到Yosemite后,突然发现vim的YouCompleteMe代码提示所以空头支票成员,排查了一下,原本/usr/include目录中缺少.所有的C/C++头文件不见了. .. 第一次发现 ...

  3. 设计模式---订阅发布模式(Subscribe/Publish)

    设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...

  4. ACdream 1195 Sudoku Checker (暴力)

    Sudoku Checker Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Submi ...

  5. WinFrom打开一个窗体关闭另一个窗体

    在写Winform程序的时候,经常会遇到“打开一个新的窗体然后关闭本窗体”之类的问题.最常见的就是登陆界面和主窗体了.而最常见的处理方法就是表单判断正确后 new MainForm().Show(); ...

  6. REST 测试工具

    两款 REST 测试工具 用CURL命令行测试REST API 无疑是低效率的,这里把最近使用的两款 Chrome 插件总结下 POSTMAN 简单易用 REST Console 功能强大 使用的话用 ...

  7. IOC 容器在 ASP.NET MVC 中的应用

    IOC 容器在 ASP.NET MVC 中的应用 IOC:Inversion Of Control 翻译为控制反转,我们在面向对象软件开发过程中,一个应用程序它的底层结构可能由N种不同的构件来相互协作 ...

  8. Android仿微信气泡聊天界面设计

    微信的气泡聊天是仿iPhone自带短信而设计出来的,不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo,给大家分享一下!效果图如下: 气泡聊天最终要的是素材,要用到9.png文件的素材,这样气 ...

  9. 【值得收藏】符号计算软件Maple的学习资料汇编【可免费下载】

    Maple学习教程 Maple是目前世界上最为通用的数学和工程计算软件之一,在数学和科学领域享有盛誉,有“数学家的软件”之称.Maple在全球拥有数百万用户,被广泛地应用于科学.工程和教育等领域,用户 ...

  10. 浅谈DevExpress<六>:为chart创建动态数据源

    今天搞点稍微复杂些的东西,在列表中点击不同的行时,图表中显示和其数据关联的图,效果如下: