The Tree Table UI is rich user interface using Tree and Table control. This control is used for debugger interface to watch variables.
Table UI is used to show record data to the web user. It is often used with Tree UI. And on the Wysiwyg Html Content Editor, you can use table tag and edit it.
The default version does not support the Table Tag manipulation, but the editor in this site is added.
The Tree Table programming example is available. This UI is also used in the CMS application's code debugger.
When you handle a lot of data using table interface and it is not proper to show all of the records in the table, the UI is effective. You can also use server side program supporting tree structured data using relational database.
In order to run the Tree Table demo, create the Example project. This project includes this demo. After create the project and run it, access the top page. And then, select the "Tree Table" link.
Then the demo page appears like below.
In this demo, it shows dom variables. There are 2 type of dom variables, normal values and array variables. Each type of the variable has icon to show the type.
And you can open and close the tree structure of the variables.
By pushing "Reload" button, it reloads the data with ajax and update dom element in the Tree Table UI. It does not reload the page on the web browser.
The location of the source code is in the "ALINOUS_HOME/samples/tree-table/" folder.
The main html is the "index.html". The code is below.
The source code of the "TreeTableWrapper" module is below.
The "TreeTableWrapper.loadTable()" function loads the json data from the url, on this case it is "/samples/tree-table/treedata.alns".
This function is available to reload the data to refresh data in the Tree Table UI. In the function, it once destroy the Table Tree UI and create it.
The "TreeTableWrapper.clearTree()" function clear and destroy the Tree Table UI after removing all data element.
Following code is in the "TreeTableWrapper.loadTable()" function.
This code register following callback functions to save state into the cookie.
Therefore if you close the web browser and access again, the state of the tree node is remembered.