关于 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 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
js实现无缝滚动双图切换效果
Jul 09 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
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
Python中replace方法实例分析
2014/08/20 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python中turtle库的使用实例
2019/09/09 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
高三自我鉴定范文
2013/10/19 职场文书
中学生学习生活的自我评价
2013/10/26 职场文书
档案接收函范文
2014/01/10 职场文书
毕业评语大全
2014/05/04 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
春季防火方案
2014/05/10 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
爱的教育读书笔记
2015/06/26 职场文书
教师节主题班会方案
2015/08/17 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js