bootstrap treeview 樹(shù)形菜單帶復(fù)選框及級(jí)聯(lián)選擇功能
具體代碼如下所示:
<div id="searchTree"></div>
<script>
var treeData = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1"
}, {
text: "Grandchild 2",
nodes: [{
text: "Grandchild 2-1",
nodes: [{
text: "Grandchild 2-1-1"
}, {
text: "Grandchild 2-2-1",
}]
}, {
text: "Grandchild 1-2",
}]
}]
}, {
text: "Child 2",
nodes: [{
text: "Grandchild 2-1"
}, {
text: "Grandchild 2-2",
}]
}]
}, {
text: "Parent 2",
id:'11111'
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
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]);
}
}
}
$('#searchTree').treeview({
showCheckbox: true,
data: treeData,
onNodeChecked: nodeChecked,
onNodeUnchecked: nodeUnchecked
});
</script>
總結(jié)
以上所述是小編給大家介紹的bootstrap treeview 樹(shù)形菜單帶復(fù)選框及級(jí)聯(lián)選擇功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android TreeView實(shí)現(xiàn)帶復(fù)選框樹(shù)形組織結(jié)構(gòu)
- 對(duì)Python 窗體(tkinter)樹(shù)狀數(shù)據(jù)(Treeview)詳解
- WPF自定義TreeView控件樣式實(shí)現(xiàn)QQ聯(lián)系人列表效果
- Bootstrap treeview實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)并添加快捷搜索功能
- Android UI 之實(shí)現(xiàn)多級(jí)樹(shù)形列表TreeView示例
- JS樹(shù)形菜單組件Bootstrap TreeView使用方法詳解
- Bootstrap樹(shù)形菜單插件TreeView.js使用方法詳解
- 淺析BootStrap Treeview的簡(jiǎn)單使用
- GTK treeview原理及使用方法解析
相關(guān)文章
JavaScript設(shè)計(jì)模式之工廠方法模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠方法模式介紹,本文講解了簡(jiǎn)單工廠模式、多個(gè)工廠方法模式等內(nèi)容,需要的朋友可以參考下2014-12-12
JavaScript實(shí)現(xiàn)組件化和模塊化方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)組件化和模塊化方法,模塊化主要是指一個(gè)JS文件就是一個(gè)模塊,向外提供特定功能的程序,組件化的中心思想其實(shí)跟模塊化是大同小異的,感興趣想要詳細(xì)了解可以參考下文2023-05-05
KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10
[Web]防止用戶復(fù)制頁(yè)面內(nèi)容和另存頁(yè)面的方法
原理就是利用js控制一些復(fù)制等事件,但破解也簡(jiǎn)單,這里就不說(shuō)了。2009-02-02
js實(shí)現(xiàn)三張圖(文)片一起切換的banner焦點(diǎn)圖
這篇文章主要介紹了js實(shí)現(xiàn)三張圖(文)片一起切換的banner焦點(diǎn)圖,推薦給大家,有需要的小伙伴可以參考下。2015-08-08
javascript實(shí)現(xiàn)添加附件功能的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)添加附件功能的方法,在我們編輯信息時(shí),有時(shí)候需要附加文件、圖片實(shí)現(xiàn)上傳功能,通過(guò)本文了解javascript是如何實(shí)現(xiàn)附加功能的,請(qǐng)閱讀。2015-11-11
bootstrap table實(shí)現(xiàn)點(diǎn)擊翻頁(yè)功能 可記錄上下頁(yè)選中的行
這篇文章主要介紹了bootstrap table實(shí)現(xiàn)點(diǎn)擊翻頁(yè)功能,可記錄上下頁(yè)選中的行,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09

