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)文章
使用KrpanoToolJS在瀏覽器切圖的實(shí)例詳解
這篇文章主要介紹了使用KrpanoToolJS在瀏覽器切圖的實(shí)例詳解,大概是需要在瀏覽器中將全景圖轉(zhuǎn)為立方體圖、多層級(jí)瓦片圖，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要給大家匯總介紹了js控制文本框輸入的字符類型的各種方法，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-06-06
JavaScript使用promise處理多重復(fù)請(qǐng)求
處理重復(fù)請(qǐng)求的文章想必大家也看過了很多，大多數(shù)都是分為在response返回之前發(fā)現(xiàn)重復(fù)請(qǐng)求就return掉的和使用節(jié)流/防抖來間接規(guī)避用戶頻繁操作兩種版本的。本文主要介紹了JavaScript使用promise處理多重復(fù)請(qǐng)求，感興趣的可以了解一下2021-05-05
怎么理解wx.navigateTo的events參數(shù)使用詳情
這篇文章主要介紹了怎么理解wx.navigateTo的events參數(shù)使用詳情，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript傳遞變量 值傳遞 引用傳遞,需要的朋友可以參考下。2011-02-02
JavaScript 自動(dòng)完成腳本整理(33個(gè))
所謂的提升用戶體驗(yàn),其實(shí)就是把所有用戶視為懶鬼,比如JavaScript自動(dòng)完成(Autocomplete)腳本, 常用于表單,用戶只需輸入一兩個(gè)字母,就為你擴(kuò)展、聯(lián)想、匹配和供君選擇,2009-10-10
javascript實(shí)現(xiàn)div的顯示和隱藏的小例子
這篇文章介紹了在JS中實(shí)現(xiàn)DIV顯示和隱藏的實(shí)例，需要的朋友可以參考一下2013-06-06
用了bootstrap模版搭建的網(wǎng)站，在IE7中打不開，在IE8中背景圖片都不顯示，內(nèi)容排列也出現(xiàn)問題，在IE9中表現(xiàn)的最好，在IE11中出現(xiàn)彈出層中的圖片無法顯示，那么這些兼容性怎么去解決2015-10-10
小程序接口的promise化的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序接口的promise化的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)F11使頁面全屏顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09