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 相关文章推荐
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
网页打开自动最大化的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在各种web服务器的运行模式详解
2013/06/03 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php简单的上传类分享
2016/05/15 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
react路由配置方式详解
2017/08/07 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
vue实现分页加载效果
2019/12/24 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python任务调度实例分析
2015/05/19 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
Python如何将装饰器定义为类
2020/07/30 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
满月酒答谢词
2014/01/14 职场文书
白酒市场营销方案
2014/02/25 职场文书
推广普通话标语
2014/06/27 职场文书
战略合作意向书
2014/07/29 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
vue项目支付功能代码详解
2022/02/18 Vue.js