bootstrap treeview 樹形菜單帶復(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; //是否全部沒選中 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 樹形菜單帶復(fù)選框及級(jí)聯(lián)選擇功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Android TreeView實(shí)現(xiàn)帶復(fù)選框樹形組織結(jié)構(gòu)
- 對(duì)Python 窗體(tkinter)樹狀數(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í)樹形列表TreeView示例
- JS樹形菜單組件Bootstrap TreeView使用方法詳解
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- 淺析BootStrap Treeview的簡(jiǎn)單使用
- GTK treeview原理及使用方法解析
相關(guān)文章
js計(jì)算兩個(gè)時(shí)間差 天 時(shí) 分 秒 毫秒的代碼
這篇文章主要介紹了js計(jì)算兩個(gè)時(shí)間差 天 時(shí) 分 秒 毫秒的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05js實(shí)現(xiàn)密碼強(qiáng)度檢驗(yàn)
這篇文章主要為大家詳細(xì)介紹了js密碼強(qiáng)度檢驗(yàn)的實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JavaScript使用簡(jiǎn)單正則表達(dá)式的數(shù)據(jù)驗(yàn)證功能示例
這篇文章主要介紹了JavaScript使用簡(jiǎn)單正則表達(dá)式的數(shù)據(jù)驗(yàn)證功能,結(jié)合實(shí)例形式分析了JS針對(duì)表單輸入內(nèi)容的簡(jiǎn)單正則驗(yàn)證操作技巧,需要的朋友可以參考下2017-01-01javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)讀取數(shù)組的方法,涉及javascript隨機(jī)數(shù)及針對(duì)數(shù)組操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08