Create Treeview with jsTree plugin and PHP

If you already managing the relationship between parent and child items using a separate field then it is easier to create a hierarchical structure.

With the use of a jsTree plugin, this will be created in less time.

jsTree is a jQuery plugin that creates a hierarchical data structure using JSON data.

It allows setting icon of a node, by default open, disable a node and set it selected while initializing, etc.

In this tutorial, I show how you can make a tree structure of MySQL data using jsTree plugin and PHP.

Create treeview with jsTree plugin and PHP


Contents

  1. Table
  2. Configuration
  3. Download & Include
  4. HTML & PHP
  5. jQuery
  6. Demo
  7. Conclusion

1. Table

I am using folders table in the example –

CREATE TABLE `folders` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL,
  `parentid` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

It has the following data –

INSERT INTO `folders` (`id`, `name`, `parentid`) VALUES
(1, 'Folder1', 0),
(2, 'Folder2', 0),
(3, 'Folder 1 sub1', 1),
(4, 'Folder 1 sub1.1', 3),
(5, 'Folder 1 sub1.2', 3),
(6, 'Folder 1 sub1.1.1', 4),
(7, 'Folder 1 sub2', 1),
(8, 'Folder 1 sub3', 1),
(9, 'Folder 1 sub3.1', 8),
(10, 'Folder 2 sub1', 2),
(11, 'Folder 2 sub1.1', 10),
(12, 'Folder 2 sub1.2', 10),
(13, 'Folder 2 sub2', 2),
(14, 'Folder 3', 0);

I stored parent id value in parentid field.


2. Configuration

Create a config.php for the database connection.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Download & Include

  • Download the jsTree plugin from the official website.
  • Include jsTree style.min.css, jQuery library, and jstree.min.js file.
<link rel="stylesheet" type="text/css" href="jstree/dist/themes/default/style.min.css">

<script src="jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="jstree/dist/jstree.min.js"></script>

Or you can use CDN –

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

4. HTML & PHP

Fetch all records from folders table and loop on it.

JSON data syntax –

{
   "id": [id], 
   "parent": [parentid], 
   "text": [text],
   "state": {
      "selected": [boolean-value],
      "opened": [boolean-value]
   }
}

NOTE – If parent id is 0 then pass ‘#’.

With PHP create an Array and encode in JSON format.

If $parentid is equals to 0 then assign ‘#’ to $parentid.

For setting a node with $id == 2 selected and opened pass true to $selected and $opened variables.

Initialize $folders_arr Array with id, parent, text, and state keys.

Create <div id='folder_jstree'> to initialize jsTree and <textarea id='txt_folderjsondata' > to store $folders_arr Array in JSON format.

Completed Code

<?php 
include "config.php";
?>

<!DOCTYPE html>
<html>
<head>
   <title>Create Treeview with jsTree plugin and PHP</title>

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>
   <?php 
   $folderData = mysqli_query($con,"SELECT * FROM folders");

   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }
      $folders_arr[] = array(
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $row['name'],
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }

   ?>

   <!-- Initialize jsTree -->
   <div id="folder_jstree"></div>

   <!-- Store folder list in JSON format -->
   <textarea id='txt_folderjsondata'><?= json_encode($folders_arr) ?></textarea>

</body>
</html>

5. jQuery

Read value from #txt_folderjsondata and convert it into a JSON object and assign in folder_jsondata.

Initialize jstree on #folder_jstree.

Pass folder_jsondata in core data option. Using multiple option disable multiple node selection by setting it to false.

Completed Code

$(document).ready(function(){
   var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

   $('#folder_jstree').jstree({ 'core' : {
      'data' : folder_jsondata,
      'multiple': false
   } });

});

6. Demo

View Demo


7. Conclusion

If parentid is equaled to 0 then assign ‘#’ to parent key.

You need to pass JSON data in a specified format otherwise it will not initialize.

If you found this tutorial helpful then don't forget to share.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.

5 thoughts on “Create Treeview with jsTree plugin and PHP”

  1. Hello my friend and thanks for this tutorial, I have question and a problem unfortunately….
    I’ve tried to decode in jSon an associative array I’ve created from a web service and for some reason the resulted jSon is not formed well as the one in this tutorial and demo.
    Why ?
    this is my PHP array produced from an HTML string:
    $new_string = explode(‘|’,$html_val->nodeValue);

    //$str = “9|Engineering”; // $re = explode(‘|’, $str); // echo $re[1];//Engineering

    $padre = $new_string[0]; //echo ‘padre: ‘.$padre.”;
    $figlio = $new_string[1]; //echo ‘figlio: ‘.$figlio.”;
    $desc = $new_string[2]; //echo ‘desc: ‘.$desc.”;
    $colore = $new_string[3]; //echo ‘colore: ‘.$colore.”;
    $lt = $new_string[4]; //echo ‘lt: ‘.$lt.”;
    $pallino = $new_string[5];
    $magazz = $new_string[6]; //echo ‘magazzino: ‘.$magazz;

    $trenino[‘parent’][] = $new_string[0];
    $trenino[‘id’][] = $new_string[1];
    $trenino[‘name’][] = $new_string[2];
    $trenino[‘colore’][] = $new_string[3];
    $trenino[‘lt’][] = $new_string[4];
    $trenino[‘pallino’][] = $new_string[5];
    $trenino[‘magazz’][] = $new_string[6]

    and this is part of my jSon produced from json_encode($trenino) :
    {“parent”:[“”],”id”:[“MY00027770096″],”name”:[“REJANE 85MM BOTTONE E CHIAVE “],”colore”:[“50FF15″],”lt”:[“0″],”pallino”:[“”],”magazz”:[“NP”]}

    Reply
  2. Wow, this jQuery tree works very well.
    I was wondering if it’s possible for me to detect the specific node I’ve (control) clicked on and obtain the associated $row[‘id’]…and perhaps save that in a php session variable. I’d like ot save the selected tree node value so that I can use that value in my code somwehere else. I can’t figure out how to do this.

    Thanks!
    Binit

    Reply

Leave a Comment