ASP.NET 2.0 TreeView에는 모든 트리 노드에 대한 확인란을 표시하는 등 많은 기본 제공 기능이 있습니다. 노드 수준 형식, 스타일 등, ShowCheckBoxes="All" 속성을 활성화하면 모든 노드에 대한 확인란을 표시하도록 설정됩니다. 다른 옵션은 각 노드 수준에서 확인란을 표시하는 리프, 없음, 상위 및 루트입니다. None은 CheckBox를 표시하지 않습니다.
ShowCheckBoxes="All"을 설정하면 사람들이 루트 노드의 확인란을 선택하여 다른 모든 확인란이 자동으로 선택되도록 할 수 있는 기능을 제공하고 싶습니다. 기본적으로 상위 노드를 체크하면 모든 하위 노드도 자동으로 체크되어야 합니다.
포스트백을 포함하지 않고 클라이언트 측에서 이 작업을 수행하는 것은 직관적입니다.
다음 코드 조각은 동일한 작업을 수행하는 데 도움이 됩니다.
TreeView 선언
<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="XmlDataSource1" onclick="client_OnTreeNodeChecked();" ShowCheckBoxes="all">
<DataBindings>
<asp:TreeNodeBinding DataMember="Category" ValueField="ID" TextField="이름"></asp:TreeNodeBinding>
<asp:TreeNodeBinding DataMember="설명" ValueField="값" TextField ="값"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
위의 TreeView 선언 코드에서 onclick="client_OnTreeNodeChecked();" 속성을 찾을 수 있습니다. 실제로 이 작업을 수행하는 JavaScript 함수인 이벤트입니다.
Javascript 코드 조각은 다음과 같습니다.-
<script 언어="javascript" type="text/javascript">
함수 client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkState;
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
var treeNode = obj;
checkState = treeNode.checked;
하다
{
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
var numTables = tables.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (테이블[i] == obj)
{
treeNodeFound = true;
나++;
if (i == 테이블 수)
{
반품;
}
}
if(treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if(childTree레벨 > parentTree레벨)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkState;
}
또 다른
{
반품;
}
}
}
}
}
}
</script>