Author: | YohoZhu |
---|---|
Views Total: | 8,915 views |
Official Page: | Go to website |
Last Update: | April 25, 2018 |
License: | MIT |
Preview:

Description:
treeCreater.js is a really simple JavaScript library to dynamically render a list based hierarchical tree structure from an array of data objects.
How to use it:
Import the JavaScript treeCreater.js
and stylesheet treeCreater.css
into the document.
<link rel="stylesheet" href="treeCreater.css"> <script src="treeCreater.js"></script>
Create an empty html unordered list for the generated tree.
<ul class="treeRoot"></ul>
Define your own data to be presented in the tree.
var quotaTree = [ { title: 'quotaParent1', children: [ { title: 'quotaSubParent1', children: [] }, { title: 'quotaSubParent2', children: [ { title: 'quotaChild1' }, { title: 'quotaChild2' } ] } ] }, { title: 'quotaParent1', children: [ { title: 'quotaSubParent1', children: [ { title: 'quotaChild1' } ] }, { title: 'quotaSubParent2', children: [ { title: 'quotaChild1' }, { title: 'quotaChild2' } ] } ] } ]
Render the tree and done.
treeCreater(quotaTree, 'treeRoot')