webix-treetable


Loading Webix Treetable with php data


I have a MySQL DB with a table that looks like the image attached
MySQL table
I want to use a webix treetable to display like the attached tree like image
Treetable
How can I achieve this? I do have some flexibility with the data as I use php to load it into the website and I can use a query to alter the format. I've tried a number of ideas but nothing seems to give the structure I need. It has be programmatic as the data is variable (not the structure) and a lot longer than this example. I use php to loop through it.
I'm currently using the jQuery TreeTable but it is way too slow.
Really appreciate any help - and an example too ;)
This is the latest try I have had that does not work. I know why, but I just can't get a solution. Is there a way to add child nodes to a parent using something like parent id's? I think you can with the 1-column Webix tree but can't see how to do it with the TreeTable ...
webix.ready(function(){
grida = webix.ui({
container:"testA",
view:"treetable",
css:"my_style",
columns:[
{ id:"id", header:"<span class='webix_icon fa-star'></span>", css:{"text-align":"right"}, width:250},
{ id:"value", header:"Structure", width:400, template:"{common.space()}{common.icon()} #value#", fillspace:1 },
{ id:"offshore", header:"Offshore", css:{"text-align":"right"}, width:200},
{ id:"ctot", header:"Total", css:{"text-align":"right"}, width:200},
],
autoheight:true,
autowidth:true,
data: [
<?php foreach ($bu_items as $bu_item): ?>
<?php
if($bu_item['s2id']==0) //open L1
{
echo "{ \"id\":\"";
echo $bu_item['s1id'];
echo "\", \"value\":\"1. ";
echo $bu_item['s1name'];
echo "\", \"offshore\":\"";
echo $bu_item['s1id'];
echo "\", \"ctot\":\"";
echo number_format(($bu_item['sCT1']+$bu_item['sCY1']+$bu_item['sCY2']+$bu_item['sCY3']+$bu_item['sCY4']+$bu_item['sCY5']+$bu_item['sCY6']+$bu_item['sCY7']+$bu_item['sCY8']) * $_SESSION['drptRate']);
echo "\"";
echo ", \"open\":true, \"data\":[";
}
?>
<?php
if($bu_item['s2id']>0 && $bu_item['sxid']==0) //open L2
{
echo "{ \"id\":\"";
echo $bu_item['s1id'];
echo ".";
echo $bu_item['s2id'];
echo "\", \"value\":\"2. ";
echo $bu_item['s2name'];
echo "\", \"offshore\":\"\", \"ctot\":\"";
echo number_format(($bu_item['sCT1']+$bu_item['sCY1']+$bu_item['sCY2']+$bu_item['sCY3']+$bu_item['sCY4']+$bu_item['sCY5']+$bu_item['sCY6']+$bu_item['sCY7']+$bu_item['sCY8']) * $_SESSION['drptRate']);
echo "\"";
echo ", \"open\":true, \"data\":[";
}
?>
<?php
if($bu_item['sxid']>0 && $bu_item['s3id']==0) //open Lx
{
echo "{ \"id\":\"";
echo $bu_item['s1id'];
echo ".";
echo $bu_item['s2id'];
echo ".";
echo $bu_item['sxid'];
echo "\", \"value\":\"3. ";
echo $bu_item['sxname'];
echo "\", \"offshore\":\"\", \"ctot\":\"";
echo number_format(($bu_item['sCT1']+$bu_item['sCY1']+$bu_item['sCY2']+$bu_item['sCY3']+$bu_item['sCY4']+$bu_item['sCY5']+$bu_item['sCY6']+$bu_item['sCY7']+$bu_item['sCY8']) * $_SESSION['drptRate']);
echo "\"";
echo ", \"open\":true, \"data\":[";
}
?>
<?php
if($bu_item['s3id']>0 && $bu_item['s4id']==0) //open L3
{
echo "{ \"id\":\"";
echo $bu_item['s1id'];
echo ".";
echo $bu_item['s2id'];
echo ".";
echo $bu_item['sxid'];
echo ".";
echo $bu_item['s3id'];
echo "\", \"value\":\"4. ";
echo $bu_item['s3name'];
echo "\", \"offshore\":\"\", \"ctot\":\"";
echo number_format(($bu_item['sCT1']+$bu_item['sCY1']+$bu_item['sCY2']+$bu_item['sCY3']+$bu_item['sCY4']+$bu_item['sCY5']+$bu_item['sCY6']+$bu_item['sCY7']+$bu_item['sCY8']) * $_SESSION['drptRate']);
echo "\"";
echo ", \"open\":true, \"data\":[";
echo "]},";
}
?>
<?php endforeach; ?>
<?php echo "]},"; ?> //close Lx data
<?php echo "]},"; ?> //close L2 data
<?php echo "]},"; ?> //close L1 data

Related Links

Loading Webix Treetable with php data

Categories

HOME
omnet++
oracle11g
homebrew
relay
razor
electronics
networkx
gitpitch
session-variables
python-unittest
windows-azure-storage
usergrid
task
ibm-odm
caml
workload-scheduler
progressive-web-apps
django-admin
oracle-coherence
nas
autoconf
bootstrap-tour
cultureinfo
blazemeter
trading
emgucv
dynamic-featured-image
status
wpfdatagrid
uninstall
social-media
fluentvalidation
quote
delicious-api
microsoft-chart-controls
exuberant-ctags
gtrendsr
framemaker
phpfreechat
cloud-code
mapdb
swift3.0.2
mixture-model
trim
heightmap
qcombobox
wptoolkit
skeleton-css-boilerplate
rails-routing
jxcore
directory-structure
media-player
pillow
sqldf
django-scheduler
gnome-shell-extensions
vmware-tools
home-directory
file-writing
gridview-sorting
r-tree
sdhc
dukescript
sframe
event-bubbling
generic-programming
sortedlist
web-controls
bridge.net
python-green
gwidgets
angularjs-ng-click
relocation
id3v2
mesa
p4java
fluentautomation
seaside
mbr
opcache
flashvars
isnullorempty
mt
transactionscope
cinema-4d
yetanotherforum
krl
oncheckedchanged
yslow
paster
gallio
user-friendly
web-architecture
anti-piracy
procedural-music
putchar

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App