jsTree is Jquery plugin, that provides interactive trees. It is absolutely free, open source

In this tutorial, we will integrate JsTree with Codeigniter to build dynamic hierarchy-tree.

if you don't hear about jstree you can read full documentation and show more examples from here

Before I start, you should know that you can use this way in any framework or pure PHP, it is some different but the way to do it is one.

1- Create table schema

I suggest that you have table like this to make hierarchy database, this structure sometimes called (adjacency list model)

CREATE TABLE IF NOT EXISTS categories ( id INT(10) NOT NULL AUTO_INCREMENT, parent_id INT(10) DEFAULT NULL, name VARCHAR(50) DEFAULT NULL, PRIMARY KEY (id) ); INSERT INTO categories (id, parent_id, name) VALUES (1, NULL, 'Electronics'), (2, 1, 'Cameras and Photography'), (3, 1, 'Computers and Tablets'), (4, 1, 'Cell Phones and Accessories'), (5, 1, 'TV and Audio'), (6, 2, 'Digital Cameras'), (7, 2, 'Camcorders'), (8, 2, 'Accessories'), (9, 3, 'Laptops'), (10, 3, 'Desktops'), (11, 3, 'Netbooks'), (12, 3, 'Tablets'), (13, 4, 'Cell Phones'), (14, 4, 'Smartphones'), (15, 4, 'Accessories'), (16, 5, 'Televisions'), (17, 5, 'Home Audio'), (18, 5, 'Speakers and Subwoofers'), (19, 16, 'CRT'), (20, 16, 'LCD'), (21, 16, 'LED'), (22, 16, 'Plasma'), (23, 12, 'Android'), (24, 12, 'iPad');

2- Create tree controller and add show_tree method

this method to show the tree nodes

function show_tree() { $this->form_validation->set_error_delimiters("", ""); $this->form_validation->set_rules('node', 'node ', 'trim|required'); //$this->load->view('messaging'); if($this->form_validation->run()== false){ $this->load->view('show_tree'); }else{ redirect('tree/show_tree/'); } }

3- create tree model and add tree_all method

this method to retrieve tree nodes from the table

function tree_al() { $result = $this->db->query("SELECT id, name,name as text, parent_id FROM categories ")->result_array(); foreach ($result as $row) { $data[] = $row; } return $data; }

4- Create another method in jstree controller

this method to output data as JSON nodes

function getChildren() { $result = $this->tree->tree_all(); $itemsByReference = array(); // Build array of item references: foreach($result 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($result 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($result as $key => &$item) { if($item['parent_id'] && isset($itemsByReference[$item['parent_id']])) unset($result[$key]); } foreach ($result as $row) { $data[] = $row; } // Encode: echo json_encode($data); }

5- Create view file to show the tree

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> <link rel="stylesheet" href="base_url() ?>global/site/dist/style.min.css" /> <script src="base_url() ?>global/site/dist/jstree.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //setting to hidden field //fill data to tree with AJAX call $('#tree-container').on('changed.jstree', function (e, data) { var i, j, r = []; // var state = false; for(i = 0, j = data.selected.length; i < j; i++) { r.push(data.instance.get_node(data.selected[i]).id); } $('#txttuser').val(r.join(',')); }).jstree({ 'plugins': ["wholerow","checkbox"], 'core' : { "multiple" : true, 'data' : { "url" : "base_url() ?>tree/getChildren", "dataType" : "json" // needed only if you do not supply JSON headers } }, 'checkbox': { three_state: false, cascade: 'up' }, 'plugins': ["checkbox"] } ) }); </script> <div class="row"> <div class="container"> <input type="hidden" name="node" id="node" value="" /> <div class="form-group"> <div id="tree-container"></div> </div> </div> </div>