Настройки Колонок

С помощью параметра columns вы можете:

Автоматическая конфигурация столбцов

DataTable может сам настраивать колонки на основе данных, если выставить autoConfig:true. Это особенно удобно при прототипировании и создании простых таблиц. Задавать columns не нужно.

{
    view:"datatable",
    autoConfig:true,
    data:[
        { id:"1", title:"Rage against the Machine", stars:5, $css:"top" },
        { id:"2", title:"Chalices and Blades", stars:3 },
        { id:"3", title:"Look back in Anger", stars:4 },
        { id:"4", title:"Look Homeward, Angel", stars:5, $css:"top" }
    ]
}

DataTable проанализирует переданные данные и построит столбцы автоматически. Столбцы получат настройки по умолчанию:

  • sort:"string" (столбцы, которые начинаются с $- не включаются; эти столбцы являются вспомогательными полями, например $css, $count);
  • editor:"text" (работает только при установленном editable:true в конфигурации таблицы);
  • fillspace:true - для первого столбца, для остальных width:100;
  • select:"row" (если не указано другое)

Хедеры/футеры

Хедеры и футеры включаются с помощью свойств header и footer соответственно, (по умолчанию хедеры включены).

Значения header и footer могут быть заданы строкой, объектом или массивом строк и объектов.

1. строкой вы можете задать текст, изображения, поля ввода HTML, и ссылки. Подробнее.

2. объект позволяет задавать более сложные структуры хедеров и футеров. Объект может содержать следующие свойства:

  • text - текстовый ярлык для столбца;
  • colspan - количество столбцов в ячейке;
  • rowspan - количество строк в ячейке;
  • content - встроенный фильтр или счетчик для значений в столбце (textFilter, selectFilter или любой другой из списка фильтров). Подробнее;
  • tooltip - тултип для ячеек и столбцов, подробнее;
  • height - определяет высоту хедера;
  • css - имя класса CSS применяемого к хедеру.

3. массив позволяет задавать многострочные хедеры.

Задание хедера и футера для определенного столбца

// простая строка
webix.ui({
    view:"datatable",
    footer:true,
    columns:[
        { id:"col1", header:"Column 1", footer:"Footer 1" }
    ]
});
 
// массив
webix.ui({
    view:"datatable",
    footer:true,
    columns:[
        {
            id:"col1",
            header:[
                { text:"Column1", colspan:"2"},
                { content:"selectFilter" }
            ],
            footer:[
                { text:"Total", rowspan:"2"},
                { text:" " }
            ]
        }
    ]
});

Related sample:  Standard Header (Footer) Implementation

Подробнее в статье Настройки Хедеров и Футеров DataTable и Webix Tutorials.

Ширина столбцов

Динамическая ширина

Чтобы позволить одному или нескольким столбцам заполнять неиспользуемое пространство родительского контейнера, задайте fillspace:true:

columns:[
   { id:"title", header:"Film title", fillspace:true },
    //    ...
]

Если нескольким столбцам задать параметр fillspace, они разделят пространство поровну.

Related sample:  Adjusting Columns to the Parent Container

Пропорциональная ширина

Для пропорционального распределения ширины столбцов, задайте fillspace как число:

// 75% : 25% доступной ширины
columns:[
   { id:"title", header:"Film title", fillspace:3 },
   { id:"year", header:"Released in", fillspace:1 },
   // ...
]

Related sample:  Adjusting Columns to the Parent Container

Фиксированная ширина

Чтобы задать фиксированную ширину столбца, используйте свойство columnWidth в конфигурации DataTable.

{ view:"datatable", columnWidth:200, columns:[ ] }

Чтобы задать фиксированную ширину для отдельного столбца, используйте свойство width:

Setting the width of a column

columns:[
    { id:"col1", width:200 }
]

Related sample:  Sizing through the 'Width', 'Height' Parameters

Определение ширины столбца в зависимости от содержимого

