มาทำความรู้จักกับพื้นฐานการใช้งาน “TreeView” สำหรับมือใหม่กันดีกว่า

ขั้นตอนสร้าง TreeView อย่างง่ายจาก Tool box ของ Visual studio .Net สามารถทำได้ดังนี้

1. สร้าง TreeView โดยเลือกจากแท็บเครื่องมือ ในกลุ่ม Navigation มาวางในหน้าจอ design ของเรา ดังรูป
   
   
   
2. การเพิ่มและจัดการ node ให้กับ TreeView ได้โดยการคลิกเลือก “Edit Nodes…” ดังภาพ
   
   
   
3. การจัดการเพิ่ม-ลดข้อมูล node ในระดับต่างๆ จะแสดงภาพดังหน้าจอต่อไปนี้ เพื่อใช้ในการจัดการเพิ่ม-ลดข้อมูล node ในระดับต่างๆ ดังนี้
   
   
   
   โดยขั้นตอนการเพิ่ม – ลด node อย่างคร่าวๆ มีดังนี้
   • การเพิ่ม node ที่เป็น root (ลำดับแรกสุด) โดยการกดปุ่ม
   • การเพิ่ม node ระดับย่อย(child node) โดยการกดปุ่ม
   • การลบ node ที่ไม่ต้องการ สามารถทำได้โดยการกดปุ่ม
   • ปรับเปลี่ยนระดับความลึกของ node โดยคลิกเลือก node ที่ต้องการจัดการและกดปุ่ม เพื่อเลื่อนระดับความลึกมากน้อยได้ตามต้องการ ซึ่งจะเห็นได้ว่ามีการทำงานคล้ายกับการเยื้องย่อหน้าใน MS Word ที่เราคุ้นเคยกันดี
   • การเลื่อนลำดับบน-ล่างให้กับ node สามารถทำได้โดยกดปุ่ม
     
     ตัวอย่าง หน้าจอการจัดการ node ใน TreeView
     
     
     
                   จากภาพตัวอย่าง มีการเพิ่มและจัดการ node ข้อมูลโครงสร้างองค์กรตั้งแต่ระดับมหาวิทยาลัย วิทยาเขต และคณะ โดยการกำหนดค่าตายตัวจากหน้าจอ design ด้วยการระบุเอง ไม่ได้ดึงจากฐานข้อมูล ซึ่งท่านสามารถทดลองเพิ่มและจัดการได้ด้วยตัวเองเพื่อให้เข้าใจการทำงานมากขึ้น โดยลองทำตามขั้นตอนการจัดการ node ข้างต้น
                   นอกจากการเพิ่ม-ลด node แล้ว ท่านยังสามารถกำหนดคุณสมบัติให้กับ node ได้ด้วย โดยคลิกข้อมูล node ที่ต้องการจัดการจากฝั่งซ้ายมือ และกำหนดคุณสมบัติของ node ดังกล่าวในฝั่งขวามือ ซึ่งรายละเอียดการกำหนดคุณสมบัติต่างๆ ในแต่ละ node จะขอพูดในหัวข้อถัดไป (ข้อ 4.)ค่ะ
     
     
