bootstrap-Treeview實(shí)現(xiàn)級(jí)聯(lián)勾選
更新時(shí)間：2017年11月23日 09:02:04 作者：不怕孤單的123
這篇文章主要為大家詳細(xì)介紹了bootstrap-Treeview實(shí)現(xiàn)級(jí)聯(lián)勾選，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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; //是否全部沒選中
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)該是版本問題，上面代碼中已經(jīng)改正了。如果運(yùn)行不了，請(qǐng)改回 if(!("id" in perentNode))試一下。（謝謝大家提出）
因?yàn)閠reeview中silent屬性指定了無效（我也不知道為什么委屈），所以多加了兩個(gè)變量來控制
$('#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樹形菜單組件Bootstrap TreeView使用方法詳解
- 淺析使用BootStrap TreeView插件實(shí)現(xiàn)靈活配置快遞模板
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- 淺析BootStrap Treeview的簡(jiǎn)單使用
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
- bootstrap-treeview自定義雙擊事件實(shí)現(xiàn)方法
相關(guān)文章
js實(shí)現(xiàn)購(gòu)物車加減以及價(jià)格計(jì)算功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物車加減以及價(jià)格計(jì)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要是對(duì)懸浮數(shù)字的實(shí)現(xiàn)案例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
本文主要介紹了文件上傳插件SWFUpload使用指南,SWFUpload是一個(gè)flash和js相結(jié)合而成的文件上傳插件，其功能非常強(qiáng)大。需要的朋友可以參考下2016-11-11
微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
微信小程序?qū)崿F(xiàn)左右列表聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左右列表聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了JavaScript定時(shí)顯示廣告代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS對(duì)象是否擁有某屬性如何判斷的相關(guān)資料,需要的朋友可以參考下2017-02-02
js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
本篇文章主要是對(duì)js根據(jù)日期判斷星座的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
構(gòu)建樹控件的比較理想的一種方法是用ul、li這種簡(jiǎn)單的標(biāo)簽組合來實(shí)現(xiàn)，但是你如果想實(shí)現(xiàn)復(fù)雜一點(diǎn)的比如要節(jié)點(diǎn)可編輯、可拖動(dòng)、可更換風(fēng)格等等我想ExtJS是最好的選擇了。2009-06-06