一般用来储存树数据的数据库表都含有两个整型字段: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. CSS3+HTML5特效2 - 翻转效果

    先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...

  2. 只显示年月的js时间控件 纯手写

    <style> #date { text-align: center; } .td { cursor: pointer; } </style> <script> f ...

  3. 候选键(unique)

    foreign key references  除了关联外键,还可以关联 候选键(unique) 需求 table1 中的  status  int  类型 ,表示状态 ,0 未启动 ,1 已启动,2 ...

  4. Notepad++ 配置 支持jquery、html、css、javascript、php代码提示

    原文:Notepad++ 配置 支持jquery.html.css.javascript.php代码提示 官网下载:http://notepad-plus-plus.org/ 获取插件的方法:打开软件 ...

  5. Linux---江湖

    Linux江湖13:我该如何备份系统 Posted on 2014-12-18 10:39 京山游侠 阅读(497) 评论(3) 编辑 收藏 在前面的一些文章中,我反复提到经常会把系统搞崩溃,所以备份 ...

  6. SQL点滴11—重置win7登录密码影响SQL登录

    原文:SQL点滴11-重置win7登录密码影响SQL登录 2011-04-20  修改机器登录密码后不能登录SQL Server 今天发现一个很有趣的现象.公司的电脑每两个月就会提示重置登录密码,今天 ...

  7. Java程序单元测试工具对比——Parasoft Jtest与Junit

    Web应用程序开发中,面向对象的Java语言占了不少的比重.对于Java应用程序的测试方法或方式多种多样,比较典型的是程序员自己来完成程序测试中的一个部分——单元测试. 之前,慧都资讯提到单元测试是程 ...

  8. MySQL之 ALTER vs CHANGE vs MODIFY COLUMN

    1.ALTER COLUMN 用于设置或者移除某一列的默认(缺省)值, 1.1用法 ALTER TABLE MyTable ALTER COLUMN foo SET DEFAULT 'bar'; AL ...

  9. CSS学习笔记之元素分类

    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...

  10. serialVersionUID行动

    ORIGINAL:未知 Java断类的serialVersionUID来验证版本号一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本地对应实体(类)的seria ...