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

