PHP - Create Treeview using jsTree Example

PHP , jquery

Nicesnippets

129

30-06-2020


Hello Friends,

Today, I am going to learn you create treeview with js tree plugin in php. We will create folder structure using jsTree plugin and php. I will show you folder treeview structure using php and jsTree plugin.

jsTree is a jQuery plugin that creates a hierarchical data structure using JSON data. jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

I will give you full example for create treeview with jstree plugin and php So Let's see the bellow step by step.

Step 1 : Create Table

In this step, We have to need table for create folder record here i am create folder table.

CREATE TABLE `folders` (

`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

`name` varchar(255) NOT NULL,

`sub_folder_id` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Successfully table create thenafter insert some records in the folder table so lets insert some record into the new_blog database in folder table.

Step 2 : Database Configuration

In this step, I am going setup database configuration for create config.php file and setup database configuration.

<?php

$host = "localhost"; /* Host name */

$user = "root"; /* Username */

$password = ""; /* Password */

$dbname = "new_blog"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection

if (!$con) {

die("Connection failed: " . mysqli_connect_error());

}

Step 3 : Download & Include

You have to need download js tree plugin and use for cdn in this example i am using cdn for jstree plugin.

Download JsTree Plugin from 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 for jstree plugin.

<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>

Step 4 : Create PHP File

In this step You have to need php file for use jstree plugin.So Let's create php file and put the bellow code.

<?php

include "config.php";

?>

<!DOCTYPE html>

<html>

<head>

<title>PHP - Create Treeview using jsTree Example - NiceSnippets.com</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)){

$subFolder = $row['sub_folder_id'];

if($subFolder == '0') $subFolder = "#";

$selected = false;$opened = false;

if($row['id'] == 2){

$selected = true;$opened = true;

}

$folders_arr[] = array(

"id" => $row['id'],

"parent" => $subFolder,

"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>

<script type="text/javascript">

$(document).ready(function(){

var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

$('#folder_jstree').jstree({ 'core' : {

'data' : folder_jsondata,

'multiple': false

} });

});

</script>

</body>

</html>

JQuery Code

$(document).ready(function(){

var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

$('#folder_jstree').jstree({ 'core' : {

'data' : folder_jsondata,

'multiple': false

} });

});

It will help you...


Recommended Posts