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 iframe内的函数调用实现方法
Jul 19 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
微信小程序自定义底部弹出框
Nov 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
php错误、异常处理机制(补充)
2012/05/07 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP children()函数讲解
2019/02/03 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
python实现巡检系统(solaris)示例
2014/04/02 Python
python中list循环语句用法实例
2014/11/10 Python
在Python中使用第三方模块的教程
2015/04/27 Python
Python二分查找详解
2015/09/13 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
对Python3 序列解包详解
2019/02/16 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
大专生自我评价
2014/01/28 职场文书
成绩单公证书
2014/04/10 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python