如何使用JSON初始化jsTree

时间:2011-10-31 10:15:50

标签: jquery json jstree

我通过这种方式制作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并仅使用下面的字符串为用户显示它。

2 个答案:

答案 0 :(得分:5)

可能你想要那样的东西? http://jsfiddle.net/radek/fmn6g/11/

  • 在按钮上单击插入jsTree的位置。
  • 点击功能上的javascript插入'jstree'div并且还包含jsTree定义。
  • 如您所见,我也使用json数据类型。

我的问题display jsTree on click

中的更多信息

这就是你追求的目标吗?

答案 1 :(得分:5)

这是我的解决方案:

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来加载模型,这个解决方案仍然有用。

来自文档:

  

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

更多信息请访问http://www.jstree.com/documentation/json_data

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