В этой статье рассматриваются такие операции, как получение объекта элемента данных (ID элемента, индекса), проверка существования элементов, их итерация и некоторые другие. Подробнее о загрузке данных или методах добавления, удаления и очистки читайте в соответствующих статьях.
У каждого UI компонента есть внутреннее хранилище, где он хранит загруженные данные:
У обоих хранилищ есть общие методы, свойства и события для работы с элементами данных на клиенте, однако у TreeStore более расширенное API, которое позволяет работать с элементами данных в иерархии.
При работе с данными вы можете:
$$("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 элемента не могут быть 0, false, null
Метод | Описание |
---|---|
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
С помощью метода 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);
Наверх