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实现日历控件(年月日关闭按钮)
Dec 12 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
angularJS实现动态添加,删除div方法
Feb 27 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
服务器web工具 php环境下
2010/12/29 PHP
PHP学习笔记之一
2011/01/17 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
use jscript List Installed Software
2007/06/11 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
python 基础教程之Map使用方法
2017/01/17 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
在keras里实现自定义上采样层
2020/06/28 Python
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
应届生服务员求职信
2013/10/31 职场文书
茶叶生产计划书
2014/01/10 职场文书
教师求职自荐信
2014/03/09 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
大学生求职信范文
2014/05/24 职场文书
医学会议开幕词
2016/03/03 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
详解MySQL的内连接和外连接
2023/05/08 MySQL