Front-end interactive treeview - JS Filer package blog

Introduction

Hierarchical data can be usually presented with tree view to make it more understandable for humans.

Using HTML and CSS tree views allow you to build simple indented structures of data. But the things become more complicated when you want to make the tree be loaded dynamically depending on data stored on the server side.

It requires coordinated implementation of the front-end components and synchronization with the back-end data eventually stored on a database.

Basics

Styled HTML nested lists are a typical implementation for static tree structures. Combining UL and LI tags we can build trees of arbitrary depth. Adding more CSS and some JS allows to make the tree nodes close and open, i.e. clicking the parent node either hides or shows its sub-tree.

Other operations can be implemented to modify the tree like adding, editing, deleting nodes. Those operations can be implemented using button elements that trigger the respective actions when they are clicked: identify the active (selected) node, make the respective view changes in front-end and perform data changes in back-end.

See Tree of Objects demo about the basic implementation (the data source is simulated).

jsTree

jsTree is a jQuery plugin to display and manipulate the trees interactively. It provides basic functionality via jQuery event system and supports HTML or JSON data sources loaded via AJAX requests. The built-in mobile theme for responsive design and the node types of different levels are easy customizable.

The keyboard navigation and right-click menu commands make the tree handling easy. The multi-tree support, fuzzy searching and drag and drop operations are really useful features. All this is absolutely free and open source.

jsTree is well-documented. The demo allows to try basic features with the source code included. The API reference contains detailed description of the methods and properties. The core functionality can be extended enabling different inner plugins (saving state, sorting,...).

jsFiler

Although jsTree supplies a good functionality and is customizable, some effort is required in order to integrate it into actual applications. jsFiler stands between jsTree and user application making the integration less painful. It is a jQuery plugin built on top of the jsTree.

jsFiler allows to extend the basic command set, define different command menus and tree behaviour options. The tree manipulation (add, delete, rename, copy and move the nodes) is made more secure: name validation, permissions to delete or replace nodes, etc.. The user configuration is given during the tree activation and can be modified later. The operations can be controlled and verified via callbacks to the user script.

The usage was made as simple as possible: supply the assets (libraries), configure and activate  the tree (read more). A lot of work can be done with a single line of code, for example: $('#treeId').jsfiler({mainMenu: '.menu'}); See jsFiler Plugin Demo with the standard icon and right-click menus (the data source is simulated).

Application

Tree views are used to present XML documents, staff details, inventory lists etc. The access is often made dependent on the user rights and divided between the departments. Files management is another typical tree application. The folders need to expand and collapse allowing the users to navigate directories. The commands must allow to manipulate inside the folders and between them.

The Remote File Manager (Filer) uses jsFiler to extend the command set for the company units and users management, files sharing between the units and users and uploading or downloading.

The administration interface is included for the maintenance. The back-end takes care of the file system and updates the database. The client-server communication is made secure by using user authentication and operations authorization.

The result is a handy tool - Filer - for the companies that prefer to manage their confidential files in the Intranet.

Conclusion

Tree view are useful wherever there is a data hierarchy. The jsFiler and jsTree jQuery plugins allow to develop complex tree applications taking the responsibility for the front-end activities and back-end communication. That reduces significantly the development costs and results with powerful user-friendly solutions.