การสร้างตารางข้อมูลแบบ Hierarchy Data Structure เพื่อใช้กับ Treeview control

Treeview control เป็น control ที่ใช้บ่อยกับงาน Interface ที่แสดงข้อมูลในรูปแบบที่เป็น ระดับสัมพันธ์ กันหรือเรียกว่า Hierarchy Data Structure ซึ่งเป็นโครงสร้างแบบเดียวกับ Tree สำหรับ ผู้พัฒนาในระดับต้น มักต้องประสบปัญหาความยุ่งยากเมื่อนึกถึงโครงส้รางแบบนี้ ลองมาดูวิธีการตัวอย่างนี้เป็น แนวทางในการ ในการนำไปประยุกค์ใช้งานต่อไปนะครับ

ความต้องการในการใช้งาน หรือ Business Requirement
ตัวอย่างข้อมูลที่ต้องแสดงในลักษณะนี้ ก็อย่างเช่นการแสดงรายการสินค้าภายใต้กลุ่มสินค้าต่าง ๆ  ซึ่งในบ้างครั้งการสร้างโครงสร้างข้อมูล ก็เป็นเรื่องท้าทายให้คิดนะครับ เนื่องจากข้อมูลที่เราใช้งานนั้นมีความเปลี่ยนแปลงเกิดขึ้นได้ตลอดเวลา รูปแบบโครงข้อมูลแบบได้ถึงจะเหมาะสมในการเก็บข้อมูลในลักษณะนี้ สำหรับมือเก่า ๆ ชั้นลายครามอาจจะมองดูว่า เป็นเรื่องหมูตุ๋น งายเสียนี่กระไร แต่มือใหม่หัดขับก็อาจจะมึน ๆ เมื่อเจอโจทย์แบบนี้นะครับ ลองพิจารณาดู จากภาพด้านล่างนี้นะครับ หากต้องการ เก็บข้อมูลและแสดงข้อมูลในรูปแบบนี้ โดยให้ข้อมูลอยู่ในฐานข้อมูล สามารถแก้ไขเปลี่ยนแปลงได้เราจะทำกันอย่างไร

การแก้ปัญหา
-    สร้างโครงสร้างข้อมูลให้ได้ตาม รูปแบบที่ต้องการ (Hierarchical data)
-    สร้าง logic ในการอ่านข้อมูล (Recursive Funciton)
-    ส่งแสดงใน Treeview
โครงสร้างข้อมูลตัวอย่าง จากรูปด้านล่าง เรามี ตารางข้อมูล ทีมี field เป็น NODE_DESCRIPTION , NODE_ID, NODE_PARENT_ID

ให้ NODE_PARENT_ID เป็นข้อมูลบอก ว่า recode ไหน ที่เป็น parent ของมัน โดยดูที่ NODE_ID ครับ เท่านี้เราก็สามารถที่จะมีโครงสร้างตารางข้อมูล ที่จะแสดง กับ  TreeView ได้แล้วนะครับ  ซึ่งก็จะได้โครงสร้างดังนี้นะครับ
[ตารางชื่อ tblHierarchyTree – SqlServer Express 2005]

ต่อมา สร้าง Data Access ให้กับข้อมูลข้างต้นนะครับ
-          สร้าง class ไว้เก็บค่าจากตาราง ให้ชื่อว่า HierarchyNode
-          List ของ HierarchyNode เป็น class ชื่อ HierarchyNodes [สังเกตว่าเติม s นะครับ ]
*จาก code ตัวอย่างอาจจะดู รวบรัด มือใหม่อาจจะงง ก็แยก class HierarchyNode ออกจาก HierachyNodes ก็ได้ครับแล้วค่อย ทำเป็น List ทีหลัง  ให้เป็น file ชื่อ HierarchyNode.cs

หลังจากนั้น แล้วทำ Data Access Class เพื่ออ่านค่าจาก ตาราง tblHierarchyTree ตาม code ด้านล่างนะครับ

ผมให้ class ชื่อว่า    HierarchyNodeADO นะครับ เต็ม ๆ จะได้ดังนี้นะครับ  ไฟล์ชื่อ HierarchyNodeADO.cs

01	using System;

02	using System.Collections.Generic;

03	using System.Linq;

04	using System.Text;

05	using System.Data.SqlClient;

06

07	namespace wHierarchyApp.DAO

08

{

09	public class HierarchyNodeADO

10

{

11	string connetion = @"Server=.\SQLEXPRESS; User Id=sa;Password=pongratee;Database=test" ;

12

13	public HierachyNodes getAllNODE2()

14

{

15	string sqlstr = "Select * from tblHierarchyTree order by NODE_ID";

16	HierachyNodes result = new HierachyNodes();

17	using (SqlConnection con = new SqlConnection(connetion))

18

{

19	con.Open();

20	SqlCommand cmd = new SqlCommand();

21	cmd.Connection = con;

22	cmd.CommandText = sqlstr;

23	SqlDataReader reader = cmd.ExecuteReader();

24	while (reader.Read())

25

{

26	result.Add(new HierachyNodes.HierarchyNode()

27

{

28	NODE_ID = int.Parse(reader["NODE_ID"].ToString()),

29	NODE_DESCRIPTION = reader["NODE_DESCRIPTION"].ToString(),

30	NODE_PARENT_ID = int.Parse(reader["NODE_PARENT_ID"].ToString())

31

});

32

}

33

}

34	return result;

35

}

36

}

37

}

หลังจากนั้นเราก็ เปิด Form1.cs หรือ สร้างในชื่อใด ๆ ก็ได้นะครับแล้ว ก็ วาง Treeview contrl และ button ลงไปครับ
Treeview สำหรับการแสดงผล ส่วน Button สำหรับการ สั่งให้ดึงค่าจาก ตารางมาแสดงผลนะครับ ดู code ด้านล่างเป็นส่วนที่ สำคัญสำหรับการแสดงผลนะครับ  ลองดู logic ของ code และทำความเข้าใจดูนะครับ ตรงไปตรงมาไม่ยากนะครับ ผมละส่วนอื่น ไว้ในฐานที่เข้าใจนะครับ code ส่วนนี้จะเป็นส่วนที่ ดังข้อมูลจาก DataBase มาแสดงผลผ่าน HierarchyNodeADO class [Data access class]


ref : http://gpluspluss.com/2012/06/04/hierarchy_data_structure_to_treeview_control/