Jenson Jenson - 1 year ago 119
jQuery Question

creating dynamic jstree using alternative JSON format stored in array

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.

Answer Source

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.