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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
JS随机数产生代码分享
Feb 24 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
详解JWT token心得与使用实例
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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
在Django中限制已登录用户的访问的方法
2015/07/23 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
宿舍违规检讨书
2014/01/12 职场文书
财务人员担保书
2014/05/13 职场文书
领导干部对照检查材料
2014/08/24 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA