EASYUI TREEGRID异步加载数据实现方法


Posted in Javascript onAugust 22, 2012

官方提供的treegrid的ex 我给大家贴出来看看吧:

$(function(){ 
$('#tt').treegrid({ 
url:'treegrid_data3.json', 
onAfterEdit:function(row,changes){ 
alert(row.name); 
} 
}); 
})

这个是页面初始化的。
看看他的JSON:
{"total":117,"rows":[ 
<SPAN style="COLOR: #ff0000">{"id":1,"code":"code1","name":"name1","addr":"address1","state":"closed"},</SPAN> 
{"id":11,"code":"code11","name":"name11","addr":"address11","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>}, 
{"id":12,"code":"code12","name":"name12","addr":"address12","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>}, 
{"id":21,"code":"code21","name":"name21","addr":"address21","_parentId":1}, 
{"id":22,"code":"code22","name":"name22","addr":"address22","_parentId":1}, 
{"id":31,"code":"code31","name":"name31","addr":"address31","_parentId":1}, 
{"id":32,"code":"code32","name":"name32","addr":"address32","_parentId":1}, 
{"id":41,"code":"code41","name":"name41","addr":"address41","_parentId":1}, 
{"id":42,"code":"code42","name":"name42","addr":"address42","_parentId":1}, 
{"id":51,"code":"code51","name":"name51","addr":"address51","_parentId":1}, 
{"id":52,"code":"code52","name":"name52","addr":"address52","_parentId":1}, 
{"id":61,"code":"code61","name":"name61","addr":"address61","_parentId":1}, 
{"id":62,"code":"code62","name":"name62","addr":"address62","_parentId":1}, 
{"id":71,"code":"code71","name":"name71","addr":"address71","_parentId":1}, 
{"id":72,"code":"code72","name":"name72","addr":"address72","_parentId":1}, 
{"id":81,"code":"code81","name":"name81","addr":"address81","_parentId":1}, 
{"id":82,"code":"code82","name":"name82","addr":"address82","_parentId":1}, 
{"id":91,"code":"code91","name":"name91","addr":"address91","_parentId":1}, 
{"id":92,"code":"code92","name":"name92","addr":"address92","_parentId":1}, 
{"id":110,"code":"code110","name":"name110","addr":"address110","_parentId":1}, 
{"id":120,"code":"code120","name":"name120","addr":"address120","_parentId":1} 
]}

标红的地方是特别有用的,我按照他的这个做法,自己做了一个,始终是没有数据的,后来发现了一个问题,
{"total":29,"rows":[ 
{"Id":25,"Ids":25,"name":"直辖市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2}, 
{"Id":44,"Ids":44,"name":"黑龙江","state":"closed","_parentId":2,"orderId":110}, 
{"Id":45,"Ids":45,"name":"吉林","state":"closed","_parentId":2,"orderId":1}, 
{"Id":46,"Ids":46,"name":"辽宁","state":"closed","_parentId":2,"orderId":3}, 
{"Id":47,"Ids":47,"name":"河北","state":"closed","_parentId":2,"orderId":4}, 
{"Id":48,"Ids":48,"name":"内蒙古","state":"closed","_parentId":2,"orderId":111}, 
{"Id":49,"Ids":49,"name":"山西","state":"closed","_parentId":2,"orderId":6}, 
{"Id":50,"Ids":50,"name":"江西","state":"closed","_parentId":2,"orderId":11}, 
{"Id":51,"Ids":51,"name":"山东","state":"closed","_parentId":2,"orderId":12}, 
{"Id":52,"Ids":52,"name":"台湾","state":"closed","_parentId":2,"orderId":13}, 
{"Id":53,"Ids":53,"name":"甘肃","state":"closed","_parentId":2,"orderId":15}, 
{"Id":54,"Ids":54,"name":"宁夏","state":"closed","_parentId":2,"orderId":16}, 
{"Id":55,"Ids":55,"name":"青海","state":"closed","_parentId":2,"orderId":17}, 
{"Id":56,"Ids":56,"name":"新疆","state":"closed","_parentId":2,"orderId":18}, 
{"Id":57,"Ids":57,"name":"云南","state":"closed","_parentId":2,"orderId":19}]}

上面这个数据 没有一个根节点,所以页面出来什么都没有。。。。。我的数据只有parentId这个玩意,所以页面一片空白。
这个问题修正了,但是又出现新的问题了。开始我的处理方式是直接把所有数据load进来,点击节点展开是没有问题的。但是所有数据一起装载,不光耗性能不说,还特别慢。
所以想到异步加载。又到官方上去看了半天,官方提供了一大堆事件,什么展开触发哦之类的,没有一个说到点上的。
我用火狐监听每次数据都加载了的,而且有返回正确的JSON
{"total":29,"rows":[ 
{"Id":25,"Ids":25,"name":"直辖市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2}, 
{"Id":44,"Ids":44,"name":"黑龙江","state":"closed","_parentId":2,"orderId":110},

。。。。<BR>经过我反复的对比tree和这个treegrid。最后发现treegrid 在请求过来的数据上有个total和rows ,而tree没有。

EASYUI TREEGRID异步加载数据实现方法

难道是这个total和rows在作怪,我赶紧把这个删掉了,果然数据出来了

EASYUI TREEGRID异步加载数据实现方法

大家可以百度一下,各种说法都有。

最后一个小结: easyui treegrid使用时需注意:

1、必须要有根节点;

2、父节点装载的数据格式和子节点装载的数据格式 是不一样的。
父节点需要total和rows 而子节点装载的时候和tree的数据格式相同。 目前只弄了个两级的,多级的还没有去试。留篇文章,以备后用。

也热烈欢迎大家指正。

Javascript 相关文章推荐
用JQUERY增删元素的代码
Feb 14 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
网页打开自动最大化的js代码
Aug 22 #Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 #Javascript
eval的两组性能测试数据
Aug 17 #Javascript
javascript五图轮播切换实用版
Aug 17 #Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 #Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 #Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 #Javascript
You might like
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
PHP 实现重载
2021/03/09 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python列表与元组详解实例
2013/11/01 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
pip install命令安装扩展库整理
2021/03/02 Python
绿化先进工作者事迹材料
2014/01/30 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
长江三峡导游词
2015/01/31 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
反邪教观后感
2015/06/11 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL