Question

    $('#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"]
    });

我需要更改网址（或变量_id将更改），然后刷新数据。但似乎存在缓存问题。

我监控了HTTP请求，请求参数_id没有改变。

我已经尝试了

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

它没有用。

BTW，我的jsTree.js版本是3.0.8。

Answer 1

我使用以下代码测试您的用例。它使jstree更新而不会破坏整棵树。

<!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>

注意：

在浏览器中打开上述页面后，打开jstree的所有节点和子节点。

点击添加诺基亚按钮。

它会将诺基亚Lumia节点添加到移动电话节点而不会崩溃树到根节点。

同样点击Delete Dalmaitian按钮。

它将从Dogs节点删除Dalmatian节点并刷新树，用于显示新结构而不会折叠到根节点。

jsTree如何更改ajax url并重新加载数据

1 个答案: