bootstrap treeview 樹形菜單帶復選框及級聯(lián)選擇功能
更新時間:2018年06月08日 08:51:26 作者:小角色Byme
這篇文章主要介紹了bootstrap treeview 樹形菜單帶復選框及級聯(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é)點 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é)點 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); } } //級聯(lián)選中所有子節(jié)點 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]); } } } //級聯(lián)取消所有子節(jié)點 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>
總結
以上所述是小編給大家介紹的bootstrap treeview 樹形菜單帶復選框及級聯(lián)選擇功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
- Android TreeView實現(xiàn)帶復選框樹形組織結構
- 對Python 窗體(tkinter)樹狀數(shù)據(jù)(Treeview)詳解
- WPF自定義TreeView控件樣式實現(xiàn)QQ聯(lián)系人列表效果
- Bootstrap treeview實現(xiàn)動態(tài)加載數(shù)據(jù)并添加快捷搜索功能
- Android UI 之實現(xiàn)多級樹形列表TreeView示例
- JS樹形菜單組件Bootstrap TreeView使用方法詳解
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- 淺析BootStrap Treeview的簡單使用
- GTK treeview原理及使用方法解析
相關文章
JavaScript使用簡單正則表達式的數(shù)據(jù)驗證功能示例
這篇文章主要介紹了JavaScript使用簡單正則表達式的數(shù)據(jù)驗證功能,結合實例形式分析了JS針對表單輸入內(nèi)容的簡單正則驗證操作技巧,需要的朋友可以參考下2017-01-01javascript實現(xiàn)隨機讀取數(shù)組的方法
這篇文章主要介紹了javascript實現(xiàn)隨機讀取數(shù)組的方法,涉及javascript隨機數(shù)及針對數(shù)組操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08