JsTree: как расширить все узлы при первой визуализации, а затем сохранить и восстановить состояние с помощью плагина 'cookies'

Я планирую использовать jsTree для визуализации древовидных структур, и я хотел бы добиться следующего поведения:

  • при первой визуализации Я хочу, чтобы все узлы были расширены.
  • любые последовательные визуализации будут восстанавливаться до предыдущего состояния древовидной структуры, используя плагин "cookie"

Ограничения:

  • Я использую json-объекты для заполнения дерева
  • Я не могу использовать атрибут "initial_open" для идентификаторов списков для первой визуализации, потому что будет сложно определить начальные идентификаторы

Другими словами, я хочу достичь чего-то похожего на: а) изменить состояние по умолчанию node на 'open' или b) определить, является ли это первой визуализацией (возможно, путем изучения атрибутов плагина cookie, если мы У меня не было состояния), и если да, тогда назовите 'open_all'

Идеи приветствуются. Спасибо!

Ответы

Ответ 1

Чтобы развернуть все узлы, просто используйте

$("#treeView").jstree("open_all");

Вы можете включить его в начальную загрузку, например

$('#treeView').jstree(
{
    "themes": {
        "theme": "default",
        "dots": false,
        "icons": false
    },
    "plugins": ["themes", "html_data", "checkbox", "ui"]
}).jstree("set_theme", "apple")
.bind("loaded.jstree", function (event, data) {
    $(this).jstree("open_all");
});

Аналогично, если вы хотите проверить все элементы, используйте

$(this).jstree("check_all");

Что касается файлов cookie, я не использовал его, но есть плагин с именем jquery.cookie.js. Я полагаю, он содержит методы для загрузки/сохранения данных из/в файл cookie. Вы должны привязать другое событие, например

.bind("change_state.jstree", function (evt, data) { ... } );

чтобы зафиксировать изменение состояния, и начальная загрузка в событии loaded.jstree будет считываться из файла cookie. Пожалуйста, просмотрите эту ссылку, чтобы узнать больше о обработке файлов cookie, как указано - как вы можете использовать его с этим плагином или без него.

Ответ 2

Мэтт ответ все в порядке, но, поскольку речь идет о jstree v3, используйте событие ready.jstree, поэтому короткая короткая история:

$('#treeView').jstree(treeOptions) 
.bind("ready.jstree", function (event, data) {
     $(this).jstree("open_all");
});