A couple of days ago I had to model a hierarchical tree of organizational units (OU) and wanted to give the users a visual presentation. I have found this JQuery library which is quite easy to use and to integrate into appgini:
https://github.com/dabeng/OrgChart
This is the result right within my "nodes" table view:
There are many demos and code samples of how to use the library:
The simplest way is to build a list of items with nested lists in HTML as shown in the sample code below:
1. Add the script
Code: Select all
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
2. Add a container
Code: Select all
<div id="chart-container"></div>
You can use AppGini's sql() function in PHP to retrieve the required data from your database. It can be a node structure (parent/child) or any other related records. Use PHP to generate an unordered list <ul> with list items <li>. For branches you will have to place another <ul> within an existing <li></li>.
This is sample data from one of their demo pages:
Code: Select all
<ul id="ul-data">
<li>Lao Lao
<ul>
<li>Bo Miao</li>
<li>Su Miao
<ul>
<li>Tie Hua</li>
<li>Hei Hei
<ul>
<li>Pang Pang</li>
<li>Xiang Xiang</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Let the library render the chart based on your data.
Code: Select all
<script type="text/javascript">
$(function() {
$('#chart-container').orgchart({
'data' : $('#ul-data')
});
});
</script>
(The screen-recording is too large for uploading here. Sorry for inconveniance!)
https://www.bizzworxx.de/2018-12-24_08-11-35/
Best regards,
Jan
PS: The library supports drag & drop of nodes. On a drop-event you can POST the id of the dragged-node and the id of the drop-target-node to the server using AJAX and update your database.
PPS: I wish you a peaceful time and a happy new year.
Best wishes to all of you from Kiel/Northern Germany!