关于 jQuery Easyui异步加载tree的问题解析


Posted in Javascript onDecember 06, 2016

想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug

html中代码是这样的

<ul class="easyui-tree" id="tt"></ul>

js中的代码

$(".next-menu:nth-child(1) a").click(function() {
var $IDstr = $(this).attr("id"),
$treeIDNum = parseInt($(this).attr("treeID")),
jsonURL = "json/" + $IDstr + ".json",
node;
addAttr2Tree(jsonURL);
changeImgSrc($treeIDNum); 
});
});
function changeImgSrc(nodeID){
var node = $("#tt").tree('find', nodeID);
if(node){
$("#tt").tree('select', node.target);
}
if (node.attributes) {
$("#img-box").attr("src", node.attributes.url);
}
}
function addAttr2Tree(URL){
$("#tt").tree({
url: URL,
method: "get",
animate: true,
lines: true
});
}

起初是想通过一个按钮的点击事件来动态的加载tree的内容就是如上代码,addAttr2Tree 是用来将点击按钮时对应的本地json数据加到html中的ul标签中, changeImgSrc 是对tree节点的一些选中操作以及图片的加载,但是无论怎么调试,总是会出现一条错误

关于 jQuery Easyui异步加载tree的问题解析 

无法获取attributes属性!!!我反复确认attributes是完整无缺的放在json文件里的而且总是第一次点击按钮时才会出现这种错误,第二次及其以后,这种错误是没有的

后来我就想到,是不是因为json数据动态加载的速度比不上程序代码执行的速度?!

果然不出我所料!easyui中tree自带了一个方法onLoadSuccess 当数据成功加载时,才会执行一些操作
所以

$(".next-menu:nth-child(1) a").click(function() {
var $IDstr = $(this).attr("id"),
$treeIDNum = parseInt($(this).attr("treeID")),
jsonURL = "json/" + $IDstr + ".json",
node;
addAttr2Tree(jsonURL);
$("#tt").tree({
onLoadSuccess: function(){
changeImgSrc($treeIDNum);
}
});
});

代码改成这样就可以了。

以上所述是小编给大家介绍的jQuery Easyui异步加载tree的问题解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
详解如何较好的使用js
Dec 16 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 #Javascript
浅析JavaScript中作用域和作用域链
Dec 06 #Javascript
利用JS轻松实现获取表单数据
Dec 06 #Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 #Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 #Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 #Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
php工具型代码之印章抠图
2018/07/18 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
PHP面试题大全
2015/10/16 面试题
《我不是最弱小的》教学反思
2014/02/23 职场文书
绿色环保标语
2014/06/12 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
安全保证书
2015/01/16 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
2016情人节宣传语
2015/07/14 职场文书