Last active
March 21, 2018 14:41
-
-
Save arvindsvt/0dc7a9c6efe33fe6e1209f82659b092b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Create Dynamic Tree View Menu in PHP, here you will learn how to create treeview structure using jsTree, a popular jQuery plugin. The jsTree is feature rich jQuewry plugin that helps to create dynamic treeview menu using HTML & JSON data sources and AJAX loading. The plguin is easily extendable, configurable and fully responsive with various callback methods. | |
| In this tutorial, you will learn how to create dynamic tree view menu using jsTree, PHP and MySQL. At the end of the tutorial, you can view live demo and download example source code. | |
| https://stackoverflow.com/questions/1134342/php-dynamic-multidimensional-array-or-objects?rq=1 | |
| https://stackoverflow.com/questions/2129913/multilevel-menu-with-multilevel-array?rq=1 | |
| https://stackoverflow.com/questions/37388478/issue-with-multilevel-sub-menu-with-bootstrap-menu | |
| So let’s start the coding | |
| https://phptechnologytutorials.wordpress.com/2014/12/14/recursive-category-tree-in-php-and-mysql/ | |
| In this example we will use following file structure to create treeview menu. | |
| https://dba.stackexchange.com/questions/7147/find-highest-level-of-a-hierarchical-field-with-vs-without-ctes/7161#7161 | |
| https://mysqlserverteam.com/mysql-8-0-labs-recursive-common-table-expressions-in-mysql-ctes/ | |
| https://stackoverflow.com/questions/31140887/cte-recursive-query-for-two-tables-that-has-a-many-to-many-relationship?rq=1 | |
| index.php: This is main file to display treeview menu structure | |
| jsTree: This folder will contains all js/css and images files from jsTree plugin. | |
| tree_data.php: This PHP script used to fetch tree nodes from database and convert them into json object. | |
| Steps1:First we will create Table structure to stored tree menu items. | |
| CREATE TABLE IF NOT EXISTS `treeview` ( | |
| `id` int(11) NOT NULL, | |
| `name` varchar(200) NOT NULL, | |
| `text` varchar(200) NOT NULL, | |
| `link` varchar(200) NOT NULL, | |
| `parent_id` varchar(11) NOT NULL | |
| ) ENGINE=InnoDB DEFAULT CHARSET=latin1; | |
| Steps2:For this example, we have created index.php and included Bootstrap library files as we have handled design using Bootstrap. As we are going to use jsTree jQuery plguin to create tree view, so included JavaScript and CSS of this plugin. | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="jstree/style.min.css" /> | |
| <script src="jstree/jstree.min.js"></script> | |
| Steps3:Now we will create div container tree-data-container in index.php to keep tree view data. | |
| <div id="tree-data-container"></div> | |
| Steps4: Now we will call jsTree method on div container tree-data-container to display load tree data by making ajax request to server side PHP script tree_data.php. | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $('#tree-data-container').jstree({ | |
| 'plugins': ["wholerow", "checkbox"], | |
| 'core' : { | |
| 'data' : { | |
| "url" : "tree_data.php", | |
| "dataType" : "json" | |
| } | |
| } | |
| }) | |
| }); | |
| </script> | |
| Steps5:Finally in PHP script tree_data.php, we will get data from MySQL database table treeview and create PHP array of all items. Then encoded and return created PHP array into json using json_encode to be executed by jsTree functions ti display treeview structure. | |
| <?php | |
| include_once("db_connect.php"); | |
| $sql = "SELECT * FROM `treeview`"; | |
| $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); | |
| ?> | |
| http://www.phpzag.com/create-treeview-with-jstree-php-and-mysql/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment