如何使用 JSON 初始化 jsTree

发布于 2024-12-12 17:05:52 字数 1752 浏览 6 评论 0原文

我通过这种方式制作 jsTree：

$("#myTree").jstree({
                "plugins": ["themes", "json_data", "ui", "crrm", "dnd"],
                "themes": {
                    "theme": "default",
                    "dots": false,
                    "icons": false,
                    "url": "../../Content/jsTreeThemes/default/style.css"
                },
                "json_data": {
                   "data" : []
                }
});

用户看到带有空 jsTree 的页面。当用户做出某些操作时，我必须初始化我的 jsTree。但我不能使用ajax初始化（我不能在“json_data”中使用“ajax”）。我必须仅使用这样的字符串初始化 jsTree：

var stringJSON = [{
    "attr": {
        "id": "1",
        "rel": "root",
        "mdata": null
    },
    "data": "title": "root_jsTree",
    "icon": null
}, "state": "open",
"children": [{
    "attr": {
        "id": "7",
        "rel": "folder",
        "mdata": null
    },
    "data": {
        "title": "1",
        "icon": null
    },
    "state": "",
    "children": [{
        "attr": {
            "id": "10",
            "rel": "folder",
            "mdata": null
        },
        "data": {
            "title": "leaf",
            "icon": null
        },
        "state": "",
        "children": []
    }]
}, {
    "attr": {
        "id": "8",
        "rel": "folder",
        "mdata": null
    },
    "data": {
        "title": "leaf",
        "icon": null
    },
    "state": "",
    "children": [{
        "attr": {
            "id": "9",
            "rel": "folder",
            "mdata": null
        },
        "data": {
            "title": "leaf",
            "icon": null
        },
        "state": "",
        "children": []
    }]
}]
}]'

无论我如何接收该字符串，当用户想要查看树时，我已经有了该字符串。在这里我遇到问题：如何初始化 jsTree 并仅使用下面的字符串向用户显示它。

原文

I make jsTree by this way:

$("#myTree").jstree({
                "plugins": ["themes", "json_data", "ui", "crrm", "dnd"],
                "themes": {
                    "theme": "default",
                    "dots": false,
                    "icons": false,
                    "url": "../../Content/jsTreeThemes/default/style.css"
                },
                "json_data": {
                   "data" : []
                }
});

And user sees page with empty jsTree. I must initialize my jsTree when user make some action. But I musn't use ajax initialization (I musn't use "ajax" in "json_data"). I must initialize my jsTree using only string like this:

var stringJSON = [{
    "attr": {
        "id": "1",
        "rel": "root",
        "mdata": null
    },
    "data": "title": "root_jsTree",
    "icon": null
}, "state": "open",
"children": [{
    "attr": {
        "id": "7",
        "rel": "folder",
        "mdata": null
    },
    "data": {
        "title": "1",
        "icon": null
    },
    "state": "",
    "children": [{
        "attr": {
            "id": "10",
            "rel": "folder",
            "mdata": null
        },
        "data": {
            "title": "leaf",
            "icon": null
        },
        "state": "",
        "children": []
    }]
}, {
    "attr": {
        "id": "8",
        "rel": "folder",
        "mdata": null
    },
    "data": {
        "title": "leaf",
        "icon": null
    },
    "state": "",
    "children": [{
        "attr": {
            "id": "9",
            "rel": "folder",
            "mdata": null
        },
        "data": {
            "title": "leaf",
            "icon": null
        },
        "state": "",
        "children": []
    }]
}]
}]'

No matter how I receive this string, when user wants see tree I've already had this string.
And here I get question: How can I initialize jsTree and display it for user using only string below.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

番薯 2024-12-19 17:05:53

这是我的解决方案：

var jsTreeSettings = $("#myTree").jstree("get_settings");
jsTreeSettings.json_data.data = $.parseJSON(stringJSON);
$.jstree._reference("myTree")._set_settings(jsTreeSettings);

// Refresh whole our tree (-1 means root of tree)
$.jstree._reference("myTree").refresh(-1);

即使我们之前设置了 AJAX 来加载模型，该解决方案也将起作用。

来自文档：

如果同时设置了数据和ajax，则初始树将从数据字符串呈现。
当打开一个关闭的节点（没有加载的子节点）时，会发出 AJAX 请求。

更多信息在这里 http://www.jstree.com/documentation/json_data

我决定使用这个解决方案是因为我必须多次更改 stringJSON 并使用此更改的字符串重建树（无需重新加载页面）。

Here is my solution:

var jsTreeSettings = $("#myTree").jstree("get_settings");
jsTreeSettings.json_data.data = $.parseJSON(stringJSON);
$.jstree._reference("myTree")._set_settings(jsTreeSettings);

// Refresh whole our tree (-1 means root of tree)
$.jstree._reference("myTree").refresh(-1);

This solution will work even if we set up AJAX for loading model before.

From documentation:

If both data and ajax are set the initial tree is rendered from the data string.
When opening a closed node (that has no loaded children) an AJAX request is made.

More information is here http://www.jstree.com/documentation/json_data

I decided to use this solution because I must change stringJSON several times and rebuild tree using this changed string (without reloading page).

回复收藏 0 原文