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

Интеграция с Vue

Подсказка

Перед изучением этой документации вы должны быть знакомы с основными концепциями и паттернами Vue. Для повторения материала обратитесь к документации Vue 3.

DHTMLX Spreadsheet совместим с Vue. Мы подготовили примеры кода для работы DHTMLX Spreadsheet с Vue 3. Подробнее см. соответствующий Пример на GitHub.

Создание проекта​

К сведению

Перед созданием нового проекта установите Node.js.

Для создания проекта на Vue выполните следующую команду:

npm create vue@latest

Эта команда устанавливает и запускает create-vue — официальный инструмент для создания проектов на Vue. Подробнее см. Vue.js Quick Start.

Назовём проект my-vue-spreadsheet-app.

Установка зависимостей​

Перейдите в директорию приложения:

cd my-vue-spreadsheet-app

Установите зависимости и запустите сервер разработки. Для этого используйте менеджер пакетов:

  • если вы используете yarn, выполните следующие команды:
yarn
yarn start // или yarn dev
  • если вы используете npm, выполните следующие команды:
npm install
npm run dev

Приложение должно запуститься на localhost (например, http://localhost:3000).

Создание Spreadsheet​

Теперь нужно получить исходный код DHTMLX Spreadsheet. Сначала остановите приложение и установите пакет Spreadsheet.

Шаг 1. Установка пакета​

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

Шаг 2. Создание компонента​

Теперь нужно создать компонент Vue для добавления Spreadsheet в приложение. Создайте новый файл в директории src/components/ и назовите его Spreadsheet.vue.

Импорт исходных файлов​

Откройте файл Spreadsheet.vue и импортируйте исходные файлы Spreadsheet. Обратите внимание:

  • если вы используете PRO-версию и устанавливаете пакет Spreadsheet из локальной папки, пути импорта выглядят следующим образом:
Spreadsheet.vue
<script>
import { Spreadsheet } from 'dhx-spreadsheet-package';
import 'dhx-spreadsheet-package/codebase/spreadsheet.css';
</script>

Обратите внимание, что в зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что вы импортируете CSS-файл как spreadsheet.min.css.

  • если вы используете ознакомительную версию Spreadsheet, укажите следующие пути:
Spreadsheet.vue
<script>
import { Spreadsheet } from '@dhx/trial-spreadsheet';
import '@dhx/trial-spreadsheet/codebase/spreadsheet.min.css';
</script>

В этом руководстве показано, как настроить ознакомительную версию Spreadsheet.

Задание контейнера и добавление Spreadsheet​

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

Spreadsheet.vue
<script>
import { Spreadsheet } from "@dhx/trial-spreadsheet";
import "@dhx/trial-spreadsheet/codebase/spreadsheet.min.css";

export default {
    mounted() {
        // инициализация компонента Spreadsheet
        this.spreadsheet = new Spreadsheet(this.$refs.container, {});
    },

    unmounted() {
        this.spreadsheet.destructor(); // уничтожение Spreadsheet
    }
};
</script>

<template>
    <div ref="container" class="widget"></div>
</template>

Добавление стилей​

Для корректного отображения Spreadsheet необходимо задать важные стили для Spreadsheet и его контейнера в главном CSS-файле проекта:

main.css
/* стили для начальной страницы */
html,
body,
#app { /* убедитесь, что используете корневой контейнер #app */
    height: 100%;
    padding: 0;
    margin: 0;
}

/* стили для контейнера Spreadsheet */
.widget {
    height: 100%;
}

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

Чтобы добавить данные в Spreadsheet, необходимо подготовить набор данных. Создайте файл data.js в директории src/ и добавьте в него данные:

data.js
export function getData() {
    return {
        styles: {
            bold: {
                "font-weight": "bold"
            },
            right: {
                "justify-content": "flex-end",
                "text-align": "right"
            }
        },
        data: [
            { cell: "a1", value: "Country", css:"bold" },
            { cell: "b1", value: "Product", css:"bold" },
            { cell: "c1", value: "Price", css:"right bold" },
            { cell: "d1", value: "Amount", css:"right bold" },
            { cell: "e1", value: "Total Price", css:"right bold" },

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

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

            { cell: "a4", value: "Peru" },
            { cell: "b4", value: "Grapes" },
            { cell: "c4", value: 7.69, format: "currency" },
            { cell: "d4", value: 740 },
            { cell: "e4", value: 5690.6, format: "currency" },

            // ещё ячейки с данными
        ]
    }
}

Затем откройте файл App.vue, импортируйте данные и инициализируйте их с помощью внутреннего метода data(). После этого можно передать данные в созданный компонент <Spreadsheet/> в виде props:

App.vue
<script>
import Spreadsheet from "./components/Spreadsheet.vue";
import { getData } from "./data";

export default {
    components: { Spreadsheet },
    data() {
        return { data: getData() };
    }
};
</script>

<template>
    <Spreadsheet :data="data" />
</template>

Перейдите в файл Spreadsheet.vue и примените переданные props к Spreadsheet с помощью метода parse():

Spreadsheet.vue
<script>
import { Spreadsheet } from "@dhx/trial-spreadsheet";
import "@dhx/trial-spreadsheet/codebase/spreadsheet.min.css";

export default {
    props: ["data"],

    mounted() {
        this.spreadsheet = new Spreadsheet(this.$refs.container, {});
        this.spreadsheet.parse(this.data);
    },

    unmounted() {
        this.spreadsheet.destructor();
    }
};
</script>

<template>
    <div ref="container" class="widget"></div>
</template>

Компонент Spreadsheet готов к использованию. При добавлении элемента на страницу Spreadsheet инициализируется с данными. Вы также можете передать необходимые параметры конфигурации. Полный список доступных свойств см. в документации API Spreadsheet.

Обработка событий​

Когда пользователь выполняет действие в Spreadsheet, виджет вызывает событие. Вы можете использовать эти события для обнаружения действия и выполнения нужного кода. См. полный список событий.

Откройте Spreadsheet.vue и дополните метод mounted():

Spreadsheet.vue
<script>
// ...
export default {
    // ...
    mounted: function() {
        this.spreadsheet = new Spreadsheet(this.$refs.container, {});

        this.spreadsheet.events.on("afterFocusSet", function(cell){
            console.log("Фокус установлен на ячейке");
            console.log(cell);
        });
    }
    //...
}   
</script>

//...

После этого можно запустить приложение и увидеть Spreadsheet с данными на странице.

DHTMLX Spreadsheet, инициализированный с примером данных в приложении Vue 3

Теперь вы знаете, как интегрировать DHTMLX Spreadsheet с Vue. Вы можете настроить код в соответствии со своими требованиями. Финальный пример можно найти на GitHub.

Need more help?Contact Support