4. กำหนดคุณสมบัติให้กับแต่ละ node เราสามารถกำหนดคุณสมบัติ (Properties) เฉพาะให้กับแต่ละ node ได้ โดยจะขอพูดถึงคร่าวๆ ที่คิดว่าน่าจะใช้อยู่บ่อยๆและน่าสนใจ ดังนี้
   
   • ShowCheckBox : เป็นการระบุว่าจะให้ node ดังกล่าวแสดงช่องให้เลือกหรือไม่
     
   • Checked : เป็นการระบุว่า ต้องการให้มีการทำเครื่องหมายถูกไว้ในกล่อง check box หรือไม่ ซึ่งต้องมีการกำหนดควบคู่กับ ShowCheckBox = “true” นั่นเอง
     
   • Text : ระบุว่าต้องการให้ node ดังกล่าวแสดงข้อความอะไร
     
   • Value : ระบุค่าที่จะกำหนดให้กับ node ดังกล่าว และสามารถเลือกดึงค่าไปใช้งานได้(ในกรณีที่จะนำไปพัฒนาโปรแกรมต่อ)
     
   • NavigateUrl : กำหนดว่าเมื่อกด node ดังกล่าวจะให้ไปยังหน้าจอใด โดยระบุชื่อเพจหน้าจอนั้น
     
   • Target : เป็นการระบุการเปิดเพจในกรณีที่มีการกำหนด NavigateUrl ไว้ว่าจะให้เปิดเพจใหม่ หรืออยู่ในหน้าเดิมนั่นเอง
     
   • ImageUrl : เป็นการระบุว่าต้องการให้แสดงเป็นรูปภาพอะไรหน้าข้อความใน node นั้นๆ
     
   • Selected : เป็นการระบุว่าจะให้ node ดังกล่าวสามารถคลิกลิงค์ได้หรือไม่
     
   • SelectAction : กำหนด action ที่จะให้ทำตอนกดเลือกลิงค์ใน node นั้น
     1) Expand : เมื่อหากต้องการให้คลิกแล้วขยาย node ย่อย ซึ่งเมื่อคลิกแล้วจะย่อ-ขยาย node ย่อยได้
     2) SelectExpand : จะเป็นการระบุให้มีการขยาย node เช่นกัน แต่จะต่างกันตรงที่เมื่อขยาย node ย่อยแล้วจะไม่ย่อ-ขยายให้อีกแบบ Expand นั่นหมายถึงว่าจะสามารถคลิกลิงค์ของ node เพื่อขยายได้เท่านั้น แต่จะไม่สามารถย่อกลับมาได้นั่นเอง
     3) None : เมื่อไม่ต้องการให้คลิกได้
     
   • ToolTip : เป็นการระบุข้อความที่ต้องการให้แสดงเมื่อชี้ไปที่ node นั้นๆ
     
   • Expanded : เป็นการกำหนดว่า ตอนเริ่มต้นจะให้ node ย่อยของ node ดังกล่าวขยายไว้หรือไม่
     
     ตัวอย่าง ผลลัพธ์จากการกำหนดลองกำหนดค่าต่างๆให้กับบาง node
     
     
                   จากภาพ จะเห็นว่าแต่ละ node มีการแสดงผลแตกต่างกันตามที่เราระบุ เช่น บาง node มีการกำหนดให้แสดงภาพหน้าข้อความ บาง node ไม่สามารถคลิกลิงค์ได้ เช่น มหาวิทยาลัยสงขลานครินทร์ และบาง node มี check box อยู่หน้าข้อความให้เลือก และบาง node มีการยุบ node ย่อยไม่แสดงในตอนเริ่มต้น เป็นต้น
     
