Skip to main content
การใช้งาน jstree

How to use jsTree Jquery Tree Plugin With PHP MySQL

สวัสดีครับในบทความนี้ เราจะมาแนะนำถึงการใช้งาน jsTree  เป็น Library สำหรับแสดงผลข้อมูล ที่มีลักษณะโครงสร้างต้นไม้  (Tree Structure)

ข้อมูลชนิดโครงสร้างต้นไม้   (Tree Structure)  คือ โครงสร้างข้อมูลชนิดหนึ่งที่ข้อมูลมีความสัมพันธ์กัน และ มีลักษณะการเรียงเป็นกิ่งก้านสาขากันออกไป คล้ายกับ กิ่งของต้นไม้ (ถึงได้เรียกว่าโครงสร้างข้อมูลต้นไม้ครับ) โดยมักใช้กับข้อมูลที่มีการแบ่งลำดับชั้นเช่น โครงสร้างองค์กร หรือ หมวดหมู่หนังสือที่แบ่งออกเป็นชั้น ๆ เป็นต้น

โครงสร้าง Tree จะประกอบด้วย

Root คือ โหนดที่อยู่บนสุด และเป็นจุดเริ่มต้นของข้อมูลใน Tree โดยที่ Tree จะมี Root ได้เพียงอันเดียวเท่านั้นครับ
Node คือ ใช้เรียกแทน ข้อมูล หรือ กลุ่มของข้อมูล
Parent Node คือ การที่ Node ใด ๆ มี Node (Child Node) อื่น ๆ เชื่อมต่ออยู่ด้านล่าง
Child Node คือ การที่ Node ใด ๆ มี Node (Parent Node) อื่น ๆ เชื่อมต่ออยู่ด้านบน

 

ขอบคุณภาพจาก  wikipedia

จากภาพ Root Node คือ 8  ส่วน 3 , 10  คือ Child Node ของ 8  ส่วน  3  เป็น Parent Node ของ 1 ,  6  กลับกัน  1 , 6  ก็เป็น Child Node ของ 3 เช่นกันครับ  ส่วน 6  ก็เป็น Parent Node ของ 4 , 7 กลับกัน 4 ,  7  ก็เป็น  Child Node ของ 4

สำหรับโครงสร้างข้อมูลแบบ Tree สามารถไล่ระดับชั้นของข้อมูลลงไปได้เรื่อย ๆ ซึ่งรายละเอียดของข้อมูลโครงสร้างแบบ Tree ยังมีอีกหลายส่วนครับ สามารถศึกษาเพิ่มเติมได้ครับ  แต่ หลัก ๆ ในบทความนี้ จะใช้แค่  Root Node , Parent Node , Child Node ครับ

การใช้งาน JsTree Jquery Tree Plugin

สำหรับ JsTree เป็น Library สำหรับแสดงข้อมูลในรูปแบบ Tree ซึ่งใช้งานง่าย เพียงนำเข้า Script ก็สามารถใช้งานได้ทันที  และที่สำคัญ  สามารถใช้งานได้ฟรีครับ เพราะเป็น Open Source ภายใต้ MIT license  และยังมีเอกสาร Document ที่ค่อนข้างละเอียด สามารถ Download และ ศึกษารายละเอียดเพิ่มเติมได้ที่  www.jstree.com

มาดูตัวอย่างการใช้งานกันเลยครับ

ก่อนอื่นก็ต้องนำเข้า  Css ของ  JsTree กันก่อน

ต่อมา ก็สร้าง Tag div สำหรับแสดงผล Tree

แล้วตามด้วย  jquery.min.js  และ  jstree.min.js

และสุดท้ายก็เรียกใช้งาน JsTree ครับ

ตัวอย่าง Code การเรียกใช้งาน JsTree

ภาพตัวอย่าง

ตัวอย่างการเรียกใช้งานกับฐานข้อมูล MySQL ครับ

ก่อนอื่นเรามาสร้างฐานข้อมูล treejs  ชื่อ tb_node โดยมีข้อมูลดังนี้

สร้างไฟล์ response.php โดยจะมีการดึงข้อมูลจากฐานข้อมูลและส่งค่ากลับออกมาเป็น Json Format

สร้างไฟล์ index.php

ตัวอย่างการแสดงผล

การประยุกต์ใช้งานเพิ่มเติม กำหนด Event  เพิ่ม แก้ไข ลบ ข้อมูล JsTree With PHP MySQL

สร้างไฟล์ crud_response.php

สร้างไฟล์ crud.php

ตัวอย่างการแสดงผล

SourceCode Demo

ขอขอบคุณข้อมูลจาก
www.jstree.com
phpflow
wikipedia