Испробовать теорию на практике вы можете в туториалах Webix.
Related sample: Quick Start with DataTable
Для начала создадим новый файл HTML и включим в него файлы с кодом DataTable.
Нужные файлы:
Базовая страница 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 с помощью пакетных менеджеров 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
Что еще можно сделать?