ในบทความนี้ ผู้เขียนก็ยังคงอยู่ในเรื่องของ TreeView เช่นเคย เพื่อต่อยอดจากบทความก่อนในหัวข้อเรื่อง “มาทำความรู้จักกับพื้นฐานการใช้งาน “TreeView” สำหรับมือใหม่กันดีกว่า” ที่เป็นบทความเกี่ยวกับเรื่องการแนะนำวิธีจัดการกับ TreeView ด้วยการกำหนดคุณสมบัติต่างๆ แต่งสีเติมกลิ่น ให้ TreeView ของเราน่าสนใจยิ่งขึ้น แต่ข้อมูลที่นำมาใช้ในการแสดงผลยังคงเป็นในลักษณะกำหนดเองเป็นค่าตายตัวจากหน้าจอและยังไม่เน้นเรื่องดึงข้อมูลจากฐานข้อมูล ในบทความนี้จึงถือเป็นภาคต่อจากบทความที่แล้วและขอเน้นในส่วนของการดึงข้อมูลมาแสดงผลบน TreeView ในเชิงโปรแกรมกันบ้าง เพื่อให้ผู้อ่านได้ความรู้ทั้งในส่วนการกำหนดคุณสมบัติและการดึงข้อมูลมาแสดงไปประยุกต์ใช้ในงานพัฒนาร่วมกันได้ ขั้นตอนในการดึงข้อมูลจากฐานข้อมูลมาแสดงใน TreeView สร้าง TreeView ที่ต้องการใช้ในการแสดงผลข้อมูลตัวอย่าง code ในฝั่ง Client <body> <form id=”form1″ runat=”server”> <asp:TreeView ID=”TvOrganization” runat=”server” > </asp:TreeView> </form> </body> ติดต่อฐานข้อมูลเพื่อใช้ในการแสดงผล ซึ่งในตัวอย่างนี้จะขอสมมุติข้อมูลจาก datatable ที่สร้างขึ้นแทนตัวอย่าง code ในฝั่ง Server (C#) ฟังก์ชั่นตอน Page_Load protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { ///////ดึงข้อมูลวิทยาเขต โดยในการใช้งานจริงจะเป็นการติดต่อกับฐานข้อมูลเพื่อดึงค่าวิทยาเขตมาแสดง DataTable dt = this.GetCampusData(); ///////เรียกใช้งานฟังก์ชั่น PopulateTreeView() เพื่อนำค่าข้อมูลวิทยาเขตมาแสดงผลใน TreeView โดยในกรณีนี้จะเริ่มสร้างจาก root node โดยส่งค่าพารามิเตอร์ของ parentId เป็น 0 this.PopulateTreeView(dt, 0, null); } } ฟังก์ชั่นดึงข้อมูลวิทยาเขตและคณะ/หน่วยงาน private DataTable GetCampusData() { ///////เตรียมข้อมูลวิทยาเขต เนื่องจากในกรณีนี้เป็นการสมมุติโครงสร้างและข้อมูลวิทยาเขตโดยสร้างเป็น DataTable เสมือนเป็นตารางวิทยาเขตในฐานข้อมูล DataTable dtCampus = new DataTable(); dtCampus.Columns.AddRange(new DataColumn[2] { new DataColumn(“CampID”, typeof(int)), new DataColumn(“CampNameThai”,typeof(string)) }); dtCampus.Rows.Add(“01”, “วิทยาเขตหาดใหญ่”); dtCampus.Rows.Add(“02”, “วิทยาเขตปัตตานี”); dtCampus.Rows.Add(“03”, “วิทยาเขตภูเก็ต”); dtCampus.Rows.Add(“04”, “วิทยาเขตสุราษฎร์ธานี”);dtCampus.Rows.Add(“05”, “วิทยาเขตตรัง”); return dtCampus; } private DataTable GetFacultyData() { ///////เตรียมข้อมูลคณะ/หน่วยงาน ในกรณีนี้เป็นการสมมุติโครงสร้างข้อมูลคณะ/หน่วยงานและสร้างเป็น DataTable โดยมีการระบุรหัสของวิทยาเขตไว้ด้วย ซึ่งในการทำงานจริงจะเป็นการดึงข้อมูลจากตารางที่เก็บข้อมูลคณะ/หน่วยงานแทน DataTable dtFaculty = new DataTable(); dtFaculty.Columns.AddRange(new DataColumn[3] { new DataColumn(“FacID”, typeof(int)), new DataColumn(“FacNameThai”,typeof(string)) , new DataColumn(“CampID”,typeof(string)) }); dtFaculty.Rows.Add(“01”, “สำนักงานอธิการบดี”,”01″); dtFaculty.Rows.Add(“02”, “ศูนย์คอมพิวเตอร์”, “01”); dtFaculty.Rows.Add(“03”, “วิศวกรรมศาสตร์”, “01”); dtFaculty.Rows.Add(“54”, “คณะรัฐศาสตร์”, “02”); dtFaculty.Rows.Add(“07”, “ศึกษาศาสตร์”, “02”); dtFaculty.Rows.Add(“36”, “วิทยาการสื่อสาร”, “02”); dtFaculty.Rows.Add(“81”, “ศูนย์การเรียนรู้”, “03”); dtFaculty.Rows.Add(“56”, “คณะศิลปศาสตร์และวิทยาศาสตร์”, “04”); dtFaculty.Rows.Add(“44”, “คณะเทคโนโลยีและการจัดการ”, “04”); dtFaculty.Rows.Add(“46”, “คณะพาณิชยศาสตร์และการจัดการ”, “05”); dtFaculty.Rows.Add(“66”, “คณะสถาปัตยกรรมศาสตร์”, “05”); return dtFaculty; } ฟังก์ชั่นที่ใช้ในการวนแสดงข้อมูลที่ได้จากวิทยาเขตและคณะ/หน่วยงานมาแสดงใน TreeView private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode) { ///////ดึงค่าข้อมูลคณะ/หน่วยงาน DataTable dtChild = this.GetFacultyData(); DataRow[] drChild; ///////วนค่าข้อมูลวิทยาเขตจาก dtParent ที่เป็นพารามิเตอร์ที่ส่งมา foreach (DataRow
