關(guān)于 jQuery Easyui異步加載tree的問題解析
想要實(shí)現(xiàn)從本地中加載json文件,通過事件來動(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 }); }
起初是想通過一個(gè)按鈕的點(diǎn)擊事件來動(dòng)態(tài)的加載tree的內(nèi)容就是如上代碼,addAttr2Tree 是用來將點(diǎn)擊按鈕時(shí)對(duì)應(yīng)的本地json數(shù)據(jù)加到html中的ul標(biāo)簽中, changeImgSrc 是對(duì)tree節(jié)點(diǎn)的一些選中操作以及圖片的加載,但是無論怎么調(diào)試,總是會(huì)出現(xiàn)一條錯(cuò)誤
無法獲取attributes屬性?。?!我反復(fù)確認(rèn)attributes是完整無缺的放在json文件里的而且總是第一次點(diǎn)擊按鈕時(shí)才會(huì)出現(xiàn)這種錯(cuò)誤,第二次及其以后,這種錯(cuò)誤是沒有的
后來我就想到,是不是因?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的問題解析,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery按需加載輪播圖(web前端性能優(yōu)化)
- jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹)
- 如何解決jQuery EasyUI 已打開Tab重新加載問題
- jQuery生成假加載動(dòng)畫效果
- jquery加載頁面的方法(頁面加載完成就執(zhí)行)
- jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
- Jquery.LazyLoad.js修正版下載,實(shí)現(xiàn)圖片延遲加載插件
- jQuery頁面加載初始化常用的三種方法
- jquery實(shí)現(xiàn)頁面加載效果
- 詳解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è)高效、精簡并且功能豐富的 JavaScript 工具庫,它提供的 API 易于使用且兼容眾多瀏覽器,這讓諸如 HTML 文檔遍歷和操作、事件處理、動(dòng)畫和 Ajax 操作更加簡單,需要的朋友可以參考下2023-08-08jquery 獲取dom固定元素 添加樣式的簡單實(shí)例
本篇文章主要是對(duì)jquery獲取dom固定元素 添加樣式的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02jQuery的ajax中使用FormData實(shí)現(xiàn)頁面無刷新上傳功能
這篇主要寫如何利用ajax和FormData實(shí)現(xiàn)頁面無刷新的文件上傳效果,主要用到了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)事件與頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jquery判斷至少有一個(gè)checkbox被選中的方法
這篇文章主要介紹了jquery判斷至少有一個(gè)checkbox被選中的方法,涉及jQuery操作checkbox控件的相關(guān)技巧,需要的朋友可以參考下2015-06-06jquery實(shí)現(xiàn)的判斷倒計(jì)時(shí)是否結(jié)束代碼
在一些購物網(wǎng)站經(jīng)常會(huì)遇到倒計(jì)時(shí)的功能,例如某些商品在一定期限內(nèi)搞活動(dòng),下面小編給大家分享一段代碼關(guān)于jquery實(shí)現(xiàn)的判斷倒計(jì)時(shí)是否結(jié)束代碼,希望對(duì)大家有所幫助2016-02-02