一般用来储存树数据的数据库表都含有两个整型字段: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. Model Validation in Asp.net MVC

    原文:Model Validation in Asp.net MVC 本文用于记录Pro ASP.NET MVC 3 Framework中阐述的数据验证的方式. 先说服务器端的吧.最简单的一种方式自然 ...

  2. 当今最流行的Node.js应用开发框架简介

    快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非 ...

  3. PHP时间戳与时间相互转换(精确到毫秒)

    原文:PHP时间戳与时间相互转换(精确到毫秒) /** 获取当前时间戳,精确到毫秒 */ function microtime_float(){   list($usec, $sec) = explo ...

  4. 如何把一个c语言程序做成windows服务开机自启动

    原文:如何把一个c语言程序做成windows服务开机自启动 目前写的程序是一个用c语言实现socket侦听的,那么如何把这个程序做成开机自启动呢? 我们是通过vs6.0,编译后生成了.exe文件,然后 ...

  5. 2014值得期待的Erlang两本新书

    在2014年的开头就有这样一个令人振奋的好消息,Erlang有一本新书即将出版 <The Erlang Runtime System>,其作者happi在2013年3月份发布了这本书的写作 ...

  6. Bootstrap transition.js 插件

    Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就 ...

  7. BZOJ 1208 HNOI2004 宠物收容所 平衡树/set

    标题效果:有一个宠物收容所.目前还没有被采纳的宠物或谁想要领养宠物,每个宠物有个性值,大家谁想要领养宠物具有理想人格值.每一刻,宠物收容所只是为了有谁想要领养宠物或宠物的人. 当领走宠物,将有一定程度 ...

  8. 假如我来架构12306网站---文章来自csdn(Jackxin Xu IT技术专栏)

    (一)概论 序言:  此文的撰写始于国庆期间,当中由于工作过于繁忙而不断终止撰写,最近在设计另一个电商平台时再次萌发了完善此文并且发布此文的想法,期望自己的绵薄之力能够给予各位同行一些火花,共同推进国 ...

  9. Linux下使用cat制作“内涵图”

    http://blog.csdn.net/odaynot/article/details/7939869

  10. Python框架之Django学习

    当前标签: Django   Python框架之Django学习笔记(十四) 尛鱼 2014-10-12 13:55 阅读:173 评论:0     Python框架之Django学习笔记(十三) 尛 ...