Tree Table Javascript UI

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.

Table support on WYSIWYG Content Editor

The Html Editor provided on the CMS and program example to customize is available. The editor is based on the NicEdit, and it is extended.

The default version does not support the Table Tag manipulation, but the editor in this site is added.

Tree Table User interface Component

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.

top page of the Javascript and server side program example

Then the demo page appears like below.

Tree Table UI demo

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.

Clear data operation

By pushing the "Clear" button on the top of the page, it clears the variables without reloading page. The Javascript program clear the dom element of the Html in the Tree Table UI.

Cleared Tree Table UI

Reload data operation

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.

Source code location

The location of the source code is in the "ALINOUS_HOME/samples/tree-table/" folder.

source code location of the Tree Table UI

Main Html

The main html is the "index.html". The code is below.

In the Javascript section of the "index.html", making Tree Table UI by the "TreeTableWrapper" module.

Javascript operating Tree Table UI

The source code of the "TreeTableWrapper" module is below.

Load, reload Tree Table data

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.

Clear Tree Table data

The "TreeTableWrapper.clearTree()" function clear and destroy the Tree Table UI after removing all data element.

Save Tree State in the Http Cookie

The Tree Table UI save the state of the nodes, whether the are opened or closed. The Javascript program saves the state of the node when the node's status change.

Following code is in the "TreeTableWrapper.loadTable()" function.

This code register following callback functions to save state into the cookie.

  • onNodeExpand
  • onNodeCollapse

Therefore if you close the web browser and access again, the state of the tree node is remembered.

Go to Top