cTreeTable Free Source

Project Description

The cTreeTable as the name suggest is a template-based tree table open source component.

The cTreeTable tree component is based on template rendering. The template is stored in a HTML file which must be loaded before intializing the tree. The template is used to render a list of nodes, either root nodes or child nodes for a parent node.

The template can be customized as per your needs. Use the following steps to integrate the component in your application:

  • Include the CSS and jquery plugin in the HTML page
  • Add a table element for your cTreeTable component, in the HTML page
  • Add a script element with a type of "text/template" in your HTML page
  • Load the template, in document.ready(). The easiest way to load the template is to use the $.get jquery method
  • Load the tree, in document.ready(), after successfully loading the template content

The data you want to load in the cTreeTable doesn't need to have a specific structure, except two requirements: needs to be a hierarchy; and needs to have an unique key. The key, display, and children properties are configurable.

The cTreeTable component is released under MIT license.

The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with the software. The component can be used in any project (free, open-source, or commercial) as long as the copyright header is left intact.

Try for free cTreeTable

Access cTreeTable Now


Load of Static data into the tree

The cTreeTable allows you to:

  • Load hard-coded data in the page
  • Load data from a Json file located on the server.

Load of dynamic data

Load of Dynamic data represents load on demand, having the restriction that child nodes are not loaded until the first parent node is expanded.

The cTreeTable allows you to:

  • Display the hierarchy structure stored in a database
  • Perform Google search for the caption of the expanded node and add the results as child nodes.

Icons display - capabilities - tree based

The cTreeTable allows you to:

  • Show how to display icons from jQuery UI
  • Use custom icons based on the node type.

Drag and Drop functionality

The cTreeTable allows dragging and dropping of tree elements configured and their allocation to top elements of the defined tree.

Such an example could be to choose architects, project managers, business analysts, developers, designers, and testers and allocate them to various IT projects.