Перейти к основному содержимому

Как начать

Это руководство проведёт вас по шагам для создания полностью функциональной DHTMLX Spreadsheet на странице. Компонент особенно эффективен для работы с большими объёмами данных, когда нужно сохранять результаты вычислений и воспроизводить их.

DHTMLX Spreadsheet, инициализированная с примером таблицы данных в окне браузера

Шаг 1. Подключение исходных файлов​

Начните с создания HTML-файла с именем index.html. Затем подключите исходные файлы Spreadsheet. Подробное описание пакета DHTMLX Spreadsheet приведено здесь.

Необходимы два файла:

  • JS-файл DHTMLX Spreadsheet
  • CSS-файл DHTMLX Spreadsheet

и

  • ссылка на исходный файл Google Fonts для корректного отображения шрифтов.
index.html
<!DOCTYPE html>
<html>
<head>
    <title>How to Start with DHTMLX Spreadsheet</title>
    <script src="codebase/spreadsheet.js"></script>   

    <link href="codebase/spreadsheet.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <script>
    // your code will be here
    </script>
</body>
</html>

Установка Spreadsheet через npm или yarn​

Вы можете импортировать JavaScript Spreadsheet в свой проект с помощью менеджера пакетов yarn или npm.

Установка пробной версии Spreadsheet через npm или yarn​

К сведению

Если вы хотите использовать пробную версию Spreadsheet, скачайте пробный пакет Spreadsheet и следуйте инструкциям в файле README. Обратите внимание, что пробная версия Spreadsheet доступна только в течение 30 дней.

Установка PRO-версии Spreadsheet через npm или yarn​

К сведению

Вы можете получить доступ к закрытому npm-репозиторию DHTMLX напрямую из Кабинета клиента, сгенерировав логин и пароль для npm. Подробное руководство по установке также доступно там. Обратите внимание, что доступ к закрытому npm возможен только при наличии активной лицензии на Spreadsheet.

Шаг 2. Создание Spreadsheet​

Теперь вы готовы добавить Spreadsheet на страницу. Сначала создайте DIV-контейнер и поместите в него DHTMLX Spreadsheet. Ваши действия:

  • указать DIV-контейнер в файле index.html
  • инициализировать DHTMLX Spreadsheet с помощью конструктора dhx.Spreadsheet

В качестве параметров конструктор принимает HTML-контейнер для размещения Spreadsheet и объект конфигурации Spreadsheet.

index.html
<!DOCTYPE html>
<html>
<head>
    <title>How to Start with DHTMLX Spreadsheet</title>
    <script src="codebase/spreadsheet.js"></script>   
   
    <link href="codebase/spreadsheet.css" rel="stylesheet">  
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <div id="spreadsheet_container"></div>
    <script>
        const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
            //config options
        });
    </script>
</body>
</html>

Шаг 3. Настройка конфигурации Spreadsheet​

Далее вы можете задать дополнительные параметры конфигурации, которые компонент Spreadsheet должен иметь при инициализации помимо значений по умолчанию.

Вы можете настроить внешний вид Spreadsheet с помощью нескольких параметров, например: toolbarBlocks, rowsCount и colsCount. Подробности.

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    toolbarBlocks: ["columns", "rows", "clear"],
    rowsCount: 10,
    colsCount: 10
});

Конфигурация DHTMLX Spreadsheet весьма гибкая, поэтому вы можете изменять её в любое время. Прочитайте соответствующее руководство, чтобы освоить основы настройки Spreadsheet.

Шаг 4. Загрузка данных в Spreadsheet​

Последний шаг — заполнить Spreadsheet данными. DHTMLX Spreadsheet принимает данные в формате JSON. Помимо данных, в наборе данных можно передавать необходимые стили. При загрузке встроенных данных нужно использовать метод parse() и передать ему объект с данными, как в примере ниже:

data.json
const data = [
    { "cell": "a1", "value": "Country" },
    { "cell": "b1", "value": "Product" },
    { "cell": "c1", "value": "Price" },
    { "cell": "d1", "value": "Amount" },
    { "cell": "e1", "value": "Total Price" },

    { "cell": "a2", "value": "Ecuador" },
    { "cell": "b2", "value": "Banana" },
    { "cell": "c2", "value": 6.68 },
    { "cell": "d2", "value": 430 },
    { "cell": "e2", "value": 2872.4 },

    { "cell": "a3", "value": "Belarus" },
    { "cell": "b3", "value": "Apple" },
    { "cell": "c3", "value": 3.75 },
    { "cell": "d3", "value": 600 },
    { "cell": "e3", "value": 2250 }
]

// initializing spreadsheet
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    //config
});
// loading data into spreadsheet
spreadsheet.parse(data);

Связанный пример: Spreadsheet. Настраиваемое количество ячеек

Что дальше​

Вот и всё. За четыре шага вы получаете удобный инструмент для работы с табличными данными. Теперь вы можете начать работу с данными или продолжить изучение DHTMLX Spreadsheet.

Need more help?Contact Support