I got a huge response from my previous article Dynamic Tree with JSTree, PHP and MySQL, Most of the readers asked about how to add, edit and delete node functionality using JsTree, PHP and MySQL.I will explain here how to add/edit dynamically nodes using jstree, php using AJAX.
In This Jstree PHP treemenu tutorial, I am creating a multi-level tree menu and adding add, edit and delete nodes using jstree context menu.
jstree context menu is a jstree plugin that is used to show the context menu on the node, I will provide add, edit and delete node option using jstree context menu on each node, based on the selected option I’ll perform add, edit and delete a node using PHP as well as update MySQL tree data.
I am using JSTree jquery plugin, You have read and understood my previous Dynamic Tree with JSTree, PHP and MySQL tutorial.
I will cover the following functionality in this PHP Treeview Tutorial
- Create Simple TreeView menu using Jstree, PHP and MySQL
- Create context menu with add,edit and delete option
- Add and edit node into tree menu
- Delete single or multiple node from tree menu
You can also check other tutorial of TreeView Menu,
- Part 1 – Dynamic Tree with JSTree, PHP and MySQL
- Part 2 – Create, Rename and Delete Node using JSTree,PHP and MySQL
- Part 3 – Advanced jstree with search and custom href attribute using php and mysql
- Tree Menu Using HTML and Jquery
- How to Create Dynamic Tree View Menu
- 10+ Most Popular jQuery Tree Menu Plugin
I am using the same database structure as previous tutorial How to Create Dynamic Tree View Menu,
The Following jsTree Plugin will use:
- state – This jstree plugin will use to save all opened and selected nodes state.
- contextmenu – This jstree plugin is used to show all configuration options like add, edit and delete on right-click nodes.
- wholerow – This plugin help to create each node appear block level which makes selection easier.
You can also check other tutorial of TreeView Menu,
- Tree Menu Using HTML and Jquery
- How to Create Dynamic Tree View Menu
- 10+ Most Popular jQuery Tree Menu Plugin
Add,Edit and Delete node using jsTree and Context Menu
We are using the below files to create a dynamic treeview using jstree jquery tree plugin, PHP and MySQL. Its very easy and simple, The project structure follows:
- dist folder: This folder will contain all js/css and images files.
- index.php: This file is used to display tree
- response.php: This file is used to fetch tree nodes from the database and convert them into JSON objects.
Step 1: Created a tree menu container in index.php
file.
<div id="tree-container"></div>
Step 2: Now, I’ll call jstree method on the div container and added the context menu plugin.
<script type="text/javascript"> $(document).ready(function(){ //fill data to tree with AJAX call $('#tree-container').jstree({ 'plugins' : ['state','contextmenu','wholerow'], 'core' : { 'data' : { "url" : "response.php", "plugins" : [ "wholerow", "checkbox" ], "dataType" : "json" // needed only if you do not supply JSON headers } } }) }); </script>
The above code will create a context menu on the right click of the Treeview node.
Step 3: Let’s add a context menu option and callback method for add, edit and delete jstree nodes.
$('#tree-container').jstree({ 'core' : { 'data' : { 'url' : 'response.php?operation=get_node', 'data' : function (node) { return { 'id' : node.id }; }, "dataType" : "json" } ,'check_callback' : true, 'themes' : { 'responsive' : false } }, 'plugins' : ['state','contextmenu','wholerow'] }).on('create_node.jstree', function (e, data) { $.get('response.php?operation=create_node', { 'id' : data.node.parent, 'position' : data.position, 'text' : data.node.text }) .done(function (d) { data.instance.set_id(data.node, d.id); }) .fail(function () { data.instance.refresh(); }); }).on('rename_node.jstree', function (e, data) { $.get('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('response.php?operation=delete_node', { 'id' : data.node.id }) .fail(function () { data.instance.refresh(); }); });
We have created a context menu and added a callback option for each operation like add a node, rename node and delete a node. Also, I have added ajax requests for each operation. We have created AJAX PHP request for each operation and saved each modification into the database using server-side response.php
file.
Step 4: I will add server side code for update nodes information into the mysql database.
if(isset($_GET['operation'])) { try { $result = null; switch($_GET['operation']) { case 'get_node': $node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0; $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]); } $result = $data; break; case 'create_node': $node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0; $nodeText = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : ''; $sql ="INSERT INTO `treeview_items` (`name`, `text`, `parent_id`) VALUES('".$nodeText."', '".$nodeText."', '".$node."')"; mysqli_query($conn, $sql); $result = array('id' => mysqli_insert_id($conn)); break; case 'rename_node': $node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0; //print_R($_GET); $nodeText = isset($_GET['text']) && $_GET['text'] !== '' ? $_GET['text'] : ''; $sql ="UPDATE `treeview_items` SET `name`='".$nodeText."',`text`='".$nodeText."' WHERE `id`= '".$node."'"; mysqli_query($conn, $sql); break; case 'delete_node': $node = isset($_GET['id']) && $_GET['id'] !== '#' ? (int)$_GET['id'] : 0; $sql ="DELETE FROM `treeview_items` WHERE `id`= '".$node."'"; mysqli_query($conn, $sql); break; default: throw new Exception('Unsupported operation: ' . $_GET['operation']); break; } header('Content-Type: application/json; charset=utf-8'); echo json_encode($result); } catch (Exception $e) { header($_SERVER["SERVER_PROTOCOL"] . ' 500 Server Error'); header('Status: 500 Server Error'); echo $e->getMessage(); } die(); }
I am adding response header content-type is JSON, That help to send a response in JSON format to the jstree.
I am getting 'operation'
parameters that notify which operation will perform on the server side based on the selected option on the context menu.
I am processing data and storing it into the database and finally sending JSON response to the UI.
Conclusion
I have added a simple version of jstree with PHP, MySQL, and Ajax. I have added add, edit and delete a node using PHP, MySQL and jQuery AJAX. I leave functionality like copy and paste option node for you.
This is a great example and works very well, thank you again Parvez 🙂
This post is awesome. Please, help me. How can I show inside a specific form when I click sub-menu with tree menu.
This post is awesome. Please help me. How can I show a specific form inside tree menu when I click sub-menu.
K, i ll share tutorial for this
I’ll be grateful to you. I tried to solve this but failed.
Your every post is very much effective. I’ll be grateful to you. I tried to solve this but failed.
what are problems.
nice example. i have added a field as link which will store the link where the sub menu will take on click . Unable to implement. I am new .Plz help
Hi Rajessh,
I got some time to solve ur problem, You need to add below changes to add href in you all node anchor tag but on-click to ridrect you need to debugging on jstree call back function.
You can add href attribute and value using below code,
//already have in you code
$itemsByReference[$item[‘id’]][‘data’] = new StdClass();
add below two lines
$itemsByReference[$item[‘id’]][‘a_attr’] = new StdClass();
$itemsByReference[$item[‘id’]][‘a_attr’]->href = ‘google.com’;
whar are problems you are facing?
https://uploads.disquscdn.com/images/6d3dbece5acaf2ff34d29fcda340d8db58a0341b6b4115ba0b795c579f7ddad0.jpg
I wanna to show like this…
you can use jstree call back function to trigger custom node click event
You can use below jstree callback fucntion,
.bind(“select_node.jstree”, function (e, data) {
var href = data.node.a_attr.href;
document.location.href = href;
//console.log(href);
})
jsTree menu link on database. And when click any sub-menu, will open specific sub-menu inside, destroy that I before click. So making this very tough for me.Please, give a demo. And also thanks for reply.
https://phpflow.com/php/advanced-treeview-menu-using-jstree-with-php-and-mysql/
You can follow this article https://phpflow.com/php/advanced-treeview-menu-using-jstree-with-php-and-mysql/.
Error when Create
TypeError: c is undefined……… js.min.js
have u tried with chrome browser?
yes working in crome. thanks
and any idea about search, i want searchbox to this code.
i am not sure but there would be a plugin to search on jstree nodes, you can find more info on jstree official website.
You can follow this article to add search functionality in jstree menu https://phpflow.com/php/advanced-treeview-menu-using-jstree-with-php-and-mysql/ .
i have created a database in which i hav also created a table using phpmyadmin, mysql, now i want to add treegrid in each of the column of my field values…… wat can i do isthere anyone to help me out……..
you can trigger on column using mysql trigger function,
https://phpflow.com/mysql/how-to-create-trigger-in-mysql/
thankyou for the reply, but still i’m getting confused….
ok, so whats ur confusion point
actually i have created a table process under which there are field Process_no and it has value M01, now the thing i want to do is to creat a sub menu M01.1 under M01 in the table only…..but i don’t know how to do it….and is it possible to do or not, coz the the table process i’m fetching it from mysql database using xampp server.
and also i shuld able to create, edit, or delete the submenu under any of the column of that particular field
First, thanks for your code.. it’s really great code..
But i found some error when click create
Chrome Console: jstree.min.js:3 -> Uncaught TypeError: Cannot read property ‘toString’ of undefined
Can u help me?
Thanks..
i thnk some jquery version error, hv u got same error on demo page as well, if not change version of jquery
Hi
Is it possible to add a node on button click instead of pressing enter after typing
yes, you need to search call back
how to search call back??
you can get method information from jstree official docs.
where is the download ?
Once you tweet this post, the download link will enable.
The tweet or facebook link is not working, Please advise.
I need to download the files.
Please send mail, i ll provide link
please, i need link for download, thanks
Npw, You can download
can i get this tree using asp.net core ,js tree,and my sql
yes, just need to convert php logic into asp.net
can get this code using asp.net core
i do not have in asp.net format, you can create
Hi, can u help me with the issue I am facing now
whats issue