javascript-TreeView 부모-자식 연결 효과는 노드 상태를 일관되게 유지합니다_javascript 기술

우리 대부분은 TreeView 컨트롤을 사용해 본 적이 있고 이 컨트롤에 대한 평가도 다양하지만 어쨌든 무료이고 오픈 소스 컨트롤이라고 생각해서 아직도 사용하고 있습니다. ASP.NET을 처음 접했을 때 권한을 할당하기 위해 권한 트리를 만들어야 했던 기억이 납니다. 그 당시에는 하루 동안 조사한 후에야 이 트리에 대해서만 알게 되었고 서버측 동작을 기본적으로 이해하게 되었습니다. 하지만 당시에는 제한된 js 수준으로 인해 클라이언트 코드가 매우 두렵고 기본적으로 본 적이 없습니다.
당시 요구 사항이 있었습니다. 노드가 선택되면 해당 노드의 모든 하위 노드가 선택 취소되면 해당 노드도 선택 취소되어야 합니다(노드 일관성). ), 그 반대도 마찬가지입니다.
또 다른 요구 사항은 다음과 같습니다. 3가지 상태 트리를 구현할 수 있다면 더 좋을 것입니다(이것은 약간 어려우므로 이 문서에서는 논의하지 않습니다). 이 문서에서는 이전 요구 사항 1에 대해 자세히 설명합니다.
우선 Microsoft의 TreeView 컨트롤이 오픈 소스라는 점에 감사해야 합니다. 클라이언트 측 코드와 서버 측 코드를 모두 Microsoft 웹 사이트에서 다운로드할 수 있습니다. 인터넷에서 이 문제에 대한 기사도 본 적이 있는데, 대부분 TreeView가 아닌 ​​다른 js를 사용하여 구현하는 경우가 많습니다. 개인적으로는 객체지향적인 관점에서 이 기능이 TreeView에 속하므로 그럴 이유가 없다고 생각합니다. 분리하기 위해 오늘은 TreeView.htc를 수정하여 위의 기능을 구현해보겠습니다. 이 파일(TreeView.htc)을 얻으려면 Microsoft 웹 사이트에서 다운로드할 수 있습니다.
솔직히 이 기능은 오랫동안 저를 괴롭혔습니다. 저는 항상 이 문제를 해결하고 싶었지만 TreeView.htc에서 코드를 공부할 시간이 없었습니다. 오늘 드디어 해결하기로 결정했습니다. 그것.
우리는 TreeView의 oncheck에서 이벤트 처리 함수가 실행되어야 한다는 것을 알고 있습니다. 이 함수는 TreeView에서 생성된 클라이언트 스크립트에서 찾을 수 있습니다.
oncheck= "javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)"
여기에서 우리는 htc(나중에 언급되는 htc는 TreeView.htc를 나타냄)로 가서 doCheckboxClick 메서드 이름만 보면 무슨 일을 하는지 알 수 있습니다(이름 지정은 매우 중요합니다. 그렇지 않으면 3000줄의 코드에서 특정 기능을 찾는 것이 정말 피곤할 것입니다).
이 메소드는 사용자가 CheckBox를 클릭할 때 사용되는 함수입니다.
function doCheckboxClick(el){
var selected = private_getAttribute(el,"checked")
el.checked = !checked; evt.treeNodeIndex = getNodeIndex(el);
setNodeState(el ,el.checked); el만 해당되지만 안전하다고 생각합니다
}
} 첫 번째, 두 번째 및 마지막 줄은 나중에 확인된 속성이 유효하지 않을 때 페이지 응답에 대해 추가한 것입니다. 원래 방법에 따르면 el.checked는 제출 후 정의되지 않으므로 독자가 관심이 있으면 시도해 볼 수 있습니다. 이름에서 알 수 있듯이 setNodeState 함수는 노드 상태를 설정하는 데 사용됩니다. 이 함수는 현재 선택된 노드를 함수에 매개변수로 전달합니다. 댓글에서 언급했듯이 실제로 부울 값 대신 el을 전달할 수 있지만 이 방법으로 전달하는 것이 더 안전할 수 있다고 생각하지만 문제가 되지 않습니다. 불편하다고 느끼면 수정할 수 있습니다.
setNodeState의 함수 본문을 살펴보겠습니다. 이 함수는 두 가지 메소드로 구성되어 있습니다. 하나는 모든 하위 노드의 상태를 설정하는 것이고, 다른 하나는 해당 노드의 상위 노드의 상태를 설정하는 것입니다. 코드는 다음과 같습니다.
function setNodeState(el,state){
_setChildNode(el,state)
_setParentNode(el,state)
}
set 현재 노드의 모든 하위 노드가 상위 노드(이 노드)의 상태와 일치하는지 여부와 마찬가지로 노드의 상위 노드를 노드의 상태와 일치시키려면 _setChildNode 함수가 필요합니다. _setParentNode 함수가 필요합니다.두 함수 모두 재귀 함수이며 모든 자식 노드, 모든 부모 노드 및 형제 노드를 순회합니다(형제 노드를 순회해야 하는 이유는 나중에 설명합니다). 먼저 자식 노드를 순회하는 코드를 살펴보겠습니다. 🎜> function _setChildNode(el,state){
var childNodes = el.children;
if(childNodes.length > 0){// if has childrens
for (var i = 0 ;i                                                                               ​ _setChildNode(childNodes[i],state) ; } }
}
이 함수는 먼저 현재 노드의 모든 하위 노드를 가져옵니다. 여기에서는 TreeView에서 직접 제공하는 getChildren 함수와 HTML을 사용할 때 사용하는 원래 메서드를 사용할 수 있습니다. 노드에 자식 노드가 있으면 모든 자식 노드를 순회하며 자식 노드의 상태가 현재 노드의 상태와 일치하도록 설정됩니다. _saveCheckState 함수의 역할은 나중에 소개하겠습니다. private_setAttribute 메소드는 TreeView에서 제공하는 속성을 설정하기 위한 내부 메소드입니다(js에는 private 키워드가 없으며 이는 단지 설명일 뿐입니다). 이 메소드는 각 노드의 Checked 속성을 노드의 현재 상태로 설정합니다.
다음은 상위 노드 상태를 설정하는 방법에 대한 코드입니다.
_setParentNode(el,state){
var parentNode = el.parentElement;
if(parentNode){
           if( !_checkSiblingdNode( el)){
private_setAttribute(parentNode,"Checked",state);
_saveCheckState(parentNode);
_setParentNode(parent Node,state) > If. 상위 노드가 존재하면 현재 노드의 형제 노드를 확인합니다. 여기서 형제 노드를 확인해야 한다고 위에서 언급했습니다. 여기서 형제 노드를 확인하는 목적은 다음과 같습니다. 상위 노드의 상태는 현재 노드에 의해 제어되지 않습니다. (이 상황은 현재 노드에 형제 노드가 없는 경우에만 발생합니다.) 다른 형제 노드를 선택하면 상위 노드를 취소할 수 없으므로 형제 노드와 상위-하위 노드 간에 불일치가 발생합니다. 이 함수는 나중에 소개할 _saveCheckState 함수도 호출합니다.
다음 코드는 형제 노드의 상태를 확인하는 방법을 설명합니다.
function _checkSiblingdNode(el){
var parentNode = el.parentElement;// 여기에는 getParentTreeNode 함수를 사용할 수 있습니다. htc이지만 저는 이 사용법을 좋아합니다.
for(var i = 0;i tribute (parentNode.children[i],"Checked")){
                                                                                                             >                                                getParentTreeNode 메소드를 사용하여 노드의 상위 노드를 가져올 수 있지만 저는 원래 메소드를 사용하는 것을 선호합니다. 이는 자신을 제외합니다(if(el!=parentNode.children[i])).
위 코드를 사용하면 클라이언트를 새로 고치지 않고도 상위-하위 노드를 일관되게 선택할 수 있습니다. 이제 페이지를 제출한 후 수동으로 클릭한 노드를 제외하고 해당 기능이 없는 경우 _saveCheckState 함수를 도입해 보겠습니다. , 기타 어떤 노드도 상태를 저장할 수 없습니다. 따라서 이 기능의 기능은 모든 노드(주로 자동으로 선택된 노드)의 상태를 저장하여 반환 후에도 트리의 상태가 여전히 존재하는지 확인하는 것입니다. 다음 코드는 _saveCheckState 함수를 설명합니다. }
이 메서드는 먼저 현재 노드의 인덱스가 유효한지 확인하고, 유효한 경우 상태를 저장합니다. 여기서는 queueEvent 메소드가 수행하는 작업에 대해 이야기해야 합니다. 이 함수의 실제 의미는 __TreeView1_State__라는 숨겨진 필드에 클라이언트의 작업을 저장하여 서버가 이 숨겨진 필드를 반환하도록 하는 것입니다. 트리의 상태를 초기화합니다. 그 중 TreeView1은 제가 테스트한 시스템의 TreeView 이름입니다.
마지막 문제는 htc가 수정되었기 때문에 배포 중에 원본 htc 파일을 교체해야 합니다.
TreeView.htc를 수정해야 하는 경우(포맷 후) 내 메시지를 변경하고 CSDN에 이메일을 남길 수 있습니다. 내 CSDN 계정은 cuike519입니다.
Microsoft가 가능한 한 빨리 TreeView 컨트롤에 이 기능을 추가할 수 있기를 바라며, 다형성 트리 구조를 구현하는 것이 가장 좋습니다. 블로그에서 관련 댓글을 찾아보세요. 댓글로 기사를 업데이트하겠습니다!