Общие сведения

Компонент табличного документа предназначен для использования в двух основных режимах:

1. Отображение данных - может применяться для вывода отчетов и первичных печатных форм документов
2. Отображение и ввод данных - предназначен для организации сбора информации по заданным формам

Библиотека состоит из двух основных частей:

1. Компонент для отображения и связанных с ним компонентов для ввода данных
2. Класс, позволяющий выполнять различные операции над документом, программно изменять его, работать с шаблонами документа, выполнять операции сериализации/десериализации и др.

Функциональные возможности библиотеки

В Табличном Документе, реализованы следующие возможности:

1. Поддержка многостраничности (каждая страница отображается в виде отдельной вкладки)
2. Форматирование текста в ячейках (шрифт, размер, цвет)
3. Форматирование ячеек (ширина, высота строк и столбцов, рамки различного стиля и толщины)
4. Редактирование ячеек и защита их от редактирования
5. Закрепление прокрутки столбцов и строк
6. Поддержка различных различных типов (Число, Строка, Дата).
7. Форматирование вывода текста, дат, чисел в ячейках
8. Формулы аналогичные по возможностям и синтаксису Excel. Реализованные на базе библиотеки A Fast Excel Formula Parser & Evaluator
9. Группировки строк и столбцов
10. Примечания к ячейкам
11. Вставка изображений в ячейки в svg формате
12. Валидация данных в ячейке при помощи встраиваемого кода на JS
13. Встраиваемые макросы на JS вызываемые по ссылкам в ячейках. Позволяющие реализовать функционал интерактивного добавления/удаления строк и разделов пользователем
14. Режим вывода на печать
15. Десериализация данных в формате JSON c использованием шаблона. Позволяет без программирование по шаблону и декларативному описанию преобразовать данные в многостраничный документ как для просмотра (вывода отчета), так и для сбора данных, с возможностью последующей сериализации в исходном формате
16. Чтение/Запись табличного документа с форматированием в собственном формате на основе JSON

Системные требования

Поддержка браузерами

Текущая версия библиотеки протестирована и поддерживается следующими браузерами:

• Chome "90.0.4430.93" и выше;
• Firefox "88.0.1";
• Opera "76.0.4017.123";
• Yandex browser "21.3.3".

*Для поддержки некоторых функций, ваш проект должен обеспечивать https соединение

Зависимости

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

• core-js "3.6.5"
• fast-formula-parser "1.0.19"
• vue "2.6.11"
• vue-virtual-scroll-list "2.3.2"
• vuetify "2.4.0"
• vuex "3.4.0"

Состав библиотеки

В состав библиотеки входят следующие модули:

Установка

Перед установкой библиотеки, необходимо установить все зависимости указанные в разделе "Системные требования".

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

npm install di-at-grid --save

Разместите следующие компоненты в файле шаблона vue:

<template>
  <spread-sheet-editing ref="SpreadSheetEditDOM"
                        :cell="editableCell"
                        :cell-type="editableCellType"
                        :cell-element="editableCellElement"
                        :edit-event="editableCellEvent"
                        :is-label="isShowEditableLabel"
                        @editing:accept="acceptEditingCell"
                        @editing:cancel="cancelEditingCell"></spread-sheet-editing>
    <div class="sheets__nav">
      <v-tabs v-model="currentList"
              align-with-title>
        <v-tab v-for="list in lists"
               :key="list.name"
               class="nav-list"
               active-class="nav-list_active">{{ list.title }}</v-tab>
      </v-tabs>
    </div>
    <spread-sheet ref="SpreadSheet"
                  v-bind="spreadSheetProps"
                  :isOuterBorderOff="true"
                  :delta-height-virtual-list="30"
                  :is-show-title="isShowTitle"
                  :is-show-group="isShowGroup"
                  table-layout-padding="0px 4px 4px 4px"
                  @click:cell="evtClickCell"
                  @dblclick:cell="evtDblClickCell"
                  @keydown:cell="evtKeydownCell"
                  @scroll:body="scrollBody"></spread-sheet>
<template>

Импортируйте компоненты и логику взаимодействия на страницу где размещены визуальные компоненты

import SpreadSheet from 'di-at-grid/src/components/SpreadSheet/SpreadSheet.vue';
import SpreadSheetEditing from 'di-at-grid/src/components/SpreadSheetEditing/SpreadSheetEditing.vue';
import SpreadSheetLogic from 'di-at-grid/src/logics/SpreadSheetLogic';

export default {
  componens: {
    SpreadSheet,
    SpreadSheetEditing,
  },
  data() {
    return {
      ...SpreadSheetLogic.data,
    };
  },
  computed: {
    ...SpreadSheetLogic.computed,
  },
  methods: {
    ...SpreadSheetLogic.methods,
  },
};

Формат документа

Документ описывается в JSON формате.

На верхнем уровне содержатся следующие блоки:

Блок images, имена атрибутов соответствуют именам изображений, значения атрибутов содержат изображения в SVG формате:

{
	"imageName": "svgFormat"
}

Блок namedAreas с набором атрибутов:

Блок scripts, имена атрибутов соответствуют именам скриптов, значениями являются инструкции JS:

"scripts": {
	"scriptName": "scriptBody"
}

Блок sheets, имена атрибутов соответствуют именам листов, значениями являются блоки, содержащие следующие атрибуты:

Блок cells, имена атрибутов соответствуют именам ячеек, значениями являются блоки, содержащие следующие атрибуты:

Блок columns, имена атрибутов соответствуют именам колонок, значениями являются блоки, содержащие следующие атрибуты:

Блок rows, имена атрибутов соответствуют именам строк, значениями являются блоки, содержащие следующие атрибуты:

Блок styles, имена атрибутов соответствуют именам стилей, значениями являются блоки, содержащие следующие атрибуты:

*Значения атрибутов совпадают со значениями CSS свойств