About The Project

First of all i wanna say that this readme file will be updated as soon as I can.

STS library allows you to present fast data tree structures with basic functionalities. It is easy to use and stylize.

Built With

• JavaScript
• TypeScript

Getting Started

Installation

1. Install NPM packages

    npm i simple-tree-structure@latest -g

Usage

As i said earlier STS is easy to use. If you are going to use this library in React/Angular/VueJs project you just need to import it like this in your file:

import { buildTree, getSelectedChildElements } from 'simple-tree-structure/src/simple-tree-structure';

buildTree() accepts 6 parameters:

1. treeModel - the data we are going to populate our tree with. Here is a sample of how the json model must look like:

{
   "treeModel":[
      {
         "id":1,
         "parentId":0,
         "description":"___1___ Parent",
         "children":[
            {
               "id":2,
               "parentId":1,
               "description":"___1___ Firstborn Child",
               "children":[
                  {
                     "id":3,
                     "parentId":2,
                     "description":"___1___ Firstborn Grand Child",
                     "children":[
                        {
                           "id":4,
                           "parentId":3,
                           "description":"___1___ Firstborn Grand Grand Child",
                           "children":[]
                        },
                        {
                           "id":5,
                           "parentId":3,
                           "description":"___1___ Second-born Grand Grand Child",
                           "children":[]
                        }
                     ]
                  }
               ]
            },
            {
               "id":6,
               "parentId":2,
               "description":"___1___ Second-born Child",
               "children":[]
            }
         ]
      },
      {
         "id":7,
         "parentId":0,
         "description":"___2___ Parent with one child",
         "children":[
            {
               "id":9,
               "parentId":7,
               "description":"___2___ Firstborn Child",
               "children":[]
            }
         ]
      }
   ]
}

2. rootElementId - this is the id of the html element that is going to 'hold' our STS. In other words this is where we are going to 'paint' it.

3. isDefaultView - defines whether our STS will be displayed exanded or not.

4. isParentDescBold - defines whether the description if the element that has children will be displayed as bold.

5. descriptionSpanClass - this allows you to add your own style to the span element that represents the description part in our STS element.

6. checkboxClass - this allows you to add your own style to checkbox element.

After we learned this we prepare the container for our STS. In this case the ul element with id='treeRoot' will be our container.

	<h2>Simple Tree Structure</h2>
    <ul id='treeRoot'></ul>
	

The last step is to call buildTree(treeModel, rootElementId, isDefaultView, isParentDescBold, descriptionSpanClass, checkboxClass) with your parameters.

buildTree(treeModel, 'treeRoot', true, true, someStyle, someStyle);

And finally if we want to get the selected elements in our STS we can just call

getSelectedChildElements()

OR

getEverySelectedElement()

depends on which elements we want to get. This functions return the id and description of selected elements.

STS with isDefaultView parameter set to 'true':

STS with isDefaultView parameter set to 'false':

Contact

Aleksandar Datsov - [[email protected]]

Project Link: https://github.com/AleksandarDatsov/simple-tree-structure/tree/master