Чтобы адаптировать ширину столбца под размер содержимого, используйте свойство adjust. Три возможных значения свойства:

  • data - ширина ячейки с самым широким содержимым;
  • header - ширина текста хедера;
  • true - сочетание предыдущих двух: ширина столбца подстроится под ширину хедера или под самое широкое содержимое.
{
    view:"datatable",
    columns: [
        { id: "title", header: "Film", adjust: "data" },
        { id: "year", header: "Released in", adjust: "header" },
        { id: "notes", header: "Reviews", adjust: true }
    ]
}

Для таблиц с большим числом данных, вы можете ограничить количество строк на основе которых будет рассчитываться ширина столбцов с помощью adjust. Для этого используется свойство adjustBatch:

webix.ui({
    rows:[
        {
            view:"datatable",
            columns:[
                {id:"id"},
                {id:"title", adjust:"data", adjustBatch:50},
                {id:"title", adjust:true}
            ],
            // большое количество данных
            data:big_film_data
        }
    ]
});

Related sample:  Adjusting Columns to the Content

Хорошая практика для динамического определения размеров

Примером хорошей практики считается комбинирование изменяемых параметров размерности (fillspace и adjust) с minWidth для обеспечения корректного определения размера.

Подробнее в статье Изменение размеров. Проверить свои знания на практике вы можете в Webix tutorials.

Встроенные фильтры

Вы можете добавить фильтр в хедер или футер таблицы. Полный список доступных фильтров.

Фильтр добавляется с помощью свойства content

Добавление фильтра в хедер столбца

columns:[
    {
        id:"col1",
        header:[
            { text:"Column 1", colspan:"2"},
            { content:"selectFilter" }
        ]
    },
    {/* ... */}
]

Related sample:  Filtering. Using Built-in Means

Подробнее в статье Фильтрация и Webix Tutorials.

Встроенная сортировка

Сортировка задается с помощью свойства sort. Способ сортировки зависит от типа данных. Есть несколько предопределенных типов сортировки:

  • "int"
  • "date"
  • "string"
  • "string_strict" (сортировка строк с учетом регистра)
  • "text"
  • "server"
  • "raw"

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

columns:[
    { id:"col1", sort:"string" },
    {/* ... */}
]

Related sample:  Sorting. Using Built-in Means

Вы также можете установить свой тип сортировки свой тип сортировки.

Подробнее в статье Сортировка и Webix Tutorials.

Выравнивание текста

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

Выравнивание текста в столбце

