Di hari yang cerah ini, waktunya saya untuk berbagi. Jadi ceritanya teman saya ada permasalahan dalam tasknya, dia disuruh untuk membuat menu dengan Treeview namun menu tersebut harus dinamis. Nah, di sinilah tantangannya. Saya pun ikut mencari cara untuk permasalahan ini. Dikarenakan dinamisnya dan menu-menu itu pun dapat memiliki anak-anak yang kita tidak tahu cabangnya sampai level berapa. Saya memikirkan untuk membuat sebuah fungsi rekursif untuk mengisi setip node anak pada TreeView ini. Apa itu fungsi rekursif? Fungsi rekursif merupakan sebuah fungsi yang memanggil dirinya sendiri. Di dalam fungsi tersebut diharuskan adanya sebuah kondisi yang memungkinkan untuk keluar dari fungsi. Bila tidak, maka tentunya akan menyebabkan hang dikarenakan pemanggilan yang tak terhenti. Untuk membuatnya, berikut langkah-langkah yang bisa teman-teman ikuti :
1. Buat sebuah project pada Visual Studio. Di sini saya menggunakan Visual Studio 2010 dengan .NET Framework 4.0. Pilih Jenis Project ASP Web Empty Application.
2. Tambahkan Connection String berikut pada Web.config
3. Tambahkan class DataAccess pada project. Class dapat diakses pada link berikut :
DataAccess.cs
4. Tambahkan sebuah halaman Web dan tambahkan sebuah TreeView dengan nama tvMenu.
5. Isi code Default.aspx.cs dengan code berikut :
6. Buat database MenuTreeView. Buat table tblMenu dengan Query berikut :
7. Buat sp sp_GetMenuList dengan query berikut :
8. Isi table tblMenu dengan data seperti berikut :
9. Coba jalankan.
Saya akan menjelaskan beberapa code yang saya buat.
Pada fungsi GetData di atas, saya membuat fungsi ini menghasilkan tipe data DataTable. Kita akan mendapatkan data dari hasil execute sp_GetMenuList yang akan kita gunakan sebagai data acuan untuk me-list menu.
Pada bagian Page_Load di bagian code di atas, saya mendeklarasikan sebuah variable dengan tipe DataTable. Dari hasilnya, data tersebut kemudian saya filter kembali hanya untuk yg parent saja.
Pada code di atas, saya hapus terlebih dahulu semua node yg ada pada TreeView. Ini untuk menghindari duplicate node saat AutoPostBack ataupun Refresh halaman. Pada bagian for ini, saya ingin membuat node Parent dari data yang telah kita filter pada baris code sebelumnya. Untuk data-data yang memiliki alamat URL, saya tambahkan link URL tersebut pada node. Bila tidak ada, saya jadikan ActionSelect node agar meng-expand Tree saat diklik.
Pada bagian di ataslah saya mendefinisikan setiap node anak sacara rekursif pada fungsi setChildNode
Fungsi di atas yang digunakan untuk mendefinisikan node anak dengan kondisi dimana node tersebut masih memiliki anak. Jika tidak, maka fungsi rekursif akan keluar. Bila benar, saat dijalankan akan tampil seperti berikut :
Demikian sharing dari saya, mudah-mudahan bermanfaat untuk teman-teman yang mengalami masalah serupa. Selamat bekerja… 😀
Source Code lengkap dapat di download di sini :
https://drive.google.com/file/d/0B9_2JJSi4W6RT01ybmJtWEcwYWs/view?usp=sharing
SQL dapat di download di sini :
https://drive.google.com/file/d/0B9_2JJSi4W6RdmF6dnBjVlF2b1U/view?usp=sharing