CodeCap
TRENDING
  • Home
  • PHP
  • PYTHON
  • ANDROID
  • JAVA
  • WORDPRESS
  • ARTICLES
  • TUTORIAL
No Result
View All Result
  • Home
  • PHP
  • PYTHON
  • ANDROID
  • JAVA
  • WORDPRESSNew
  • ARTICLES
  • TUTORIAL
SUBSCRIBE
  • Home
  • PHP
  • PYTHON
  • ANDROID
  • JAVA
  • WORDPRESSNew
  • ARTICLES
  • TUTORIAL
No Result
View All Result
CodeCap
No Result
View All Result
Home PHP Programming

Create Dynamic Treeview Example using JQuery Ajax in PHP MySQL

Create Dynamic Treeview Example using JQuery Ajax in PHP MySQL

by asdevil666
May 6, 2021
in PHP Programming
0
How to generate UUID in Laravel?
38
SHARES
237
VIEWS
Share on FacebookShare on Twitter





Hi,

If you are looking for tutorial on how to create dynamic treeview for menu or category using php mysql, then you are a right place. In this example we will build step by step dynamic tree view from database in php.

If you want to create treeview in your website application then you should use Bootstrap Treeview plugin for display menu in hierarchical treeview structures with php. in this example we will create ‘item’ table with ‘id’, ‘name’ and ‘parent_id’. Then we just create index.php file with write jquery ajax code for dynamic treeview. Then after we will create ajax file and write database logic there.

So, just follow few step and you will able to see bellow screen.

Preview:

Step 1: Create item table

In first step, we create new new table “item” in database. You can use following SQL Query for create “item” table. So let’s create using bellow sql query:

item table:

CREATE TABLE IF NOT EXISTS `item` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) NOT NULL,

`parent_id` int(11) NOT NULL DEFAULT '0',

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2

Step 2: Create index.php File

In this step, we will use Bootstrap Treeview plugin for display menu in hierarchical treeview structures with php and write ajax code:

index.php

<!DOCTYPE html>

<html>

<head>

<title>Create Dynamic Treeview Example with PHP MySQL</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />

<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

</head>

<body>

<div class="container">

<div class="panel panel-default">

<div class="panel-heading">

<h1>Create Dynamic Treeview Example with PHP MySQL - ItSolutionStuff.com</h1>

</div>

<div class="panel-body">

<div class="col-md-8" id="treeview_json">

</div>

</div>

</div>

</div>

<script type="text/javascript">

$(document).ready(function(){

var treeData;

$.ajax({

type: "GET",

url: "/ajaxpro.php",

dataType: "json",

success: function(response)

{

initTree(response)

}

});

function initTree(treeData) {

$('#treeview_json').treeview({data: treeData});

}

});

</script>

</body>

</html>

Read Also: Laravel – Category Treeview Hierarchical Structure Example with Demo

Step 3: Create ajaxpro.php and db_config.php File

In this step, we will create ajaxpro.php and write code for fetch data from mysql database. So, we will write code for database logic. Also we will create database configuration file:

db_config.php

<?php

$hostName = "localhost";

$username = "root";

$password = "root";

$dbname = "test";

$mysqli = new mysqli($hostName, $username, $password, $dbname);

?>

ajaxpro.php

Read Also: PHP Codeigniter 3 – Create Dynamic Tree View using Bootstrap Treeview JS

<?php

require 'db_config.php';

$parentKey = '0';

$sql = "SELECT * FROM item";

$result = $mysqli->query($sql);

if(mysqli_num_rows($result) > 0)

{

$data = membersTree($parentKey);

}else{

$data=["id"=>"0","name"=>"No Members present in list","text"=>"No Members is present in list","nodes"=>[]];

}

function membersTree($parentKey)

{

require 'db_config.php';

$sql = 'SELECT id, name from item WHERE parent_id="'.$parentKey.'"';

$result = $mysqli->query($sql);

while($value = mysqli_fetch_assoc($result)){

$id = $value['id'];

$row1[$id]['id'] = $value['id'];

$row1[$id]['name'] = $value['name'];

$row1[$id]['text'] = $value['name'];

$row1[$id]['nodes'] = array_values(membersTree($value['id']));

}

return $row1;

}

