Beginner

Операции с объектами данных

В этой статье рассматриваются такие операции, как получение объекта элемента данных (ID элемента, индекса), проверка существования элементов, их итерация и некоторые другие. Подробнее о загрузке данных или методах добавления, удаления и очистки читайте в соответствующих статьях.

У каждого UI компонента есть внутреннее хранилище, где он хранит загруженные данные:

  • DataStore - хранилище данных для НЕиерархических данных (List, DataView, DataTable, Chart);
  • TreeStore - хранилище для иерархических данных (Tree, TreeTable и GroupList), при условии, что они загружены в виде иерархии XML или JSON.

У обоих хранилищ есть общие методы, свойства и события для работы с элементами данных на клиенте, однако у TreeStore более расширенное API, которое позволяет работать с элементами данных в иерархии.

При работе с данными вы можете:

  • вызывать методы напрямую у Data/TreeStore компонента - $$("list").data. Некоторые функции требуют такого подхода.
  • вызывать методы компонента по его ID - $$("list"), что подразумевает обращение к хранилищу данных. Большая часть методов требует такого подхода.
$$("list").data.each(function(obj){...}); // Перебирает массив элементов
 
$$("list").count(); // считает элементы в хранилище списка

У каждого объекта элемента данных есть уникальные ID и индекс в массиве данных и наборе свойств.

Как получить объект элемента

С помощью метода getItem можно получить объект элемента:

var mylist = webix.ui({
    view:"list", 
    ...
    data:[
        {id:"book1", title:"The Shawshank Redemption", year:"1994"},
        {id:"book2", title:"The Godfather",            year:"1972"}         
    ]
});     
 
// переменная 'item2' будет содержать объект элемента списка
var item2 = mylist.getItem("book2");
 
// вы также можете обратиться к элементам записи напрямую
var title = item2.title;//-> "The Godfather"

Как получить ID элемента

У каждого элемента данных есть свой ID. Зная ID элемента вы можете получить все его свойства через его объект (описано выше).

Значения ID элемента не могут быть 0, false, null

Методы для получения ID элемента
Метод Описание
id (object) Возвращает ID элемента
getFirstId() Возвращает ID первого элемента данных (с индексом "0")
getLastId() Возвращает ID последнего элемента
getNextId (id ) Возвращает ID следующего элемента (по отношению к указанному)
getPrevId (id ) Возвращает ID предшествующего элемента (по отношению к указанному)
getIdByIndex (index ) Возвращает ID элемента по его индексу
getRange (fromId, toId ) Возвращает массив ID из указанного диапазона
getIndexRange (fromInd, toInd ) Возвращает массив ID из указанного диапазона
getFirstChildId (id ) Возвращает ID первого дочернего элемента у родительского элемента в иерархическом хранилище
getParentId (id ) Возвращает ID родительского элемента в иерархическом хранилище
getNextSibling (id ) Возвращает ID следующего соседнего элемента в иерархическом хранилище
getPrevSibling (id ) Возвращает ID предшествующего соседнего элемента в иерархическом хранилище

Как получить индекс элемента

У элемента данных есть индекс - позиция элемента в наборе данных (начиная с 0).

Методы для получения индекса элемента
Метод Описание
getIndexById (id ) Возвращает индекс элемента по его ID
getBranchIndex (id ) Возвращает индекс элемента указанной ветки

Как проверить наличие элемента

С помощью метода exists можно проверить, существует ли определённый элемент данных:

var mylist = webix.ui({
    view:"list", 
    ...
    data:[
        {id:"book1", title:"The Shawshank Redemption", year:"1994"},
        {id:"book2", title:"The Godfather",            year:"1972"}         
    ]
});      
 
mylist.exists("book2");// -> true
mylist.exists("book222");// -> false

Как изменить ID элемента

С помощью метода changeId можно изменить текущий ID элемента:

var mylist = webix.ui({
    view:"list", 
    ...
    data:[
        {id:"book1", title:"The Shawshank Redemption", year:"1994"},
        {id:"book2", title:"The Godfather",            year:"1972"}         
    ]
});      
 
mylist.data.changeId("book1", "book01");

Как менять свойства элемента

Для изменения текущего значения некоторых свойств элемента существуют следующие техники:

item2 = mylist.getItem("book2");
item2.title = "Star Wars";
 
mylist.refresh();
// или
mylist.updateItem("book2", item2);

Методы refresh и updateItem приводят к одному и тому же результату.

Операции над элементами данных

Методы и свойства для манипуляций с элементами данных
Метод Описание
count() Возвращает количество элементов данных
getVisibleCount() (только для компонента *List*) возвращает количество элементов, которые видны при текущей высоте компонента
data.each() Перебирает коллекцию элементов данных
data.order Возвращает массив ID элементов, отображаемых в данный момент
data.pull Возвращает объект с элементами данных (где ключ - id элемента, а значение - объект данных элемента)
data.eachChild(id) Перебирает дочерние элементы первого уровня указанной ветки
data.eachSubItem(id) Перебирает все дочерние элементы (любого уровня) указанной ветки
data.eachOpen() Перебирает открытые узлы дерева (родительские и дочерние)


В отличии от order, свойство pull возвращает все элементы компонента вне зависимости от того, видны они или нет.

var mylist = webix.ui({
    view:"list", 
    ...
    data:[
        {id:"book1", title:"The Shawshank Redemption", year:"1994"},
        {id:"book2", title:"The Godfather",            year:"1972"}         
    ]
}); 
mylist.data.pull["book2"];//-> {id:"book2", title:"The Godfather", year:"1972"} 
 
mylist.data.pull["book2"].title;//-> "The Godfather"
 
mylist.data.pull;
//- >[{id:"book1", title:"The Shawshank Redemption", year:"1994"},
//    {id:"book2", title:"The Godfather",            year:"1972"}]

Как перебирать элементы данных

Чтобы перебрать коллекцию элементов данных используйте метод each класса DataStore.

var mylist = webix.ui({
    view:"list", 
    ...
    data:[
        {id:"book1", title:"The Shawshank Redemption", year:"1994"},
        {id:"book2", title:"The Godfather",            year:"1972"}         
    ]
});
 
var titles =[];
mylist.data.each(function(obj){ titles.push(obj.title); });
//-> titles=["The Shawshank Redemption", "The Godfather"]

Код равносилен стандартному for-loop:

for(i = 0; i<data.length; i++ ){
    titles.push(obj.title);
}

Как перемещать элементы в пределах набора данных

Речь идёт об изменении позиции элемента (его индекса) в наборе данных (старт с 0).

Методы для перемещения элементов в наборе данных
Метод Описание
move(sid, tindex, tobj, tid ) Перемещает указанный элемент на новую позицию
moveBottom (id ) Перемещает указанный элемент на последнюю позицию
moveTop (id ) Перемещает указанный элемент на первую позицию
moveDown (id, step ) Увеличивает индекс указанного элемента и перемещает его на новую позицию
moveUp (id, step ) Уменьшает индекс указанного элемента и перемещает его на новую позицию

Более того, метод move позволяет перетаскивать элемент с одного экземпляра компонента в другой (с одного списка в другой):

// перемещает элемент с id="book1" на вторую позицию в этом же списке
// (помните, что отсчёт начинается с 0)
mylist.move("book1", 1); 
 
// перемещает элемент с id="book1" на первую позицию списка "mylist2" 
var id = mylist.move("book1", 0, mylist2);
Наверх