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

How to use jsTree Jquery Tree Plugin With PHP MySQL

monkeywebstudio JQUERY, PHP

สวัสดีครับในบทความนี้ เราจะมาแนะนำถึงการใช้งาน 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 กันก่อน

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

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

 <div id="jstree_demo_div"></div>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

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

	$('#jstree_demo_div').jstree({
		'core' : {
			'data' : [
				{ 
				  "text" : "Root node",
				  "state" : { "opened" : true },
					"children" : [
						{ "text" : "Child node 1" },
						{ "text" : "Child node 2" },
						{ 
							"text" : "Node 2",
							"state" : { "opened" : true },
							"children" : [
								{ "text" : "Child node 2.1" },
								{ "text" : "Child node 2.2" }
						]}
				]}
			]
		}
	});

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>

	<h1>Inline JsTree data demo</h1>
	
	<div id="jstree_demo_div"></div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
	<script>
	$('#jstree_demo_div').jstree({
		'core' : {
			'data' : [
				{ 
				  "text" : "Root node",
				  "state" : { "opened" : true },
					"children" : [
						{ "text" : "Child node 1" },
						{ "text" : "Child node 2" },
						{ 
							"text" : "Node 2",
							"state" : { "opened" : true },
							"children" : [
								{ "text" : "Child node 2.1" },
								{ "text" : "Child node 2.2" }
						]}
				]}
			]
		}
	});

	</script>
</body>
</html>

ภาพตัวอย่าง

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

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

