關(guān)于 jQuery Easyui異步加載tree的問(wèn)題解析
想要實(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)站的支持!
- jQuery按需加載輪播圖(web前端性能優(yōu)化)
- jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹(shù))
- 如何解決jQuery EasyUI 已打開(kāi)Tab重新加載問(wèn)題
- jQuery生成假加載動(dòng)畫(huà)效果
- jquery加載頁(yè)面的方法(頁(yè)面加載完成就執(zhí)行)
- jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
- Jquery.LazyLoad.js修正版下載,實(shí)現(xiàn)圖片延遲加載插件
- jQuery頁(yè)面加載初始化常用的三種方法
- jquery實(shí)現(xiàn)頁(yè)面加載效果
- 詳解jQuery lazyload 懶加載
相關(guān)文章
javascript截圖 jQuery插件imgAreaSelect使用詳解
這篇文章主要介紹了avascript截圖 jQuery插件imgAreaSelect使用詳解,需要的朋友可以參考下2016-05-05Jquery之Bind方法參數(shù)傳遞與接收的三種方法
這篇文章主要介紹了Jquery的Bind方法參數(shù)傳遞與接收的三種方法,需要的朋友可以參考下2014-06-06jQuery獲取動(dòng)態(tài)添加元素的方法詳解
這篇文章主要介紹了jQuery獲取動(dòng)態(tài)添加元素的方法詳解,jQuery 是一個(gè)高效、精簡(jiǎn)并且功能豐富的 JavaScript 工具庫(kù),它提供的 API 易于使用且兼容眾多瀏覽器,這讓諸如 HTML 文檔遍歷和操作、事件處理、動(dòng)畫(huà)和 Ajax 操作更加簡(jiǎn)單,需要的朋友可以參考下2023-08-08jquery 獲取dom固定元素 添加樣式的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery獲取dom固定元素 添加樣式的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jQuery的ajax中使用FormData實(shí)現(xiàn)頁(yè)面無(wú)刷新上傳功能
這篇主要寫(xiě)如何利用ajax和FormData實(shí)現(xiàn)頁(yè)面無(wú)刷新的文件上傳效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。需要的的朋友參考下本文2017-01-01jQuery在線選座位插件seat-charts特效代碼分享
這篇文章主要介紹了jQuery在線選座位插件seat-charts特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery獲取單擊節(jié)點(diǎn)對(duì)象的方法
這篇文章主要介紹了jQuery獲取單擊節(jié)點(diǎn)對(duì)象的方法,涉及jQuery操作鼠標(biāo)事件與頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jquery判斷至少有一個(gè)checkbox被選中的方法
這篇文章主要介紹了jquery判斷至少有一個(gè)checkbox被選中的方法,涉及jQuery操作checkbox控件的相關(guān)技巧,需要的朋友可以參考下2015-06-06jquery實(shí)現(xiàn)的判斷倒計(jì)時(shí)是否結(jié)束代碼
在一些購(gòu)物網(wǎng)站經(jīng)常會(huì)遇到倒計(jì)時(shí)的功能,例如某些商品在一定期限內(nèi)搞活動(dòng),下面小編給大家分享一段代碼關(guān)于jquery實(shí)現(xiàn)的判斷倒計(jì)時(shí)是否結(jié)束代碼,希望對(duì)大家有所幫助2016-02-02