여기서는 asp.net2.0의 TreeView 컨트롤을 JavaScript와 함께 사용하여 권한 트리의 일부 기능을 구현합니다.
권한 트리에 다음 세 가지 규칙이 있다고 가정합니다.
1. 노드에 액세스할 수 있으면 해당 상위 노드도 액세스할 수 있어야 합니다.
2. 노드에 액세스할 수 있으면 해당 하위 노드에도 액세스할 수 있습니다.
3. 노드에 액세스할 수 없으면 해당 하위 노드에도 액세스할 수 없습니다.
코드는 다음과 같습니다:
//지정된 tagName의 상위 요소를 가져옵니다.
함수 public_GetParentByTagName(요소, 태그이름)
{
var parent = element.parentNode;
var upperTagName = tagName.toUpperCase();
//이 요소가 원하는 태그가 아닌 경우 계속 추적합니다.
while (부모 && (parent.tagName.toUpperCase() != upperTagName))
{
부모 = parent.parentNode ? parent.parentNode : parent.parentElement;
}
부모를 돌려보내다;
}
//노드의 상위 노드 설정 Cheched - 노드에 액세스할 수 있으면 해당 상위 노드에도 액세스할 수 있어야 합니다.
함수 setParentChecked(objNode)
{
var objParentDiv = public_GetParentByTagName(objNode,"div");
if(objParentDiv==null || objParentDiv == "정의되지 않음")
{
반품;
}
var objID = objParentDiv.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("노드"));
objID = objID+"체크박스";
var objParentCheckBox = document.getElementById(objID);
if(objParentCheckBox==null || objParentCheckBox == "정의되지 않음")
{
반품;
}
if(objParentCheckBox.tagName!="INPUT" && objParentCheckBox.type == "체크박스")
반품;
objParentCheckBox.checked = true;
setParentChecked(objParentCheckBox);
}
//노드의 하위 노드를 선택 취소로 설정합니다. 노드에 액세스할 수 없으면 해당 하위 노드에도 액세스할 수 없습니다.
함수 setChildUnChecked(divID)
{
var objchild = divID.children;
var 개수 = objchild.length;
for(var i=0;i<objchild.length;i++)
{
var tempObj = objchild[i];
if(tempObj.tagName=="입력" && tempObj.type == "체크박스")
{
tempObj.checked = 거짓;
}
setChildUnChecked(tempObj);
}
}
//노드의 하위 노드를 cheched로 설정 - 노드에 액세스할 수 있으면 해당 하위 노드에도 액세스할 수 있습니다.
함수 setChildChecked(divID)
{
var objchild = divID.children;
var 개수 = objchild.length;
for(var i=0;i<objchild.length;i++)
{
var tempObj = objchild[i];
if(tempObj.tagName=="입력" && tempObj.type == "체크박스")
{
tempObj.checked = true;
}
setChildChecked(tempObj);
}
}
//트리거 이벤트
함수 CheckEvent()
{
var objNode = event.srcElement;
if(objNode.tagName!="INPUT" || objNode.type!="checkbox")
반환;
if(objNode.checked==true)
{
setParentChecked(objNode);
var objID = objNode.getAttribute("ID");
var objID = objID.substring(0,objID.indexOf("CheckBox"));
var objParentDiv = document.getElementById(objID+"Nodes");
if(objParentDiv==null || objParentDiv == "정의되지 않음")
{
반품;
}
setChildChecked(objParentDiv);
}
또 다른
{
var objID = objNode.getAttribute("ID");
var objID = objID.substring(0,objID.indexOf("CheckBox"));
var objParentDiv = document.getElementById(objID+"Nodes");
if(objParentDiv==null || objParentDiv == "정의되지 않음")
{
반품;
}
setChildUnChecked(objParentDiv);
}
}
그런 다음 TreeView를 page_load 이벤트의 js 이벤트에 바인딩합니다.
this.TreeView1.Attributes.Add("onclick", "CheckEvent()");