Добавление столбца с индексом строки DataTable

Существует два типа столбцов с индексом:

• Статические (индексы строк не изменяются при перемещении, удалении и т.п. строк)
• Динамические (индексы строк могут изменяться в зависимости от текущего положения строки)

Для создания статического столбца с индексом, используйте следующую технику:

Создание статического столбца с индексом в DataTable

webix.ui({
    view:"datatable",
    columns:[
        { id:"index",   header:"",           sort:"int"},
        { id:"title",   header:"Film title", sort:"string"},
        { id:"year",    header:"Year",       sort:"int"}
    ],
    scheme:{
        $init:function(obj){ obj.index = this.count(); }
    },
    ...
});

Related sample:  Index Column

Рассмотрим код выше:

1. В массиве columns добавляем индексный столбец.
2. Затем, добавляем ключ $init в scheme.

Код внутри ключа $init выполняется, когда данные загружаются в компонент изначально и когда данные перезагружаются для новых элементов. Код вызывается для каждого элемента данных, поэтому мы можем использовать его как итератор для назначения индексов строкам.
Подробнее о $init.

Для создания динамического столбца с индексом, используйте следующую технику:

Создание динамического столбца с индексом в DataTable

webix.ui({
    view:"datatable",
    id:"mytable",
    columns:[
        { id:"index",   header:"",           sort:"int"},
        { id:"title",   header:"Film title", sort:"string"},
        { id:"year",    header:"Year",       sort:"int"}
    ],
    on:{
        "data->onStoreUpdated":function(){
            this.data.each(function(obj, i){
                obj.index = i+1;
            });
        }
    },
    ...
});

Related sample:  Index Column

Рассмотрим код выше:

1. В массиве columns добавляем индексный столбец.
2. С помощью параметра on задаем обработчик событию onStoreLoad.
   "data->onStoreUpdated" аналогичен $$('mytable').data.attachEvent('onStoreUpdated', function(){...})
3. Событие onStoreLoad срабатывает когда данные в хранилище изменяются.
4. Метод each позволяет нам перебирать коллекцию элементов данных.