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

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

Related sample:  Quick Start with DataTable

Новый файл 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 (подробнее).
Мы покажем самый простой из них и укажем данные прямо в конструкторе с помощью параметра 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.

Related sample:  Quick Start with DataTable

Что дальше

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

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