CREATE TABLE `tb_node` (
  `id` int(11) NOT NULL,
  `parent_id` varchar(100) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT;

INSERT INTO `tb_node` (`id`, `parent_id`, `name`) VALUES
(1, '0', 'คณะวิทยาการคอมพิวเตอร์'),
(2, '1', 'คอมพิวเตอร์เบื้องต้น'),
(3, '1', 'การโปรแกรมคอมพิวเตอร์'),
(4, '1', 'การบริหารเครือข่าย'),
(5, '1', 'เทคโนโลยีสารสนเทศ'),
(6, '2', 'Hardware'),
(7, '2', 'Software'),
(8, '3', 'Java'),
(9, '3', 'PHP'),
(10, '4', 'Network 1'),
(11, '4', 'Network 2'),
(12, '5', 'การบริหารโครงการ 1');

ALTER TABLE `tb_node`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tb_node`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;

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

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "treejs";

$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

mysqli_set_charset($conn, "utf8");


$sql = "SELECT *  FROM tb_node";

$result_query = mysqli_query($conn, $sql);

if (mysqli_num_rows($result_query) > 0) {
	
	 while($row = mysqli_fetch_assoc($result_query)) {
		
		$data[] = array(
			'id' => $row["id"],
			'parent_id' => $row["parent_id"],
			'text' => $row["name"],
		);
	}
	
	$itemsByReference = array();

	// Build array of item references:
	foreach($data as $key => &$item) {
	   $itemsByReference[$item['id']] = &$item;
	   // Children array:
	   $itemsByReference[$item['id']]['children'] = array();
	   // Empty data class (so that json_encode adds "data: {}" ) 
	   $itemsByReference[$item['id']]['data'] = new StdClass();
	}

	// Set items as children of the relevant parent item.
	foreach($data as $key => &$item)
	   if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
		  $itemsByReference [$item['parent_id']]['children'][] = &$item;

	// Remove items that were added to parents elsewhere:
	foreach($data as $key => &$item) {
	   if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
		  unset($data[$key]);
	}

	// Encode:
	echo json_encode($data);
}

$conn->close();
?>

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>

	<h1>Basic Select data With Php MySQL</h1>
	
	<div id="frmt"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
	
	<script>

	$('#frmt').jstree({
		"state" : { "key" : "demo" },
		"check_callback" : true,
		'core' : {
			'data' : {
				"url" : "response.php",
				"dataType" : "json" // needed only if you do not supply JSON headers
			}
		}
	});
	
	</script>
</body>
</html>

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

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

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

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "treejs";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

mysqli_set_charset($conn, "utf8");

$sql = "SELECT *  FROM tb_node";

$result_query = mysqli_query($conn, $sql);

if (mysqli_num_rows($result_query) > 0) {
	
	$operation = isset($_GET['operation']) ? $_GET['operation'] : NULL;
	
	$id = isset($_GET['id']) ? $_GET['id'] : NULL;
	
	$parent = isset($_GET['parent']) ? $_GET['parent'] : NULL;
	
	$text = isset($_GET['text']) ? $_GET['text'] : NULL;
	
	 while($row = mysqli_fetch_assoc($result_query)) {
		
		$data[] = array(
			'id' => $row["id"],
			'parent_id' => $row["parent_id"],
			'text' => $row["name"],
		);
	}
	
        switch($operation) {

            case 'get_node':

                $itemsByReference = array();

                // Build array of item references:
                foreach($data as $key => &$item) {
                   $itemsByReference[$item['id']] = &$item;
                   // Children array:
                   $itemsByReference[$item['id']]['children'] = array();
                   // Empty data class (so that json_encode adds "data: {}" ) 
                   $itemsByReference[$item['id']]['data'] = new StdClass();
                }

                // Set items as children of the relevant parent item.
                foreach($data as $key => &$item)
                   if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
                      $itemsByReference [$item['parent_id']]['children'][] = &$item;

                // Remove items that were added to parents elsewhere:
                foreach($data as $key => &$item) {
                   if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
                      unset($data[$key]);
                }
                $result = $data;
                break;
                
            case 'create_node':
                
                $node = isset($id) && $id !== '#' ? (int) $id : 0;
                
                $nodeText = isset($text) && $text !== '' ? $text : '';
				
				$sql = "INSERT INTO tb_node (id ,parent_id, name)
				VALUES (NULL,'".$parent."', '".$nodeText."')";

				if (mysqli_query($conn, $sql)) {
					
					$last_id = mysqli_insert_id($conn);

					$result = $last_id;
				}

                break;
                
            case 'rename_node':
                
                $node = isset($id) && $id !== '#' ? (int)$id : 0;
                
                $nodeText = isset($text) && $text !== '' ? $text : '';
				
				
				$sql_update_node_id = "UPDATE tb_node SET name = '".$nodeText."' WHERE id = $node";

				if (mysqli_query($conn, $sql_update_node_id)) {

				}
                
            
            break;
            case 'delete_node':
                
               $node = isset($id) && $id !== '#' ? (int)$id : 0;
								
				$sql = "DELETE FROM tb_node WHERE id=$node";

				if ($conn->query($sql) === TRUE) {
					
				}
				
            break;
        
            default:
                
            throw new Exception('Unsupported operation: ' . $operation);
                
            break;
        }

	// Encode:
	echo json_encode($result);

	
}

$conn->close();

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>

	<h1>Basic JsTree Create Update Delete</h1>
	
	<div class="col-md-12">
		<button type="button" class="btn btn-success btn-sm" onclick="demo_create();"><i class="glyphicon glyphicon-asterisk"></i> เพิ่ม</button>
		<button type="button" class="btn btn-warning btn-sm" onclick="demo_rename();"><i class="glyphicon glyphicon-pencil"></i> แก้ไข</button>
		<button type="button" class="btn btn-danger btn-sm" onclick="demo_delete();"><i class="glyphicon glyphicon-remove"></i> ลบ</button>
	</div>

	<hr>

	<div id="frmt"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
	
	<script>

        function demo_create() {
            
              var ref = $('#frmt').jstree(true),
                      sel = ref.get_selected();
              if(!sel.length) { 
                  
                  alert('กรุณาเลือก  Node ที่ต้องการ เพิ่มข้อมูล');
                  
                  return false;

              }
              
              sel = sel[0];
              
              sel = ref.create_node(sel, {"type":"file"});
              
              if(sel) {
                ref.edit(sel);
              }
        }
        
        function demo_rename() {
                var ref = $('#frmt').jstree(true),
                        sel = ref.get_selected();
                if(!sel.length) {
                     alert('กรุณาเลือก   Node ที่ต้องการ แก้ไขข้อมูล');
                     return false;
                }
                sel = sel[0];
                ref.edit(sel);
        }
        
        function demo_delete() {

            var ref = $('#frmt').jstree(true),

            sel = ref.get_selected();
    
            if(!sel.length) {

                  alert('กรุณาเลือก  Node ที่ต้องการ ลบข้อมูล');
                  return false;
                
            }else{

                if(confirm("คุณต้องการลบข้อมูลใช่หรือไม่")){
                    if(sel == 1){
                        
                        alert('ไม่สามารถ ลบ  Root Node ได้');
                        
                        return false;
                        
                    }else{
                        ref.delete_node(sel);
                    }
                }
            }
        }
        

	$('#frmt').jstree({
         'core' : {
               'data' : {
                'url' : 'crud_response.php?operation=get_node',
                 "dataType" : "json"
               }
               ,'check_callback' : true,
         }
	}).on('create_node.jstree', function (e, data) {
		
          $.get('crud_response.php?operation=create_node', { 'id' : data.node.id, 'parent' : data.node.parent, 'text' : data.node.text })
            .done(function (d) {
               data.instance.set_id(data.node,d);
            })
            .fail(function () {
				
              data.instance.refresh();
			   console.log(data);
            });
			
    }).on('rename_node.jstree', function (e, data) {
            
        $.get('crud_response.php?operation=rename_node', { 'id' : data.node.id, 'text' : data.text })
            .fail(function () {
                
              data.instance.refresh();
        });
            
    }).on('delete_node.jstree', function (e, data) {


	    $.get('crud_response.php?operation=delete_node', { 'id' : data.node.id})
		
            .fail(function () {
                
              data.instance.refresh();
        });
		
    });
	
	</script>
</body>
</html>

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

SourceCode Demo

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

 

 

 

 


Deprecated: Function create_function() is deprecated in /home/service1/domains/monkeywebstudio.com/public_html/wp-content/plugins/simple-lightbox/controller.php on line 1642