Как инициализировать jsTree с помощью JSON - PullRequest
Новая
       22

Как инициализировать jsTree с помощью JSON

6 голосов
/ 31 октября 2011

Я делаю 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 (я не должен использовать «ajax» в «json_data»). Я должен инициализировать свой 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 ]

5 голосов
/ 01 ноября 2011

Вот мое решение: 

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 и перестроить дерево, используя эту измененную строку (без перезагрузки страницы).

5 голосов
/ 01 ноября 2011

Возможно, вы хотите что-то подобное?http://jsfiddle.net/radek/fmn6g/11/

  • Где я вставляю jsTree по нажатию кнопки.
  • Функция javascript on click вставляет div 'jstree', а также содержит определение jsTree.
  • Как видите, я также использую тип данных json.

Дополнительная информация в моем вопросе отображение jsTree при нажатии

Это то, чтовы после?

...