Extjs 中的 Treepanel 實(shí)現(xiàn)菜單級(jí)聯(lián)選中效果及實(shí)例代碼
TreePanel繼承自Panel,在ExtJS中使用樹控件含有豐富的屬性和方法實(shí)現(xiàn)復(fù)雜的功能。其中Ext.tree.TreeNode代表一個(gè)樹節(jié)點(diǎn),比較常用的屬性包括text、id、icon、checked等、異步樹Ext.tree.AsyncTreeNode、樹加載器Ext.tree.TreeLoader。下面介紹Extjs 中的 Treepanel 實(shí)現(xiàn)菜單級(jí)聯(lián)選中效果。
在 treepanel 里添加以下代碼即可實(shí)現(xiàn)級(jí)聯(lián)選中效果
主要實(shí)現(xiàn)了以下效果:
1.點(diǎn)擊父級(jí)批量設(shè)置所有子節(jié)點(diǎn)選中狀態(tài)
2.點(diǎn)擊當(dāng)前節(jié)點(diǎn)尋找所有父級(jí)并設(shè)置選中狀態(tài)
3.取消當(dāng)前節(jié)點(diǎn)并取消所有子節(jié)點(diǎn)選中狀態(tài)
4.取消當(dāng)前節(jié)點(diǎn)根據(jù)需要取消上級(jí)節(jié)點(diǎn)的選中狀態(tài)
listeners:{ checkchange:function(node,checked,eOpts){ // 批量設(shè)置子節(jié)點(diǎn)選中效果 function setChildChecked(pNode){ pNode.set('checked',checked); pNode.eachChild(function(child){ arguments.callee(child); }) } setChildChecked(node); // 當(dāng)前節(jié)點(diǎn)取消選中時(shí) 需要判斷當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)是否都不是選中狀態(tài) function setParentCheckedFalse(currentNode){ var parentNode = currentNode.parentNode, isValid = true; if(parentNode != null){ if(checked == false){ parentNode.eachChild(function (child) { if(child.get('checked') != false){ isValid = false; return false; } }); if(isValid){ parentNode.set('checked',checked); } }else{ parentNode.set('checked',true); } arguments.callee(parentNode) } } setParentCheckedFalse(node); } }
總結(jié)
以上所述是小編給大家介紹的Extjs 中 Treepanel 實(shí)現(xiàn)菜單級(jí)聯(lián)選中效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS如何獲取未來n天的時(shí)間(返回日期:yyyy-mm-dd,并且判斷是否是今天和星期)
開發(fā)中經(jīng)常遇到獲取時(shí)間的業(yè)務(wù),將常用的方法做個(gè)筆記記錄下,對(duì)JS如何獲取未來n天的時(shí)間相關(guān)知識(shí)感興趣的朋友一起看看吧2024-03-03javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼(源碼下載)
大家在淘寶購物之后,都會(huì)對(duì)賣家的服務(wù)進(jìn)行評(píng)論,那么五星評(píng)價(jià)代碼是怎么實(shí)現(xiàn)的呢?下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼,有需要的朋友可以參考下2015-08-08js實(shí)現(xiàn)方塊上下左右移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)方塊上下左右移動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08javascript轉(zhuǎn)換日期字符串為Date日期對(duì)象的方法
這篇文章主要介紹了javascript轉(zhuǎn)換日期字符串為Date日期對(duì)象的方法,是非常實(shí)用的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-02-02JavaScript提升性能的常用技巧總結(jié)【經(jīng)典】
這篇文章主要介紹了JavaScript提升性能的常用技巧,結(jié)合實(shí)例形式總結(jié)分析了JavaScript編程中常見的性能提升優(yōu)化技巧,涉及作用域、循環(huán)、變量、DOM及函數(shù)節(jié)流等,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-06-06js進(jìn)階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決
JavaScript代碼在執(zhí)行前會(huì)經(jīng)歷一個(gè)預(yù)處理階段,這個(gè)階段主要涉及變量提升和函數(shù)提升,下面這篇文章主要介紹了js進(jìn)階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決的相關(guān)資料,需要的朋友可以參考下2024-09-09小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05