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
ibm-bluemix
xamarin
hook
netsuite
include
at-command
yahoo-oauth
razor
analysis
leon
retrofit
baqend
uber-api
node-notifier
amazon-cloudformation
awesome-wm
export-to-csv
alignment
n-gram
gz
msp430
lombok
windows-7-x64
google-static-maps
invantive-sql
reactcsstransitiongroup
crystal-reports-2008
google-pagespeed
jasonette
format-specifiers
qhull
status
poltergeist
neo4j-spatial
replaceall
msys2
tasklet
instant-messaging
microsoft-chart-controls
hybridauth
language-concepts
fusionpbx
hot-module-replacement
gesture
event-driven
sqlite2
hue
slick-3.0
angular-resource
filepicker
python-c-api
kbuild
knpmenubundle
cudafy.net
specrun
medium.com
color-picker
httplistener
rotativa
paypal-express
autorest
prettytensor
apachebench
iad
tcpserver
t4mvc
metaclass
truevault
ceil
tld
wp-query
valuechangelistener
concurrent-collections
ember-charts
uv-mapping
spring-io
web2py-modules
ril
android-screen-support
cassini-dev
referrer
quickdialog
viewswitcher
onsubmit
osql
spyware
joyent
icanhaz.js
dbal
ctp4
eqatec
putchar
ubuntu-9.04

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App