Usage of Tree User Interface

The Tree User Interface is very effective when you build a web application with a lot of functions. In this page, I introduce some usage in the Alinous Document CMS.

What is useful Tree UI

In order to make useful the Tree UI, it have to satisfy following conditions.

  1. The Tree UI can load data dynamically to handle big data
  2. The Tree UI supports drag and drop
  3. The Tree UI can save the state whether the node is closed or opened
  4. The Tree UI can mark the current position
  5. After doing operation to manipulate node element, additional operations can be implemented easily.

This Tree UI library satisfy all of those conditions.

Document Tree

The Tree UI is used in the document tree of the Content Management System.

Tree UI on the Content Management System

It shows the whole website structure, and remember the statsus of the tree. In addition to that, this Tree UI scrolls when a lot of nodes are expanded. Then the UI remember the scrolled position, and adjust the position on loading the page.

When a document is moved or deleted, the CMS program has to change other data in the database. but the callback function prepared by the Tree UI library made the implementation easy.

Keyword Tags

The Tree UI is used in the Keyword Tags Management page of the Content Management System.

Keyword Tag Tree UI

By making with this Tree UI, you can manage the Keyword Tags easily.


Go to Top