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 div 遮罩层封锁整个页面
Jul 10 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 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
使用PHP编写的SVN类
2013/07/18 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Django Highcharts制作图表
2016/08/27 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
django模板结构优化的方法
2019/02/28 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
super()与this()的区别
2016/01/17 面试题
EJB实例的生命周期
2016/10/28 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
党校培训思想汇报
2013/12/30 职场文书
表彰先进的通报
2014/01/31 职场文书
高三政治教学反思
2014/02/06 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
公司股份合作协议书
2014/12/07 职场文书
人生遥控器观后感
2015/06/11 职场文书
Python基础知识之变量的详解
2021/04/14 Python