ASP.NET 2.0 TreeView มีคุณสมบัติในตัวมากมาย เช่น การแสดงช่องทำเครื่องหมายสำหรับ Tree Nodes ทั้งหมด การจัดรูปแบบระดับโหนด สไตล์ ฯลฯ การเปิดใช้งานคุณสมบัติ ShowCheckBoxes="All" จะกำหนดให้แสดงช่องทำเครื่องหมายสำหรับโหนดทั้งหมด ตัวเลือกอื่นๆ ได้แก่ Leaf, None, Parent และ Root ซึ่งจะแสดงช่องทำเครื่องหมายที่ระดับโหนดที่เกี่ยวข้อง ไม่มีไม่แสดงกล่องกาเครื่องหมาย
เมื่อเราตั้งค่า ShowCheckBoxes="All" เราต้องการให้คุณลักษณะที่ผู้ใช้สามารถเลือกช่องทำเครื่องหมายบน Root Node เพื่อให้ช่องทำเครื่องหมายอื่นๆ ทั้งหมดได้รับการตรวจสอบโดยอัตโนมัติ โดยทั่วไป เมื่อตรวจสอบโหนดหลักแล้ว โหนดย่อยทั้งหมดควรได้รับการตรวจสอบโดยอัตโนมัติ
มันจะเป็นเรื่องง่ายที่จะทำงานนี้ให้สำเร็จที่ฝั่งไคลเอ็นต์โดยไม่ต้องยุ่งเกี่ยวกับ postback
ข้อมูลโค้ดต่อไปนี้ช่วยในการบรรลุผลเช่นเดียวกัน
ประกาศ TreeView
<asp:TreeView ID = "TreeView1" Runat = "เซิร์ฟเวอร์" DataSourceID = "XmlDataSource1" onclick = "client_OnTreeNodeChecked ();" ShowCheckBoxes = "ทั้งหมด">
<DataBindings>
<asp:TreeNodeBinding DataMember = "หมวดหมู่" ValueField = "ID" TextField = "ชื่อ" ></asp:TreeNodeBinding>
<asp: TreeNodeBinding DataMember = "คำอธิบาย" ValueField = "ค่า" TextField ="ค่า"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
ในโค้ดการประกาศ TreeView ข้างต้น คุณสามารถค้นหาคุณสมบัติ onclick="client_OnTreeNodeChecked();" เหตุการณ์ซึ่งจริงๆ แล้วเป็นฟังก์ชัน JavaScript ที่จะทำงานนี้ให้สำเร็จ
ข้อมูลโค้ด Javascript มีลักษณะดังนี้:-
<script language="javascript" type="text/javascript">
ฟังก์ชั่น client_OnTreeNodeChecked()
-
var obj = window.event.srcElement;
var treeNodeFound = เท็จ;
var ตรวจสอบสถานะ;
ถ้า (obj.tagName == "อินพุต" && obj.type == "ช่องทำเครื่องหมาย") {
var treeNode = obj;
checkState = treeNode.checked;
ทำ
-
obj = obj.parentElement;
} ในขณะที่ (obj.tagName != "TABLE")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].เซลล์[0];
ตาราง var = obj.parentElement.getElementsByTagName("ตาราง");
var numTables = ตารางความยาว
ถ้า (numTables >= 1)
-
สำหรับ (i=0; i < numTables; i++)
-
ถ้า (ตาราง [i] == obj)
-
treeNodeFound = จริง;
ฉัน++;
ถ้า (i == numTables)
-
กลับ;
-
-
ถ้า (treeNodeFound == จริง)
-
var childTreeLevel = ตาราง [i] .rows [0] .cells.length;
ถ้า (childTreeLevel > parentTreeLevel)
-
เซลล์ var = ตาราง[i].แถว[0].เซลล์[childTreeLevel - 1];
อินพุต var = cell.getElementsByTagName("อินพุต");
อินพุต [0] .checked = ตรวจสอบสถานะ;
-
อื่น
-
กลับ;
-
-
-
-
-
-
</สคริปต์>