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

2024-10-22 07:02:11

想要实现从本地中加载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节点的一些选中操作以及图片的加载，但是无论怎么调试，总是会出现一条错误

无法获取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的问题解析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jQuery生成假加载动画效果

在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("
如何解决jQuery EasyUI 已打开Tab重新加载问题

先给大家说下我的需求,如下: 点击左侧已经打开的tab可以刷新重新加载datagrid. 也就是说解决easyui 左侧tab重新刷新加载问题实现. 实现如下: function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title : subtitle, content :<span style="font-family: Arial, Helv
jQuery按需加载轮播图(web前端性能优化)

引言关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图! 思路为什么说网上其他一些轮播图不符合我的要求?我的需求又是什么呢? 现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是,先把图片和链接的 HTML 写好,然后控制隐藏和显示来轮流展示当前的幻灯图片.但是对用户而言,我们始终只是看到当前的一张图片,那其他几张隐藏的图片为什么要事先加载
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件

从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包
jQuery页面加载初始化常用的三种方法

当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码代码如下: <script type="text/javascript" src="./js/jquery-1.7.min.js"></script> 复制代码代码如下: <script type="text/javascript">
详解jQuery lazyload 懒加载

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项淡入效果对不支持JavaScript浏览器的降级处理水平滚动容器内水平滚动容器内垂直滚动
jquery加载页面的方法(页面加载完成就执行)

1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add
jquery使用EasyUI Tree异步加载JSON数据（生成树）

这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考虑采用异步加载. 但是因为后台默认传来的数据是一个实体,所以又在后台进行了JSON字符串拼接. 最后,在网上找了N多代码,然后又去问了好几个群里的网友,终于搞出来这个小东西. 一.HTML部分代码 <div id="categoryChooseDiv" title="请选
jquery.lazyload 实现图片延迟加载jquery插件

什么是ImageLazyLoad技术在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil
jquery实现页面加载效果

1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false). 2.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

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

相关推荐

随机推荐