快捷導(dǎo)航

關(guān)于 jQuery Easyui異步加載tree的問(wèn)題解析

更新時(shí)間：2016年12月06日 16:55:07 作者：Amon_Chris

想要實(shí)現(xiàn)從本地中加載json文件，通過(guò)事件來(lái)動(dòng)態(tài)的插入到ul中時(shí)，遇到了一小bug,下面小編給大家解答下

想要實(shí)現(xiàn)從本地中加載json文件，通過(guò)事件來(lái)動(dòng)態(tài)的插入到ul中時(shí)，遇到了一小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
});
}

起初是想通過(guò)一個(gè)按鈕的點(diǎn)擊事件來(lái)動(dòng)態(tài)的加載tree的內(nèi)容就是如上代碼，addAttr2Tree 是用來(lái)將點(diǎn)擊按鈕時(shí)對(duì)應(yīng)的本地json數(shù)據(jù)加到html中的ul標(biāo)簽中， changeImgSrc 是對(duì)tree節(jié)點(diǎn)的一些選中操作以及圖片的加載，但是無(wú)論怎么調(diào)試，總是會(huì)出現(xiàn)一條錯(cuò)誤

無(wú)法獲取attributes屬性！??！我反復(fù)確認(rèn)attributes是完整無(wú)缺的放在json文件里的而且總是第一次點(diǎn)擊按鈕時(shí)才會(huì)出現(xiàn)這種錯(cuò)誤，第二次及其以后，這種錯(cuò)誤是沒(méi)有的

后來(lái)我就想到，是不是因?yàn)閖son數(shù)據(jù)動(dòng)態(tài)加載的速度比不上程序代碼執(zhí)行的速度？！

果然不出我所料！easyui中tree自帶了一個(gè)方法onLoadSuccess 當(dāng)數(shù)據(jù)成功加載時(shí)，才會(huì)執(zhí)行一些操作
所以

$(".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的問(wèn)題解析,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: