Ввод данных может быть утомительной и трудоемкой задачей, особенно при работе с большими объемами данных в формате Excel или CSV. Ручное копирование и вставка данных ячейка за ячейкой может быть неэффективным и подверженным ошибкам. Однако есть удобное решение под названием CSV Paster. В этом сообщении блога мы рассмотрим библиотеку CSV Paster, которая позволяет легко вставлять данные Excel или CSV в таблицу HTML. Мы расскажем о его функциях, процессе установки, инструкциях по использованию и настраиваемых событиях, расширяющих его функциональность.

Возможности CSV Paster:
1.Поддержка множественного ввода: CSV Paster поддерживает различные типы ввода, такие как обычные поля ввода, флажки, переключатели и выберите раскрывающиеся списки. Такая гибкость позволяет вставлять данные в различные типы элементов ввода в таблице HTML.

2. Простая установка. Вы можете быстро установить CSV Paster с помощью менеджеров пакетов npm или Yarn. Просто запустите одну команду, и библиотека будет готова к использованию в вашем проекте.

3. Конфигурация заголовка. Чтобы сопоставить вставленные данные с правильными столбцами таблицы, необходимо добавить атрибут 'data-header' в заголовки таблицы. Каждый заголовок должен соответствовать ключу объекта в результирующем массиве данных. Это позволяет CSV Paster отправлять событие pasteComplete, сообщая о последних изменениях в данных таблицы.

4. Пользовательские классы для управления: CSV Paster предоставляет дополнительные классы для улучшения контроля над процессом вставки. Вы можете использовать класс 'skip-paste', чтобы исключить влияние операции вставки на определенные элементы. Класс watch позволяет отслеживать обновленные строки, гарантируя, что вы зафиксируете изменения, внесенные во время последней вставки.

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

1.Установите библиотеку. Запустите соответствующую команду установки в зависимости от вашего менеджера пакетов, либо npm, либо Yarn.

# Using npm
npm i csv-paster
# Using Yarn
yarn add csv-paster

2. Добавить импорт библиотеки: включите оператор импорта для CSV Paster в свой проект.

// Importing CSV Paster
import "csv-paster/csv-paster";

3. Настройте таблицу HTML: добавьте атрибут 'id' к элементу таблицы и установите для него значение 'csv'. Кроме того, добавьте атрибут data-header в заголовки таблиц, сопоставив их с соответствующими ключами объекта.

<thead class="bg-warning">
   <tr>
      <th data-header="barcode">Barcode</th>
      <th data-header="product">Product</th>
      <th data-header="unit">Unit</th>
      <th data-header="quantity">Quantity</th>
      <th data-header="rate">Rate</th>
      <th data-header="Discount">Discount</th>
   </tr>
</thead>
<tbody id="csv">
// cloning the rows
</tbody>

4. Использование настраиваемых событий: CSV Paster предоставляет два настраиваемых события. Событие 'onRows' запускается, когда пользователи вставляют содержимое CSV в таблицу, что позволяет вам обрабатывать строки вручную. Событие 'pasteComplete' предоставляет последние изменения, сделанные во время операции вставки. Чтобы отслеживать эти изменения, добавьте к соответствующим элементам класс watch.

Настроенный ответ JSON от pasteComplete

[
   {
      "barcode": "90239209302",
      "product": "1",
      "unit": "Pcs",
      "quantity": "10",
      "rate": "150",
      "Discount": "30"
   }
]
const __ = document.querySelector.bind(document);
const tableElem = __('#csv');
document.addEventListener("DOMContentLoaded", cloneRow);
// This event gives the row count of the pasting item, so that we can manage the unavailable rows like below.
tableElem.addEventListener("onRows", async (ev) => {
   for (let i = 0; i < ev.detail; i++) {
      cloneRow();
   }
});
// This event gives the latest changed items, which are indicated by the "watch" class.
tableElem.addEventListener("pasteComplete", (ev) => {
   console.log(ev.detail);
});
function cloneRow() {
   const rowTemplate = __("#rowTemplate");
   const tbody = __("tbody");
   const row = rowTemplate.content.cloneNode(true);
   tbody.appendChild(row);
}

Заключение.
CSV Paster — это мощная библиотека, которая упрощает процесс вставки данных Excel или CSV в таблицы HTML. Используя его функции, вы можете улучшить рабочие процессы ввода данных и значительно сэкономить время и усилия. Благодаря поддержке нескольких типов ввода, простой установке и настраиваемым событиям CSV Paster обеспечивает удобство работы с данными в табличном формате. Начните использовать CSV Paster в своих проектах уже сегодня и оптимизируйте процессы ввода данных.

Живой пример:
Вы можете найти живой пример CSV Paster в действии по следующей ссылке: Демонстрация CSV Paster

Для получения более подробной информации и установки пакета вы можете обратиться к официальному пакету CSV Paster на npm: CSV Paster на npm