5. กำหนดคุณสมบัติให้กับทุก node จาก properties ของคอนโทรล TreeView ซึ่งจะแตกต่างจากการกำหนดในแต่ละ node ในข้อ 4. เนื่องจากวิธีการกำหนดคุณสมบัติแบบนี้ จะเหมาะกับกรณีที่ไม่ต้องการระบุคุณสมบัติแยกในแต่ละ node แต่ต้องการให้เป็นไปในแบบเดียวกันทั้ง TreeView ทำให้ลดระยะเวลาที่จะต้องกำหนดรูปแบบให้กับทุก node ที่ต้องการให้แสดงผลเหมือนกัน โดยจะขอยกตัวอย่างให้กับคุณสมบัติบางตัวที่อาจจะจำเป็นต้องใช้ ดังนี้
   • ShowCheckBox : เป็นการกำหนดคุณสมบัติคล้ายกับที่กำหนดให้กับแต่ละ node แต่หากมากำหนดที่ตรงนี้ จะทำให้ทุก node แสดงหรือซ่อนกล่อง check box ได้จากจุดเดียว โดยมีให้เลือก 4 ตัวเลือก ดังนี้
     
     1) All : กำหนดให้ทุก node แสดง check box
     
     ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”All”
     
     
     จากภาพจะเห็นว่า มี check box อยู่ในแต่ละ node ทั้งหมด โดยการกำหนดที่คุณสมบัติ ShowCheckBox =”All” นี้ที่จุดเดียว โดยไม่ต้องไปกำหนดที่แต่ละ node
     
     2) Leaf : กำหนดให้แสดง check box เฉพาะ node ลูกที่ไม่มี node ย่อย
     
     ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”Leaf”
     
     
     จากภาพจะเห็นว่า จะแสดงผล check box เฉพาะ node ที่เป็นลูก และไม่มี node ย่อยอีก ซึ่งเรียก node แบบนี้ว่า “Leaf” นั่นเอง
     
     3) None : ไม่แสดง Checkbox ใน node ใดๆ เลย
     
     ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”None”
     
     
     จากภาพจะเห็นว่า ไม่แสดงผล check box ใน node ใดๆเลย
     
     4) Parent : เป็นการแสดง check box เฉพาะตำแหน่ง node ที่มีลูก หรือ child node ที่ไม่ใช่ root node นั่นเอง
     
     ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”Parent”
     
     
     จากภาพจะเห็นว่า จะแสดง check box เฉพาะ node ที่มีลูกในระดับย่อย และต้องไม่ใช่ root node นั่นเอง
     
     5) Root : จะแสดง check box เฉพาะตำแหน่ง root หรือ node ระดับแรกสุดเท่านั้น
     
     ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”Root”
     
     จากภาพจะเห็นว่า จะแสดงผล check box ใน node ที่อยู่ในระดับ root หรือระดับแรกสุดนั่นเอง
     
     
   • ShowExpandCollapse : เป็นการระบุว่าต้องการให้แสดงตัวย่อ-ขยาย ที่เป็นเครื่องหมาย + และ – เพื่อย่อขยาย TreeView หรือไม่ หากกำหนดเป็น false จะไม่สามารถย่อ-ขยาย TreeView ดังกล่าวได้ โดยค่าตั้งต้นจะเป็น true ซึ่งหมายถึงสามารถย่อ-ขยายได้นั่นเอง
     
     ตัวอย่าง การกำหนดคุณสมบัติ ShowExpandCollapse =”false”
     
     จากภาพจะเห็นว่า ไม่สามารถย่อ-ขยายข้อมูลของ TreeView แต่ละ node ได้เลย
     
     
   • BorderStyle : เป็นการกำหนดรูปแบบของเส้นขอบของ TreeView ที่เราต้องการได้ เช่น solid dashed dotted เป็นต้น
     
     ตัวอย่าง การกำหนดคุณสมบัติของเส้นขอบ BorderStyle เป็น Double
     
     
     
   • CollapseImageUrl : เป็นการระบุ url ภาพที่ต้องการนำมาใช้แสดงแทนเครื่องหมาย – เพื่อให้กดแล้วย่อ node ย่อย
   • ExpandImageUrl : เป็นการระบุ url ภาพที่ต้องการนำมาใช้แสดงแทนเครื่องหมาย + เพื่อให้กดแล้วขยาย node ย่อย
   • NoExpandImageUrl : เป็นการระบุ url ภาพที่ต้องการนำมาใช้แสดงในกรณีที่ node ดังกล่าวไม่มี node ย่อย
     
     ตัวอย่าง ผลลัพธ์ของการระบุค่าของ CollapseImageUrl ให้เป็นรูปเครื่องหมายลบ กำหนดค่า ExpandImageUrl ให้เป็น url ของรูปที่เป็นเครื่องหมายบวก และกำหนด NoExpandImageUrl เป็นรูปไอคอนสีฟ้า ดังรูป
     
     หมายเหตุ : รูปภาพที่กำหนดในการย่อ-ขยายจะแสดงผลเมื่อ ShowLines เป็น false เท่านั้น
     
     
   • ImageSet : เป็นการกำหนดภาพที่ต้องการให้แสดงหน้า node ลักษณะคล้ายกับ bullet ดังตัวอย่างในภาพ
     
     
     
     จากภาพ จะเห็นว่าในฝั่งซ้ายมือ จะมี “ตัวเลือกรูปแบบ” ให้เลือกหลายแบบด้วยกัน และเมื่อเราคลิกแต่ละรูปแบบจะมีตัวอย่างผลลัพธ์แสดงให้ดูฝั่งขวามือ ซึ่งท่านสามารถเลือกให้เหมาะสมกับเนื้อหาในข้อมูลของท่านได้ หรือจะกำหนดรูปแบบเองจากคุณสมบัติที่กล่าวไว้ก่อนหน้านี้ได้นั่นเอง โดยท่านสามารถเลือกกำหนดคุณสมบัติเช่นนี้ได้จากการคลิกเลือก “Auto Format” ได้เช่นกัน ดังภาพ
     
     
     
     เมื่อเราคลิกเลือก “Auto Format…” จะปรากฎภาพหน้าจอดังนี้
     
     
     
     ซึ่งจะเห็นได้ว่า มีลักษณะการจัดการเดียวกับตอนเรากำหนดคุณสมบัติจาก ImageSet นั่นเอง
     
     
   • การกำหนด style ให้กับ node แต่ละแบบ ไม่ว่าจะเป็น LeafNodeStyle NodeStyle ParentNodeStyle หรือ RootNodeStyle ท่านก็สามารถกำหนดรูปแบบและตกแต่งความสวยงามให้กับ node แต่ละแบบได้ เช่น การใส่พื้นหลัง สีตัวอักษร หรือ แม้กระทั่งการระบุ style sheet ที่จัดทำไว้ก็สามารถทำได้เช่นกัน
     
     
   • LevelStyles : เป็นการกำหนด Style ให้กับแต่ละ level โดยจะเรียงตามลำดับ style ของแต่ละ node เริ่มจาก root ตามลำดับ ดังภาพ
     
     
     
     ตัวอย่าง ผลลัพธ์ของการกำหนด LevelStyles 3 ระดับข้างต้น โดยกำหนดให้ Level แรก มีสีตัวอักษรเป็นสีม่วง และ Level ที่ 2 มีสีตัวอักษรเป็นสีชมพู และ Level ที่ 3 มีตัวอักษรสีเขียว ดังภาพ
     
     
     
     
   • ExpandDepth : เป็นการกำหนดว่าจะให้การแสดงผล TreeView ขยายเริ่มต้นที่กี่ระดับ โดยค่าตั้งต้นจะเป็นแบบ FullyExpand ซึ่งหมายถึงขยายทั้งหมดตอนเริ่มต้น
     
     ตัวอย่าง ผลลัพธ์การระบุ ExpandDepth = “1”
     
     
   • DataSourceID : เป็นการระบุแหล่งข้อมูลให้กับการแสดงผล TreeView ให้มาจากการดึงข้อมูล ไม่ใช่การระบุค่า node ตายตัวจากหน้าเพจ
     
   • NodeIndent : ระยะการเยื้องหน้าของ node แต่ละระดับ โดยมีค่าตั้งต้นเท่ากับ 20 ซึ่งท่านสามารถลดหรือเพิ่มได้ตามความเหมาะสม
     
   • ShowLines : เป็นการระบุว่าต้องการให้แสดงเส้นโยงเชื่อมของ node แต่ละระดับหรือไม่
     
   • SelectedNodeStyle : เป็นการกำหนด style ให้กับ node ที่โดนเลือกคลิก เช่น การระบุพื้นหลัง หรือการกำหนดสีตัวอักษร เป็นต้น
     ตัวอย่าง ผลลัพธ์การระบุ SelectedNodeStyle ให้พื้นหลังเป็นสีม่วงและตัวอักษรสีขาว โดยเมื่อคลิกที่ node ใดก็ตามก็จะแสดงผลดังที่ได้ระบุไว้ที่ node นั้น