TreeMaker is a JavaScript library that allows you to create an HTML tree from JSON that displays a tree-like diagram from JSON or JS objects to show the structure and relationship in an organization/agency.
How to make use of it:
1. Insert the minified version of the treeMaker into the doc.
<link rel="stylesheet" href="tree_maker-min.css"> <script src="tree_maker-min.js"></script>
2. Create a container wherein the tree diagram will render from the information you provide.
<div id="myTree"></div>
3. Build a tree structure.
let tree = { 1: { 2: '', 3: { 6: '', 7: '', }, 4: '', 5: '' } };
4. Define the information to be stuffed within the tree structure.
let treeParams = { 1: {trad: 'JavaScript'}, 2: {trad: 'jQuery'}, 3: {trad: 'React'}, 4: {trad: 'Angular'}, 5: {trad: 'Vue.js'}, 6: {trad: 'ReactJS'}, 7: {trad: 'Web Code Flow'} };
5. Generate a tree diagram on the web page.
treeMaker(tree, { id: 'myTree' treeParams: treeParams });
6. Do some stuff because the visitor clicks on a node.
treeMaker(tree, { id: 'myTree' treeParams: treeParams, card_click: function (element) { console.log(element); } });
7. Customize the strains between nodes.
treeMaker(tree, { id: 'myTree' treeParams: treeParams, link_width: '4px', link_color: '#2199e8' });
Render Family/Organization Tree From JSON, treeMaker Plugin/Github
See Demo And Download
Official Website(Remi-Leclercq-Blondel): Click Here
This superior jQuery/javascript plugin is developed by Remi-Leclercq-Blondel. For extra Advanced Usages, please go to the official website.
Be First to Comment