您好,登錄后才能下訂單哦!
具體代碼如下所示:
<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; } //選中全部父節點 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); } } //取消全部父節點 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); } } //級聯選中所有子節點 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]); } } } //級聯取消所有子節點 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 樹形菜單帶復選框及級聯選擇功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。