ติดต่อฐานข้อมูลเพื่อใช้ในการแสดงผล ซึ่งในตัวอย่างนี้จะขอสมมุติข้อมูลจาก datatable ที่สร้างขึ้นแทน
ตัวอย่าง code ในฝั่ง Server (C#)
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 row in dtParent.Rows)
{
if (parentId == 0) ///////กรณีที่เป็น root node ค่าของ parentId จะเท่ากับ 0 ซึ่งในที่นี้หมายถึง node วิทยาเขต นั่นเอง
{
TreeNode child = new TreeNode
{ ///////กำหนดคุณสมบัติให้กับ root node ในส่วนของ Text,Value,ToolTip,SelectAction ตอน runtime
ขึ้นอยู่กับเงื่อนไขและจุดประสงค์ที่เราต้องการให้แสดงผล โดยในที่นี้จะนำค่าข้อมูลจากวิทยาเขตมาวนแสดง
///////สามารถกำหนด Style ตอนระบุ Text ได้ด้วย โดยในกรณีนี้ใส่ style ในแท็ก <span></span> นั่นเอง
Text = "<span style='color:blue;font-weight:bold'>" + row["CampNameThai"].ToString() + "</span>" ,
///////กำหนดค่าของ node เป็นรหัสวิทยาเขต
Value = row["CampID"].ToString(),
//////ระบุให้ ToolTip เป็นชื่อวิทยาเขต[รหัสวิทยาเขต]
ToolTip = row["CampNameThai"].ToString() + "[" + row["CampID"].ToString() +"]",
///////ระบุคุณสมบัติไม่ให้เลือกได้
SelectAction = TreeNodeSelectAction.None,
};
///////เมื่อระบุคุณสมบัติและกำหนดค่าเรียบร้อยแล้วจะเพิ่ม node ดังกล่าวลงใน TreeView ที่ชื่อว่า TvOrganization
TvOrganization.Nodes.Add(child);
///////ดึงข้อมูลคณะ/หน่วยงานตามวิทยาเขตที่กำลังวนค่าซึ่งก็คือ row["CampID"].ToString()
drChild = dtChild.Select("CampID=" + row["CampID"].ToString());
///////เรียกใช้ฟังก์ชั่น PopulateTreeView() โดยส่งค่าข้อมูลคณะ/หน่วยงานของวิทยาเขตที่กำลังวน(ตัวแปร drChild.CopyToDataTable())
เพื่อวนสร้าง node ย่อยเพิ่มลงไปใน node วิทยาเขตที่กำลังจัดการ(ตัวแปร child)
PopulateTreeView(drChild.CopyToDataTable(), int.Parse(child.Value), child);
}
else ///////กรณีที่เป็นการจัดการ node ย่อย ซึ่งในที่นี้หมายถึง node คณะ/หน่วยงาน
{
TreeNode child = new TreeNode
{
///////กำหนดคุณสมบัติให้กับ node ย่อย
ในส่วนของ Text,Value,ToolTip,SelectAction,ImageUrl,NavigateUrl,Target ตอน runtime
ขึ้นอยู่กับเงื่อนไขและจุดประสงค์ที่เราต้องการให้แสดงผล โดยในที่นี้จะนำค่าข้อมูลจากคณะ/หน่วยงานมาวนแสดง
///////แสดงค่าข้อมูลคณะ/หน่วยงานที่กำลังวน
Text = row["FacNameThai"].ToString() ,
///////แสดงค่าข้อมูลรหัสคณะ/หน่วยงานที่กำลังวน
Value = row["FacID"].ToString(),
//////ระบุให้ ToolTip เป็นชื่อคณะ/หน่วยงาน[รหัสคณะ/หน่วยงาน]
ToolTip = row["FacNameThai"].ToString() + "[" + row["FacID"].ToString() + "]",
///////ระบุคุณสมบัติไม่ให้สามารถคลิกเลือก node ได้
SelectAction = TreeNodeSelectAction.Select,
///////ระบุ url ของเพจที่ต้องการให้ลิงค์ไปโดยส่งค่าพารามิเตอร์ของรหัสคณะ/หน่วยงานไปด้วยกรณีที่ต้องการนำค่าข้อมูลไปใช้ต่อในเพจดังกล่าว
NavigateUrl = "BasicTreeviewAll.aspx?FacId=" + row["FacID"].ToString(),
///////กำหนดให้เปิดเพจใหม่
Target="_blank",
///////กำหนดให้แสดงรูปภาพดาวหน้าข้อความใน node ดังกล่าว
ImageUrl = "~/images/star.png",
};
///////เมื่อระบุคุณสมบัติและกำหนดค่าเรียบร้อยแล้วจะเพิ่ม node ดังกล่าวลงใน ตัวแปร treeNode(ซึ่งก็คือ node แม่ที่ถูกส่งมานั่นเอง)
ซึ่งเป็นพารามิเตอร์ที่ส่งมาตอนเรียกใช้ฟังก์ชั่น PopulateTreeView() แต่ถ้าเป็นกรณี เรียกใช้ฟังก์ชั่นเพื่อสร้าง root node
ค่า treeNode ที่ส่งมานี้จะเป็น null
treeNode.ChildNodes.Add(child);
}
}
}
หมายเหตุ :
1) การกำหนดคุณสมบัติให้กับ node ตอน RunTime เราสามารถเลือกระบุคุณสมบัติได้เช่นเดียวกับตอนกำหนดฝั่ง Client ที่เคยกล่าวไว้ในบทความก่อน โดย properties ที่สามารถระบุได้ขึ้นอยู่กับความต้องการของผู้ใช้ มีดังนี้
2) การประยุกต์ใช้งานและการดึงข้อมูลที่จะนำมาวนแสดงสามารถปรับเปลี่ยนในแบบที่ท่านต้องการ เพื่อเพิ่มประสิทธิภาพในการทำงานของโปรแกรมให้รวดเร็วขึ้นได้ โดยกรณีนี้เพียงยกตัวอย่างเพื่อเน้นให้ดูการวนมาแสดงใน TreeView เท่านั้น
ตัวอย่างแสดงผลลัพธ์ของการดึงข้อมูลมาแสดงใน TreeView จากโค้ดข้างต้น
