bootstrap-Treeview實(shí)現(xiàn)級(jí)聯(lián)勾選
本文實(shí)例為大家分享了bootstrap Treeview實(shí)現(xiàn)級(jí)聯(lián)勾選的具體代碼,供大家參考,具體內(nèi)容如下
核心方法
var nodeCheckedSilent = false; function nodeChecked (event, node){ if(nodeCheckedSilent){ return; } nodeCheckedSilent = true; checkAllParent(node); checkAllSon(node); nodeCheckedSilent = false; } var nodeUncheckedSilent = false; function nodeUnchecked (event, node){ if(nodeUncheckedSilent) return; nodeUncheckedSilent = true; uncheckAllParent(node); uncheckAllSon(node); nodeUncheckedSilent = false; } //選中全部父節(jié)點(diǎn) function checkAllParent(node){ $('#searchTree').treeview('checkNode',node.nodeId,{silent:true}); var parentNode = $('#searchTree').treeview('getParent',node.nodeId); if(!("nodeId" in parentNode)){ return; }else{ checkAllParent(parentNode); } } //取消全部父節(jié)點(diǎn) function uncheckAllParent(node){ $('#searchTree').treeview('uncheckNode',node.nodeId,{silent:true}); var siblings = $('#searchTree').treeview('getSiblings', node.nodeId); var parentNode = $('#searchTree').treeview('getParent',node.nodeId); if(!("nodeId" in parentNode)) { return; } var isAllUnchecked = true; //是否全部沒(méi)選中 for(var i in siblings){ if(siblings[i].state.checked){ isAllUnchecked=false; break; } } if(isAllUnchecked){ uncheckAllParent(parentNode); } } //級(jí)聯(lián)選中所有子節(jié)點(diǎn) function checkAllSon(node){ $('#searchTree').treeview('checkNode',node.nodeId,{silent:true}); if(node.nodes!=null&&node.nodes.length>0){ for(var i in node.nodes){ checkAllSon(node.nodes[i]); } } } //級(jí)聯(lián)取消所有子節(jié)點(diǎn) function uncheckAllSon(node){ $('#searchTree').treeview('uncheckNode',node.nodeId,{silent:true}); if(node.nodes!=null&&node.nodes.length>0){ for(var i in node.nodes){ uncheckAllSon(node.nodes[i]); } } }
6-27 : 經(jīng)部分網(wǎng)友反饋,圖中的 if(!("id" in perentNode)) 需要改成 if(!("nodeId" in perentNode))才能正常運(yùn)行,我想應(yīng)該是版本問(wèn)題,上面代碼中已經(jīng)改正了。如果運(yùn)行不了,請(qǐng)改回 if(!("id" in perentNode))試一下。(謝謝大家提出)
因?yàn)閠reeview中silent屬性指定了無(wú)效(我也不知道為什么委屈),所以多加了兩個(gè)變量來(lái)控制
$('#searchTree').treeview({ showCheckbox:true, data:treeData, onNodeChecked:nodeChecked , onNodeUnchecked:nodeUnchecked });
效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法
- BootStrap TreeView使用實(shí)例詳解
- bootstrap插件treeview實(shí)現(xiàn)全選父節(jié)點(diǎn)下所有子節(jié)點(diǎn)和反選功能
- JS樹(shù)形菜單組件Bootstrap TreeView使用方法詳解
- 淺析使用BootStrap TreeView插件實(shí)現(xiàn)靈活配置快遞模板
- Bootstrap樹(shù)形菜單插件TreeView.js使用方法詳解
- 淺析BootStrap Treeview的簡(jiǎn)單使用
- 基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
- bootstrap-treeview自定義雙擊事件實(shí)現(xiàn)方法
相關(guān)文章
JS動(dòng)態(tài)修改圖片的URL(src)的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改圖片的URL(src)的方法,涉及javascript操作圖片src屬性的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04學(xué)習(xí)JavaScript設(shè)計(jì)模式之享元模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的享元模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01基于JavaScript開(kāi)發(fā)一個(gè)有趣的分組抽簽小程序
在團(tuán)隊(duì)合作開(kāi)發(fā)中,經(jīng)常需要將團(tuán)隊(duì)成員分組,來(lái)完成各自的任務(wù),而抽簽的方式自然是最公平、最簡(jiǎn)單的方法之一,所以本文就來(lái)開(kāi)發(fā)一個(gè)有趣的分組抽簽小程序吧2023-05-05鼠標(biāo)移動(dòng)到圖片名上,顯示圖片的簡(jiǎn)單實(shí)例
鼠標(biāo)移動(dòng)到名(wait.gif)上,顯示圖片,鼠標(biāo)移開(kāi)則不顯示圖片2013-07-07Javascript中的getter和setter初識(shí)
最近在工作中遇到了getter和setter,getter 是一種獲得屬性值的方法,setter是一種設(shè)置屬性值的方法。下面這篇文章主要給大家介紹了關(guān)于Javascript中g(shù)etter和setter的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08國(guó)外大牛IE版本檢測(cè)!現(xiàn)在IE都到9了,IE檢測(cè)代碼
有時(shí)會(huì)去看看國(guó)外大牛的一些代碼,并學(xué)習(xí),引用,并感嘆大牛就是大牛,差距不是一點(diǎn)點(diǎn),也在一點(diǎn)點(diǎn)的感嘆中慢慢拉進(jìn)和大牛的距離2012-01-01如何利用Three.js實(shí)現(xiàn)web端顯示點(diǎn)云數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)web端顯示點(diǎn)云數(shù)據(jù)的相關(guān)資料,最近在項(xiàng)目中遇到需求,需要在web端顯示點(diǎn)云數(shù)據(jù),將我的實(shí)現(xiàn)步驟介紹在這里供大家參考,需要的朋友可以參考下2023-11-11