يحتوي ASP.NET 2.0 TreeView على العديد من الميزات المضمنة مثل إظهار مربع اختيار لجميع عقد الشجرة. تنسيق مستوى العقدة والنمط وما إلى ذلك، يؤدي تمكين خاصية ShowCheckBoxes = "الكل" إلى تعيينها لإظهار مربع اختيار لجميع العقد. الخيارات الأخرى هي Leaf وNone وParent وRoot والتي تعرض مربعات الاختيار على مستويات العقدة المعنية. لا شيء لا يعرض خانات الاختيار.
عندما نقوم بتعيين ShowCheckBoxes = "الكل"، نود توفير ميزة حيث يمكن للأشخاص تحديد مربع الاختيار الموجود على العقدة الجذرية بحيث يتم تحديد جميع مربعات الاختيار الأخرى تلقائيًا. في الأساس، عند فحص العقدة الأصلية، يجب فحص جميع العقد الفرعية تلقائيًا.
سيكون من البديهي إنجاز هذه المهمة من جانب العميل دون الحاجة إلى إعادة النشر.
يساعد مقتطف الكود التالي في تحقيق نفس الشيء.
إعلان TreeView
<asp:TreeView ID = "TreeView1" Runat = "الخادم" DataSourceID = "XmlDataSource1" onclick = "client_OnTreeNodeChecked ()؛" ShowCheckBoxes = "all">
<DataBindings>
<asp:TreeNodeBinding DataMember = "Category" ValueField = "ID" TextField = "Name"> </asp:TreeNodeBinding>
<asp:TreeNodeBinding DataMember = "Description" ValueField = "Value" TextField ="Value"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
في رمز إعلان TreeView أعلاه، يمكنك العثور على الخاصية onclick="client_OnTreeNodeChecked();" الحدث الذي هو في الواقع وظيفة JavaScript التي من شأنها إنجاز هذه المهمة.
مقتطف كود جافا سكريبت هو كما يلي:-
<script language="javascript" type="text/javascript">
الدالة client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var TreeNodeFound = false;
var checkState;
إذا (obj.tagName == "INPUT" && obj.type == "checkbox") {
var TreeNode = obj;
checkState = TreeNode.checked;
يفعل
{
obj = obj.parentElement;
} بينما (obj.tagName != "TABLE")
varparentTreeLevel = obj.rows[0].cells.length;
varparentTreeNode = obj.rows[0].cells[0];
var table = obj.parentElement.getElementsByTagName("TABLE");
فار numTables = table.length
إذا (numTables >= 1)
{
لـ (i=0; i < numTables; i++)
{
إذا (الجداول [i] == الكائن)
{
TreeNodeFound = true;
أنا++;
إذا (i == numTables)
{
يعود؛
}
}
إذا (treeNodeFound == صحيح)
{
var ChildTreeLevel = table[i].rows[0].cells.length;
إذا (childTreeLevel >parentTreeLevel)
{
فار الخلية = الجداول[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkState;
}
آخر
{
يعود؛
}
}
}
}
}
}
</script>