이번에는 체크 선택과 계단식 선택의 트리 메뉴 사용에 대해 자세히 설명하겠습니다. 체크 선택과 계단식 선택의 트리 메뉴 사용 시 주의사항은 무엇인가요?
구체적인 코드는 다음과 같습니다.
<p id="searchTree"></p> <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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
vue-cli 구성 요소를 가져오고 사용하는 단계에 대한 자세한 설명
위 내용은 체크 및 캐스케이드 선택을 통한 트리 메뉴 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!