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 相关文章推荐
jquery获取当前点击对象的value方法
Feb 28 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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二维数组排序方法(array_multisort usort)
2013/12/25 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
JS编程小常识很有用
2012/11/26 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
浅析Python函数式编程
2018/10/06 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python常量折叠基础知识点讲解
2021/02/28 Python
一篇.NET面试题
2014/09/29 面试题
入党自我评价范文
2014/02/02 职场文书
中学生运动会入场词
2014/02/12 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
南极大冒险观后感
2015/06/05 职场文书
雷锋观后感
2015/06/10 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
Elasticsearch 索引操作和增删改查
2022/04/19 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers