creating dynamic jstree using alternative JSON format stored in array

Question

I am able to create jstree using alternative JSON format as below:

$('#using_json_2').jstree({ 'core' : {
'data' : [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
} });

But it is quite static. I want it to be dynamic; in the sense that, number of rows could be variable and row properties to be read from an array. I don't want to use ajax as data is already available in array.

Quick_Silver · Accepted Answer · 2014-10-10 13:08:51Z

If you want your data to be dynamic, you can use the following code to initialize your jstree:

$('#jstree').jstree({
    'core': {
        'data': arrayCollection
    }
});

where arrayCollection is a variable that contians your dynamic array. For Example your arrayCollection may look like this:

var arrayCollection = [
    {"id": "animal", "parent": "#", "text": "Animals"},
    {"id": "device", "parent": "#", "text": "Devices"},
    {"id": "dog", "parent": "animal", "text": "Dogs"},
    {"id": "lion", "parent": "animal", "text": "Lions"},
    {"id": "mobile", "parent": "device", "text": "Mobile Phones"},
    {"id": "lappy", "parent": "device", "text": "Laptops"},
    {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
    {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"},
    {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
    {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
    {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
    {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
    {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
    {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
];

Finally, your html file should look like:

<html>
    <head>
        <title>JSTree</title>
        <link rel="stylesheet" href="dist/themes/default/style.css" />
        <script src="dist/libs/jquery.js"></script>
        <script src="dist/jstree.js"></script>
        <script>
            $(function() {
                var arrayCollection = [
                    {"id": "animal", "parent": "#", "text": "Animals"},
                    {"id": "device", "parent": "#", "text": "Devices"},
                    {"id": "dog", "parent": "animal", "text": "Dogs"},
                    {"id": "lion", "parent": "animal", "text": "Lions"},
                    {"id": "mobile", "parent": "device", "text": "Mobile Phones"},
                    {"id": "lappy", "parent": "device", "text": "Laptops"},
                    {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
                    {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"},
                    {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
                    {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
                    {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
                    {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
                    {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
                    {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
                ];
                $('#jstree').jstree({
                    'core': {
                        'data': arrayCollection
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="jstree"></div>
    </body>
</html>

Whenever your arrayCollection is modified, you have to re-assign the arrayCollection to your jstree and refresh the jstree programmatically.

Thanks ! It worked fine and this is what I needed. Very well explained.

wscourge · Accepted Answer · 2018-01-15 06:32:23Z

var fullMenuList = [
        {"id": "1000", "parent": "#", "text": "PARENT"}
    ];
    $http({
        method: 'POST',
        url: 'Jtree.do',
        params: {}  // pass in data as strings 

    }).then(function (response) {
        console.log(response.data[0].Code1);
        console.log(response.data[0].Menu);
        console.log(response.data[0].Groupcode);

        for (var i = 0; i < response.data.length; i++) {
            fullMenuList.push({id: response.data[i].Code1,
                parent: response.data[i].Groupcode,
                text: response.data[i].Menu
            });


        }

    $('#jstree').jstree({
            "checkbox": {
                "keep_selected_style": false
            },
            // "plugins": ["checkbox"],
            'core': {
                'data': fullMenuList
            }
        });

    });

Collectives™ on Stack Overflow

creating dynamic jstree using alternative JSON format stored in array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related