jsTree how to change ajax url and reload data

    $('#jstree_demo_div2').jstree({
        'core': {
            'data': {
                "url": "tree.ashx?id=" + _id,
                "dataType": "json" // needed only if you do not supply JSON headers
            }
        },
        "checkbox": {
            'visible': true,
            'keep_selected_style': false, 
        },
        "plugins": ["wholerow", "checkbox"]
    });

I need to change the url (or the variable _id will change) and then refresh data. But there seems to have a cache problem.

I monitored the HTTP request, the request param _id didn't change.

I've tried

'core': {
                'data': {
                    "url": "tree.ashx?id=" + _id,
                    "cache":false, //←←←←
                    "dataType": "json" // needed only if you do not supply JSON headers
                }
            },

and it didn't work.

BTW, my jsTree.js version is 3.0.8.

I am using the following code to test your use case. It's refreshing the jstree without collapsing the whole tree.

<!DOCTYPE html>

<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>
            var arrayCollection;
            $(function() {
                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": "dalmatian", "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
                    },
                    "checkbox": {
                        'visible': true,
                        'keep_selected_style': false
                    },
                    "plugins": ["wholerow", "checkbox"]
                });
            });
            function resfreshJSTree() {
                $('#jstree').jstree(true).settings.core.data = arrayCollection;
                $('#jstree').jstree(true).refresh();
            }
            function addNokia() {
                var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"};
                arrayCollection.push(nokia);
                resfreshJSTree();
            }
            function deleteDalmatian() {
                arrayCollection = arrayCollection
                        .filter(function(el) {
                            return el.id !== "dalmatian";
                        });
                resfreshJSTree();
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="addNokia()" value="Add Nokia"/>
        <input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/>
        <div id="jstree"></div>
    </body>
</html>

Note:
After opening the above page in a browser, Open all the nodes and child nodes of the jstree.
Click on Add Nokia button.
It will add Nokia Lumia node to Mobile Phones node without collapsing the tree to root node.
Similarly click on Delete Dalmaitian button.
And it will delete Dalmatian node from Dogs node and refreshes the tree to display the new structure without collapsing to root node.

来源：https://stackoverflow.com/questions/26731955/jstree-how-to-change-ajax-url-and-reload-data

标签

jstree