echo json_encode(array_values($data));

?>

Now you are ready to run this example.

I hope it can help you…

Post Views: 889
Share15Tweet10Share4

Related Posts

How to generate UUID in Laravel?
PHP Programming

How can i print php variable in jquery?

May 6, 2021
How to generate UUID in Laravel?
PHP Programming

How to create database seeder in Laravel 5.7?

May 6, 2021
How to generate UUID in Laravel?
PHP Programming

Laravel Many to Many Polymorphic Relationship Tutorial

May 6, 2021
How to generate UUID in Laravel?
PHP Programming

How to get filename from file path in MySQL?

May 6, 2021
How to generate UUID in Laravel?
PHP Programming

How to create scroll to top of the page by jquery animate ?

May 6, 2021
How to generate UUID in Laravel?
PHP Programming

Laravel – Category Treeview Hierarchical Structure Example with Demo

May 6, 2021
Next Post
How to generate UUID in Laravel?

How to create scroll to top of the page by jquery animate ?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

I agree to the Terms & Conditions and Privacy Policy.

Search

No Result
View All Result

Categories

  • Android Programming
  • Android Tutorial
  • Articles
  • Business Traveller
  • Destinations
  • Extreme Work
  • General News
  • Insider Guides
  • JAVA Programming
  • JAVA Tutorial
  • PHP Error Resolve
  • PHP Programming
  • PYTHON Programming
  • PYTHON Tutorial
  • Tutorial
  • Wordpress

Tags

alert alertbox android android error application array auto autocomplete autocomplete off coding confirm box development error features form form alert function function call inspiration in_array java java error java pages javascript mobile app myql mysqli error news off php php error programming python python programming shortcode software standard
Facebook Twitter LinkedIn Youtube RSS

About Us

Codecap is the best programming for the new generation for learning and development

  • 121 King Street, Melbourne
    VIC 3000, Australia
  • codecap666@gmail.com
  • 888-123-4567

Categories

  • Android Programming
  • Android Tutorial
  • Articles
  • Business Traveller
  • Destinations
  • Extreme Work
  • General News
  • Insider Guides
  • JAVA Programming
  • JAVA Tutorial
  • PHP Error Resolve
  • PHP Programming
  • PYTHON Programming
  • PYTHON Tutorial
  • Tutorial
  • Wordpress
VIDEO: Is There Enough Programming Variability For Week 1 of the 2022 CrossFit Semifinals? – Morning Chalk Up
Tutorial

VIDEO: Is There Enough Programming Variability For Week 1 of the 2022 CrossFit Semifinals? – Morning Chalk Up

by asdevil666
May 21, 2022
0

The stage is set for week 1 of Semifinals now that we see the complete picture of programming and the...

Read more
Football: Ohio State announces times, programming updates for three games – OSU – The Lantern

Football: Ohio State announces times, programming updates for three games – OSU – The Lantern

May 21, 2022
Fox, Tubi Unveil Three New Animated Films, 2022-23 Programming Slate – Cartoon Brew

Fox, Tubi Unveil Three New Animated Films, 2022-23 Programming Slate – Cartoon Brew

May 21, 2022
TelevisaUnivision Reveals Upcoming Programming: Sofia Vergara Animated Series, Selena Quintanilla Tribute Concert, More — Upfronts – Deadline

TelevisaUnivision Reveals Upcoming Programming: Sofia Vergara Animated Series, Selena Quintanilla Tribute Concert, More — Upfronts – Deadline

May 21, 2022
Baltimore City Schools Hosts Event For Summer Programming At Maryland Science Center – CBS Baltimore

Baltimore City Schools Hosts Event For Summer Programming At Maryland Science Center – CBS Baltimore

May 21, 2022

Creation by : AMTICY

No Result
View All Result
  • Home
  • PHP
  • PYTHON
  • ANDROID
  • JAVA
  • WORDPRESS
  • ARTICLES
  • TUTORIAL

Creation by : AMTICY

Ads Blocker Image Powered by Code Help Pro
Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Refresh