ASP.NET 2.0 TreeView memiliki banyak fitur bawaan seperti menampilkan kotak centang untuk semua Node Pohon. Pemformatan level node, gaya, dll., Mengaktifkan properti ShowCheckBoxes="All" mengaturnya untuk menampilkan kotak centang untuk semua node. Pilihan lainnya adalah Leaf, None, Parent dan Root yang menampilkan kotak centang pada level node masing-masing. Tidak ada yang tidak menampilkan Kotak Centang.
Saat kami menyetel ShowCheckBoxes="Semua", kami ingin menyediakan fitur di mana orang dapat memilih kotak centang di Node Root sehingga semua kotak centang lainnya dicentang secara otomatis. Pada dasarnya, ketika node induk dicentang, semua node anak harus diperiksa secara otomatis.
Akan menjadi intuitif untuk menyelesaikan tugas ini di sisi klien tanpa melibatkan postback.
Cuplikan kode berikut membantu melakukan hal yang sama.
Deklarasi TreeView
<asp:TreeView ID="TreeView1" Runat="server" 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 ="Nilai"></asp:TreeNodeBinding>
</DataBinding>
</asp:TreeView>
Dalam Kode deklarasi TreeView di atas, Anda dapat menemukan properti onclick="client_OnTreeNodeChecked();" acara yang sebenarnya merupakan fungsi JavaScript yang akan menyelesaikan tugas ini.
Cuplikan Kode Javascriptnya adalah sebagai berikut:-
<script Language="javascript" type="text/javascript">
fungsi client_OnTreeNodeChecked()
{
var obj = jendela.event.srcElement;
var treeNodeFound = salah;
var checkState;
if (obj.tagName == "INPUT" && obj.type == "kotak centang") {
var treeNode = obj;
checkState = treeNode.diperiksa;
Mengerjakan
{
obj = obj.parentElement;
} while (obj.tagName != "TABEL")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.baris[0].sel[0];
var tabel = obj.parentElement.getElementsByTagName("TABEL");
var numTables = tabel.panjang
jika (jumlah Tabel >= 1)
{
untuk (i=0; i < jumlah Tabel; i++)
{
if (tabel[i] == obj)
{
treeNodeFound = benar;
saya++;
jika (i == jumlah Tabel)
{
kembali;
}
}
jika (treeNodeFound == benar)
{
var childTreeLevel = tabel[i].baris[0].sel.panjang;
jika (tingkat pohon anak > tingkat pohon induk)
{
var sel = tabel[i].baris[0].sel[tingkat pohon anak - 1];
var inputs = sel.getElementsByTagName("INPUT");
input[0].diperiksa = status diperiksa;
}
kalau tidak
{
kembali;
}
}
}
}
}
}
</skrip>