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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
Js图片点击切换轮播实现代码
Jul 27 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
2006/12/23 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
vuex实现购物车的增加减少移除
2020/06/28 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python可迭代对象操作示例
2019/05/07 Python
Django REST framework内置路由用法
2019/07/26 Python
python3 深浅copy对比详解
2019/08/12 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
千元咖啡店的创业计划书范文
2013/12/29 职场文书
高中生期末评语大全
2014/01/28 职场文书
面试后的英文感谢信
2014/02/01 职场文书
关爱老人标语
2014/06/21 职场文书
岗位说明书标准范本
2014/07/30 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
公司转让协议书
2016/03/19 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS