Dynamic Tree with JSTree, PHP and MySQL

I got huge response from my previous article How to Create Dynamic Tree View Menu,Most of readers asking about how to use checkbox with this and drag and drop features,so In this article i am creating dynamic tree menu with check box using jstree jquery tree view plugin,php and mysql. Dynamic means all nodes of tree menu is depend upon server side processing.

I am using same database structure like previous tutorial How to Create Dynamic Tree View Menu,

Why Choose JStree:

jsTree is very popular jQuery tree plugin to create awesome multi-level menu. jsTress is free, open source jquery treeview plugin, that help to create interactive tree menu using HTML & JSON data sources and AJAX loading. jsTree is easily extendable, them-able and configurable.It has a built in mobile theme for responsive design and various callback methods.

jsTree jQuery Tree Plugin main Features are:

drag & drop support
keyboard navigation
inline edit
create and delete
tri-state checkboxes
fuzzy searching
customizable node types

You can also check other tutorial of TreeView Menu,

How To create Dynamic Tree using PHP, MySQL and jquery

So we are using below files to create dynamic treeview using jstree jquery tree plugin,php and mysql. Its very easy and simple,The project structure are follows:

dist folder : This folder will contains all js/css and images files.
index.php : This file is use to display tree menu.
response.php : This file is use to fetch tree nodes from database and convert them into json object.

Step 1: Create Table structure to stored tree menu nodes.we need to create ‘test’ database(if you have then don’t need) and created below 'treeview_items' table into this database.

CREATE TABLE IF NOT EXISTS `treeview_items` (
`id` int(11) NOT NULL,
  `name` varchar(200) NOT NULL,
  `text` varchar(200) NOT NULL,
  `parent_id` varchar(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `treeview_items` (

`id` int(11) NOT NULL,

`name` varchar(200) NOT NULL,

`text` varchar(200) NOT NULL,

`parent_id` varchar(11) NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

Step 2: Created connection with MySQL into (response.php) file.

servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

servername = "localhost";

$username = "root";

$password = "";

$dbname = "test";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

/* check connection */

if (mysqli_connect_errno()) {

printf("Connect failed: %s\n", mysqli_connect_error());

exit();

}

Step 3: Created PHP array of all tree nodes and encode into json(response.php) file.

$sql = "SELECT * FROM `treeview_items` ";
$res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
    //iterate on results row and create new index array of data
    while( $row = mysqli_fetch_assoc($res) ) { 
        $data[] = $row;
    }
    $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);

$sql = "SELECT * FROM `treeview_items` ";

$res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));

//iterate on results row and create new index array of data

while( $row = mysqli_fetch_assoc($res) ) {

$data[] = $row;

}

$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);

Step 4: Included all js/css files of jsTree into index.php file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="dist/style.min.css" />
<script src="dist/jstree.min.js"></script>

Step 5: Created tree menu container in index.php.

<div id="tree-container"></div>

1	<div id="tree-container"></div>

Step 6: Call jstree method on div container.

<script type="text/javascript">
$(document).ready(function(){ 
    //fill data to tree  with AJAX call
    $('#tree-container').jstree({
    'plugins': ["wholerow", "checkbox"],
        'core' : {
            'data' : {
                "url" : "response.php",
                "plugins" : [ "wholerow", "checkbox" ],
                "dataType" : "json" // needed only if you do not supply JSON headers
            }
        }
    }) 
});
</script>

$(document).ready(function(){

//fill data to tree with AJAX call

$('#tree-container').jstree({

'plugins': ["wholerow", "checkbox"],

'core' : {

'data' : {

"url" : "response.php",

"plugins" : [ "wholerow", "checkbox" ],

"dataType" : "json" // needed only if you do not supply JSON headers

}

})

});

</script>

You can see here, we are using "checkbox" plugin to create check-box against each node.We are passing json data to jstree method.

You can download source code and Demo from below link.

Live Demo

Why Choose JStree:

jsTree jQuery Tree Plugin main Features are:

How To create Dynamic Tree using PHP, MySQL and jquery

Sponsors