Создание базового приложения

Испробовать теорию на практике вы можете в туториалах Webix.

Новый файл HTML и необходимые файлы с кодом

Для начала создадим новый файл HTML и включим в него файлы с кодом DataTable.

Нужные файлы:

webix.css
webix.js

Базовая страница html с файлами DataTable

<html>
<head>
    <title>Начало работы с DataTable</title>
  <script src="../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="../codebase/webix.css" type="text/css" charset="utf-8">
</head>
<body>
    <script>        // ваш JavaScript код
    </script>
</body>
</html>

Включение файлов Webix с помощью пакетных менеджеров

ИЛИ, как вариант загрузки,вы можете установить библиотеку Webix с помощью пакетных менеджеров NuGet и Bower.

Установка Webix с помощью этих инструментов потребует выполнить только строку кода внутри (вам не нужно ничего скачивать):

NuGet

nuget install Webix
 
//Если вы используете Microsoft Visual Studio, выполните это в Package Manager Console
install-package Webix

Bower

bower install webix

Объект конструктора

Чтобы создать новый экземпляр DataTable, используйте следующий конструктор

var dtable = webix.ui({ view:"datatable" });

Затем, зададим столбцы - массив объектов, каждый из которых представляет отдельный столбец. Каждый объект должен содержать хотя бы атрибут id.

Кроме id, мы укажем еще два часто используемых атрибута: header (хедер столбца) и width (ширина столбца).

Базовая конфигурация DataTable

var dtable = webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title",   width:200},
        { id:"year",    header:"Release year", width:80},
        { id:"votes",   header:"Votes",        width:100}
    ]
});

Основные настройки

На предыдущем шаге мы определили основные параметры для DataTable. О всех возможностях настройки таблицы читайте в специальных статьях документации:

Настройки Колонок - кратко о всех настройках столбцов;
Режимы выбора элементов Datatable - описывают различные типы выделения (ячейка, столбец, строка и т.п.);
Сортировка и Фильтрация - рассказывают о средствах сортировки и фильтрации.

Загрузка данных

Существует много способов загрузить данные в DataTable (подробнее).
Мы покажем самый простой из них и укажем данные прямо в конструкторе с помощью параметра data:

var dtable = webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title",    width:200},
        { id:"year",    header:"Release year" , width:80},
        { id:"votes",   header:"Votes",         width:100}
    ],
    data:[
        { id:1, title:"The Shawshank Redemption", year:1994, votes:678790},
        { id:2, title:"The Godfather",            year:1972, votes:511495}
    ]
});

Поздравляем! Теперь вы можете запустить ваша приложение с DataTable.

Что дальше

Что еще можно сделать?

Пройти Туториалы Webix
Почитать о возможных форматах данных и о том, как получить данные из БД;
Узнать о настройке столбцов;
Посмотреть другие примеры.

Наверх

If you have not checked yet, be sure to visit site of our main product Webix html5 library and page of web datagrid product.