자바 스크립트에서 treeview 노드를 색칠하는 방법

Question

나는 treeview와 사용자가 treeview 내부의 노드를 검색 할 수있는 texbox를 가지고있다.

이미 노드가 트리 뷰에 있는지 확인하는 JS 함수를 작성했습니다.
내가 원하는 것은 사용자가 검색 한 노드를 색칠하는 것입니다. 내가 어떻게 할 수 있을까 ??

Answer 1

CSS를 사용하고 Javascript에서 className을 변경하십시오. 따라서 노드가 div라고 가정 해보십시오. 그런 다음 CSS는 배경 색상 세트와 선택된 클래스가 있는지 확인

divFoundNode.className = "selected"; 

: 당신이 자바 스크립트에서 노드를 찾을 때, 당신은 뭔가를 할 것입니다. 이 같은 표정 무언가 : 당신이 CSS를 사용하지 않을 경우

.selected {background-color:red;} /* whatever your selected color is here */ 

, 당신이 직접이 같은 수행하여 노드의 색상을 변경할 수 있습니다 : 이제

divFoundNode.style.backgroundColor = "red"; 

를, 당신 ' 아마 이전에 선택되었던 다른 노드의 선택을 해제해야 할 것입니다. 그렇게하려면 몇 가지 옵션이 있습니다. 선택한 노드를 설정하기 전에 모든 노드를 실행하고 색상을 제거하거나 (위와 같음) 마지막으로 선택한 div를 사용하여 자바 스크립트에 변수를 저장 한 다음 그 노드 만 타겟팅 할 수 있습니다. 그러면 다음과 같이 할 수 있습니다.

var divLastFoundNode; //global variable 

function treeView_SelectNode(divFoundNode) 
{ 
    divLastFoundNode.className = ""; 
    divFoundNode.className = "selected"; 
    divLastFoundNode = divFoundNode; 
} 

JQuery를 사용하면이 작업을 훨씬 쉽게 처리 할 수 ​​있습니다. 많은 노드를 선택하고 모든 노드에 대한 조작을 한 번에 수행 할 수 있습니다. 예를 들면 다음과 같습니다.

$("div.node").removeClass("selected"); 
$(divFoundNode).addClass("selected"); 

Answer 2

일부 코드는 없지만이 방법은 어떨까요? 차라리 직접 색상보다 클래스를 변경 싶지만, 그건 당신에게 달려 있지만

document.getElementById("foundnodeid").style.color="#abcdef";

은 :

document.getElementById("foundnodeid").style.class="classwithdifferentcolor";