how to add new nod in dynamic treeview using javascipt

Solutions on MaxInterview for how to add new nod in dynamic treeview using javascipt by the best coders in the world

showing results for - "how to add new nod in dynamic treeview using javascipt"
Niklas
31 Apr 2018
1var expandedNodes = [];
2var tree = [];
3
4$(function()
5{
6    $.post("http://localhost:8000/getLevel1", function( data ) 
7    {
8        var JSObject = JSON.parse(data);
9
10        for (j in JSObject)
11            tree.push(JSObject[j]);
12
13        createTree();
14    });
15});
16
17function createTree(){
18
19    var options = {
20        bootstrap2: false, 
21        showTags: true,
22        levels: 0,
23        data: tree,
24        expandIcon: 'fa fa-chevron-right',
25        collapseIcon: 'fa fa-chevron-down',
26        onNodeExpanded: nodeExpand,
27        onNodeCollapsed: nodeCollapse,
28        onNodeSelected: nodeSelect,
29        onNodeUnselected: nodeUnselect
30    }
31    $('#treeview').treeview(options);
32    for (node in expandedNodes)
33        $('#treeview').treeview('expandNode', [ expandedNodes[node], { levels: 0, silent: true } ]);
34    $('#treeview').treeview('expandNode', 0, { silent: true } );
35};
36
37
38function nodeExpand(event, data)
39{
40    expandedNodes.push(data.nodeId);
41    var requestObject = []
42    requestObject.push(data.text);
43
44    var parent, dummy = data;
45    while ((parent = $('#treeview').treeview('getParent', dummy.nodeId))["nodeId"] != undefined)
46        {
47        requestObject.push(parent.text);
48        dummy = parent;
49    }
50
51    $.post("http://localhost:8000/getNode?param=" + JSON.stringify(requestObject), function(retVal) 
52    {
53        var JSObject = JSON.parse(retVal);
54        var node = findNode(requestObject);
55        node.nodes = JSObject;
56        createTree();
57    });
58}
59
60function nodeCollapse(event, data)
61{
62    var index = expandedNodes.indexOf(data.nodeId);
63    if (index > -1) 
64        expandedNodes.splice(index, 1);
65}
66
67function nodeSelect(event, data)
68{
69    if (data.state.expanded == true)
70        $('#treeview').treeview('collapseNode', data.nodeId);
71    else
72        $('#treeview').treeview('expandNode', data.nodeId);
73    //$('#treeview').treeview('unselectNode', [ data.nodeId, { silent: true } ]);
74}
75
76function nodeUnselect(event, data)
77{
78}
79
80function findNode(array)
81{
82    var searchIn = tree; //array
83    var lastFound = tree;
84    for (var i = array.length - 1; i >= 0; i--)
85        {
86        var obj = searchInObject(searchIn, array[i]);
87        searchIn = obj.nodes;
88        lastFound = obj;
89    }
90
91    return lastFound;
92}
93
94function searchInObject(objectArray, string)
95{
96    for (var index in objectArray)
97        if (objectArray[index].text == string)
98            return objectArray[index];
99}
100
101$(document).ready(function () {
102    var trigger = $('.hamburger'),
103    overlay = $('.overlay'),
104    isClosed = false;
105    hamburger_cross();
106    $('#wrapper').toggleClass('toggled');
107
108    trigger.click(function () {
109        hamburger_cross();      
110    });
111
112    function hamburger_cross() {
113
114        if (isClosed == true) {          
115            overlay.hide();
116            trigger.removeClass('is-open');
117            trigger.addClass('is-closed');
118            isClosed = false;
119            $('#open_arrow').removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
120        } else {   
121            overlay.show();
122            trigger.removeClass('is-closed');
123            trigger.addClass('is-open');
124            isClosed = true;
125            $('#open_arrow').removeClass('fa-chevron-circle-right').addClass('fa-chevron-circle-left');
126        }
127    }
128
129    $('[data-toggle="offcanvas"]').click(function () {
130        $('#wrapper').toggleClass('toggled');
131
132    });  
133});
134