Работа с состоянием компонента

Модуль UIManager позволяет сохранять и восстанавливать только внешние параметры компонента (ширину, высоту и другие). За внутренние параметры (выбор элемента, положение скролла и другие) отвечает модуль DataState.

Этот модуль позволяет сохранять и восстанавливать состояние внутренних параметров (скролл, сортировка, фильтрация и другие) для следующих компонентов данных:

Работа с состоянием Datatable

Компонент Datatable позволяет сохранять (а также извлекать) состояние в Local Storage, Session Storage или Cookie.

Объект состояния будет содержать текущие параметры таблицы:

ID столбцов
размеры столбцов ( значение -1 это fillspace )
объект с выбранными элементами (у каждого объекта есть поля row, column, и id )
позиция скролла
порядок столбцов
параметры сортировки
значения встроенных фильтров
ID скрытых столбцов.

{
    "ids":["title","year","votes"],
    "size":[-1,80,100],
    "select":[{ "row":5,"column":"title","id":5}],
    "scroll":{"x":0,"y":77},
    "order":["rank","title","year","votes"],
    "sort":{"id":"votes","dir":"asc"},
    "filter":{"title":"o","year":"19"},
    "hidden":["rank"]
}

чтобы получить состояние Datatable, вызовите его метод getState:

Получаем состояние и сохраняем его в Local Storage

var state = grid.getState();
//сохраняем состояние в Local Storage 
webix.storage.local.put("state", state);

чтобы восстановить состояние Datatable, вызовите его метод setState, передав объект с состоянием в качестве параметра:

Восстанавливаем состояние, сохраненное в Local Storage

var state = webix.storage.local.get("state");
if (state)
    grid.setState(state);

Работа с состоянием Treetable

Компонент Treetable позволяет сохранять (а также извлекать) состояние в Local Storage, Session Storage или Cookie.

Объект состояния будет содержать текущие параметры компонента:

ID столбцов
размеры столбцов ( значение -1 это fillspace )
объект с выбранными элементами (у каждого объекта есть поля row, column, и id )
позиция скролла
порядок столбцов
параметры сортировки
значения встроенных фильтров
ID скрытых столбцов
развернутые элементы дерева.

{
    "ids":["value","type"],
    "size":[-1,80],
    "select":[{"row":"v_0_1","column":"value","id":"v_0_1"}],
    "scroll":{"x":0,"y":51},
    "order":["id","value","type"],
    "sort":{"id":"value","dir":"desc"},
    "filter":{"value":"e","type":"f"},
    "hidden":["id"],
    "open":["3","m_3","v_0"]
}

чтобы получить состояние Treetable, вызовите его метод getState:

Получаем состояние и сохраняем его в Local Storage

var state = grid.getState();
webix.storage.local.put("treetable_state", state);

чтобы восстановить состояние Treetable, вызовите его метод setState, передав объект с состоянием в качестве параметра:

Восстанавливаем состояние, сохраненное в Local Storage

var state = webix.storage.local.get("treetable_state");
if (state)
    grid.setState(state);

Работа с состоянием Tree

Компонент Tree позволяет сохранять (а также извлекать) состояние в Local Storage, Session Storage или Cookie.

Объект состояния будет содержать текущие данные о развернутых и выбранных элементах дерева:

{
    open:['1', '2', 'root'],
    select:['1.3']
}

где '1', '2', 'root' и '1.3' - это id соответствующих элементов.

чтобы получить состояние Tree, вызовите его метод getState:

Получаем состояние и сохраняем его в Local Storage

var state = $$("tree").getState();
webix.storage.local.put("state", state);

чтобы восстановить состояние Tree, вызовите его метод setState, передав объект с состоянием в качестве параметра:

Восстанавливаем состояние, сохраненное в Local Storage

var state = webix.storage.local.get("state");
if (state)
    $$("tree").setState(state);

Related sample: Tree: Saving State

Наверх