Php Mysql Json downline tree view
Budget: $10 – $30 USD
i have two table, not just accounts info, i need also products info to show
and i need select which accounts_id to start, not just starting from the top id
i have the sample script, you can modify or use your own clean code to create for me
attached sample script and print screen here my sample work
////////////////////////////////////////////////////////////////////
index.php
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/style.min.css" />
<link rel="stylesheet" href="dist/split-pane.css" />
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="dist/jstree.min.js"></script>
<script src="dist/split-pane.min.js"></script>
<title>Php and MySQL</title>
<style>
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#left-component {
right: 20%;
margin-right: 5px;
}
#my-divider {
right: 20%;
width: 5px;
}
#right-component {
width: 80%;
}
.pretty-split-pane-frame {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 5px;
background: silver;
}
.pretty-split-pane-frame .split-pane > .split-pane-divider.dragged.touch {
background: blue;
opacity: 0.25;
}
.pretty-split-pane-component-inner {
box-sizing: border-box;
border: 1px solid gray;
background: white;
width: 100%;
height: 100%;
padding: 1em 1em;
overflow: auto;
}
.fixed {
position: fixed;
background: #fff;
z-index: 10;
width: 100%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="table-responsive fixed">
<table class="table table-striped table-bordered">
<tr>
<td class="pretty-split-pane-component-inner" id="right-container" style="width:500px;"><p style="width:250px;">click node href attribute content</p></td>
</tr>
</table>
</div>
</div>
</div>
<div class="row" style="margin-top:100px;">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<td id="tree-container" style="width:100%;"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('div.split-pane').splitPane();
$('#tree-container').jstree({
'plugins': ["wholerow", "types", "search"],
'core' : {
'data' : {
"url" : "response.php",
"dataType" : "json"
}
}
})
.on('changed.jstree', function (e, data) {
var href = data.node.a_attr.href;
if(href == '#')
return '';
var href_text = data.node.a_attr.h_text;
$('#right-container').html(href_text);
});
$( "#searchText" ).keyup(function() {
var customers_username = $(this).val();
search(customers_username)
});
function search(customers_username){
$('#tree-container').jstree(true).search(customers_username);
}
});
</script>
////////////////////////////////////////////////////////////////////
response.php
-----------------------
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "store_db";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$sql = "SELECT * FROM accounts";
$res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $row = mysqli_fetch_assoc($res) ) {
$data[] = $row;
}
$itemsByReference = array();
foreach($data as $key => &$item) {
$itemsByReference[$item['accounts_id']] = &$item;
$itemsByReference[$item['accounts_id']]['children'] = array();
$itemsByReference[$item['accounts_id']]['a_attr'] = new StdClass();
}
foreach($data as $key => &$item){
if($item['accounts_parent_id'] && isset($itemsByReference[$item['accounts_parent_id']])) {
$itemsByReference [$item['accounts_parent_id']]['children'][] = &$item;
}
}
foreach($data as $key => &$item) {
if(empty($item['children']) || !empty($item['children'])) {
$item['a_attr']->href = &$item['accounts_title'];
$text_h = &$item['accounts_name'];
$text_id = &$item['accounts_id'];
$item['a_attr']->h_text = 'Username : '.$text_h.' ID (#'.$text_id.') details click here -> <a href="https://yahoo.com/" target="_blank">'.$text_h.'</a>';
}
if($item['accounts_parent_id'] && isset($itemsByReference[$item['accounts_parent_id']])) {
unset($data[$key]);
}
}
echo json_encode($data);
?>
////////////////////////////////////////////////////////////////////
and i need select which accounts_id to start, not just starting from the top id
i have the sample script, you can modify or use your own clean code to create for me
attached sample script and print screen here my sample work
////////////////////////////////////////////////////////////////////
index.php
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/style.min.css" />
<link rel="stylesheet" href="dist/split-pane.css" />
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="dist/jstree.min.js"></script>
<script src="dist/split-pane.min.js"></script>
<title>Php and MySQL</title>
<style>
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#left-component {
right: 20%;
margin-right: 5px;
}
#my-divider {
right: 20%;
width: 5px;
}
#right-component {
width: 80%;
}
.pretty-split-pane-frame {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 5px;
background: silver;
}
.pretty-split-pane-frame .split-pane > .split-pane-divider.dragged.touch {
background: blue;
opacity: 0.25;
}
.pretty-split-pane-component-inner {
box-sizing: border-box;
border: 1px solid gray;
background: white;
width: 100%;
height: 100%;
padding: 1em 1em;
overflow: auto;
}
.fixed {
position: fixed;
background: #fff;
z-index: 10;
width: 100%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="table-responsive fixed">
<table class="table table-striped table-bordered">
<tr>
<td class="pretty-split-pane-component-inner" id="right-container" style="width:500px;"><p style="width:250px;">click node href attribute content</p></td>
</tr>
</table>
</div>
</div>
</div>
<div class="row" style="margin-top:100px;">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<td id="tree-container" style="width:100%;"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('div.split-pane').splitPane();
$('#tree-container').jstree({
'plugins': ["wholerow", "types", "search"],
'core' : {
'data' : {
"url" : "response.php",
"dataType" : "json"
}
}
})
.on('changed.jstree', function (e, data) {
var href = data.node.a_attr.href;
if(href == '#')
return '';
var href_text = data.node.a_attr.h_text;
$('#right-container').html(href_text);
});
$( "#searchText" ).keyup(function() {
var customers_username = $(this).val();
search(customers_username)
});
function search(customers_username){
$('#tree-container').jstree(true).search(customers_username);
}
});
</script>
////////////////////////////////////////////////////////////////////
response.php
-----------------------
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "store_db";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$sql = "SELECT * FROM accounts";
$res = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $row = mysqli_fetch_assoc($res) ) {
$data[] = $row;
}
$itemsByReference = array();
foreach($data as $key => &$item) {
$itemsByReference[$item['accounts_id']] = &$item;
$itemsByReference[$item['accounts_id']]['children'] = array();
$itemsByReference[$item['accounts_id']]['a_attr'] = new StdClass();
}
foreach($data as $key => &$item){
if($item['accounts_parent_id'] && isset($itemsByReference[$item['accounts_parent_id']])) {
$itemsByReference [$item['accounts_parent_id']]['children'][] = &$item;
}
}
foreach($data as $key => &$item) {
if(empty($item['children']) || !empty($item['children'])) {
$item['a_attr']->href = &$item['accounts_title'];
$text_h = &$item['accounts_name'];
$text_id = &$item['accounts_id'];
$item['a_attr']->h_text = 'Username : '.$text_h.' ID (#'.$text_id.') details click here -> <a href="https://yahoo.com/" target="_blank">'.$text_h.'</a>';
}
if($item['accounts_parent_id'] && isset($itemsByReference[$item['accounts_parent_id']])) {
unset($data[$key]);
}
}
echo json_encode($data);
?>
////////////////////////////////////////////////////////////////////