<style>
.myStyle{
    text-align:right;
}
</style>
columns:[
    { id:"col1" css:"myStyle"}, // класс css
    { id:"col2", css:{'text-align':'right'} // задание классов в атрибуте
]

Подробнее об использовании атрибута css в статье Стилизация в DataTable и Webix Tutorials.

Форматы дат

Для форматирования дат и чисел используется атрибут format:

Установка формата для отдельного столбца

columns:[
    // данные будут отформатированы в соответствии с текущей локалью
    {
        id:"col2", format:function(value){
            return webix.i18n.numberFormat(value);
        }
    }
]

Related sample:  Using Date Templates

Форматирование не меняет сами данные. Это исключительно визуальные изменения.

Подробнее в статье Форматирование дат и чисел и Webix Tutorials.

Математические формулы в столбцах

Вы можете написать простые математические формулы в ячейках столбца. Формулы можно применить ко всему столбцу или только для отдельной ячейки.

Использование формул для задания значений всего столбца

columns:[
    { id:"col1", math:"[row_id,col_name] + [row_id,col_name]" }
]

Related sample:  Using Cell References in Formulas

Подробнее в статье Математические операции и Webix Tutorials.

Внешний источник данных для столбца

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

Набор опций или коллекцию столбца можно использовать для:

  • отображения понятных значений в ячейках (замена ID),
  • списка опций в селекторе ячейки,
  • списка опций в селекторе фильтра.

Фильтрация, сортировка и редактирование будут осуществляться с настоящими данными (ID), пользователю при этом будет отображаться понятный текст. Именно поэтому мы рекомендуем устанавливать фильтры и редакторы для столбцов таким образом и сортировать их как sort: "text".

Добавление коллекции столбца

Вы можете задать данные для столбца из любого источника данных, используя свойства collection или options. Данные для столбца могут быть взяты из:

  • DataCollection
  • любой компонент данных (исходный компонент должен быть инициализирован первым)
  • URL с путем к файлу данных
  • массив с объектом "ID-значение" [{ id:1, value:"one"}, ...]
  • массив со значениями ["one", "two"]
  • объект { 1: "one", 2: "two"}
  • функция / прокси
{
    view:"datatable",
    columns:[
        // ID таблицы
        { id:"product", header:"Product", options:"dash-pro" },
        // путь к скрипту
        { id:"quantity", header:"Quantity", options:"data/goods/" },
        // массив объектов
        { id:"price", header:"Unit price", options:[
            { id:"1", value:100 },
            { id:"2", value:200 }
        ] }
    ],
    url:"data/orderproducts/", // основной источник данных
};

Не смотря на выбранный вами способ задания options/collection, данные столбца будут помещены в datacollection и будут доступны с помощью конфигурации столбца, например внутри темплейта данных:

{
    view:"datatable",
    columns:[
        { id:"price", header:"Unit price", options:[
            { id:"1", price:100 },
            { id:"2", price:200 }
        ],
        template:function(obj, common, val, config){
            // config - это конфигурация столбца
            return config.collection.getItem(obj.price).price;
        } }
    ],
    url:"data/orderproducts/", // основной источник данных
};

Related sample:  Datatable: Option collections for columns, filters and editors

Чтобы получить определенную коллекцию используйте метод DataTable getColumnConfig():

var collection = $$("table").getColumnConfig("titleId").collection;

DataCollections реляционные базы данных

Вы можете отобразить связанные таблицы из реляционной базы данных в одной таблице данных с помощью свойства collection.

Чтобы объединить связанные таблицы и отобразить полученные данные в DataTable, используйте несколько DataCollections для каждой таблицы и настройте столбцы DataTable для отображения значений из соответствующих коллекций.

1. Синхронизируйте данные с одной из коллекций:

$$("orders_grid").sync(orders);

2. Укажите другие коллекции в качестве источников данных для соответствующих столбцов:

{
    view:"datatable", id:"orders_grid",
    columns:[
        { id:"date", header:"Order Date" },
        { id:"employee", header:"Employee", collection:employee },
        // другие столбцы
    ]
}

Подробнее в Webix Tutorials.

Темплейты

По умолчанию необработанные значения полей отображаются в ячейках. Чтобы изменить схему отображения, используйте темплейт данных.

Использование темплейтов для конфигурации данных в столбце

columns:[
    {
        id:"col4", template:function(obj){
            return obj.col1 + obj.col2*2 + obj.col3*3;
        }
    }
]

Related sample:  Using String Templates

Подробнее о темплейтах данных в отдельной статье и в туториалах Webix Templates.

Внешний вид

Вы можете изменить внешний вид каждого столбца. Стиль столбца может быть определен классом CSS и применен посредством атрибута css:

Применение класса CSS к отдельному столбцу

columns:[
    { id:"col1", css:"someStyle" }
]

Подробнее в статье Styling и в Webix Tutorials.

Скрыть/показать столбцы

По умолчанию все столбцы таблицы видимы при загрузке страницы. Чтобы скрыть определенный столбец, задайте значение true свойству hidden:

var grid = webix.ui({
    view:"datatable",
    columns:[
        // изначально скрытый столбец
        { id:"col1", header:"Title", hidden:true},
        // видимый столбец
        { id:"col2", header:"Rating"}
   ]
})

С помощью методов hideColumn() и showColumn() вы можете управлять видимостью столбцов динамически.

Скрыть столбец

grid.hideColumn("col2");

Динамическое добавление/удаление столбцов

Вы можете добавлять и удалять столбцы во время выполнения прямо в массиве columns. Не забудьте после этого перерисовать данные.

Замена текущего столбца новым

// переопределить столбец
grid.config.columns = [/* ..новая коллекция столбцов.. */];
grid.refreshColumns();
 
// или вставить в начало
grid.columns.splice(0, 0, { id:"year", header:"Release" });
grid.refreshColumns();
 
// или удалить второй столбец
grid.columns.splice(1, 1);
grid.refreshColumns();
 
// или переместить 3-ий столбец
grid.columns.splice(2, 1, { id:"stars", header:"Rates" });
grid.refreshColumns();

Related sample:  Datatable: Adding/removing Columns

Скрыть/отобразить столбцы в группах

Вы можете скрывать/показывать столбцы группами. Задайте имя группы в параметре batch. А чтобы определить изначально видимую группу, используйте свойство visibleBatch.

var grida = webix.ui({
    view:"datatable",
    visibleBatch:1,
    columns:[
        { id:"id",  header:"#", css:"rank",  batch:2,   width:50},
        { id:"title", header:"Film title", fillspace:true },
        { id:"year",  batch:1,  header:"Released" , width:80},
        { id:"category", header:"Category", batch:1},
        { id:"votes", batch:3, header:"Votes",  width:100},
        { id:"rating", batch:3, header:"Rating", width:100},
        { id:"rank", header:"Rank", css:"rank",  batch:2,width:50}
    ]
});

Любая группа столбцов может быть показана с помощью метода showColumnBatch, который принимает в качестве параметра значение batch столбца:

// показать колонки id, rank
grida.showColumnBatch(2);
// показать колонки votes, rating
grida.showColumnBatch(3);

Related sample:  Column Batches

Группировка столбцов

Функциональность доступна для пользователей Webix Pro.

Группы столбцов можно использовать для организации групп столбцов, которые скрываются/отображаются по клику на хедер объединяющего столбца:

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

  • content (string) - здесь это columnGroup (свойство также используется для задания фильтров в хедере);
  • batch (string, number) - ID группы;
  • groupText (string) - заголовок группы (отображается когда группа свернута);
  • closed (boolean) - если true - группа изначально скрыта; по умолчанию falset;
  • colspan (number) - число столбцов в группе, включая объединяющую.
columns:[
    // объединяющий столбец
    { id:"2008_1", header:[
      { content:"columnGroup", closed:true, batch:"2008", groupText:"2008", colspan:12},
      "January"
    ]},
    // другие столбцы группы
    { id:"2008_2",  batch:"2008", header:[null, "February"] },
    { id:"2008_3",  batch:"2008", header:[null, "March"] },
    { id:"2008_4",  batch:"2008", header:[null, "April"] },
    // ...
]

Related sample:  Grouped Columns in DataTable

Объединения строк и столбцов

Функциональность доступна для пользователей Webix Pro.

DataTable позволяет объединять строки и столбцы. Объединения хранятся в свойстве span набора данных.

Чтобы включить функциональность, задайте true параметру spans в конфигурации DataTable.

Запись каждого объединения содержит ID строки, ID столбца, width/height, value для отображения и класс css:

webix.ui({
    view:"datatable",
    columns:[...],
    spans:true,
    data:{
        data:grid_data,
        spans:[
            [1, "title", 3]
        ]
    }
});

Related sample:  Colspans in Datatable

Подробнее об объединении строк и столбцов в хедере таблиц Webix.

Попап-редакторы и выпадающие списки

Вы можете настроить попап-редакторы и выпадающие списки in DataTable columns using the suggest property.

Наверх
If you have not checked yet, be sure to visit site of our main product Webix html5 ui library and page of datagrid javascript product.