KingTable
1.0.0
Библиотека административных таблиц, способных строиться самостоятельно на основе их входных данных. Поддерживает нумерацию страниц на стороне клиента и сервера; поиск на стороне клиента и сервера; просмотры пользовательских фильтров; автоматическое меню для скрытия столбцов и поддержки пользовательских инструментов. Функция экспорта на стороне клиента в форматы: csv, json, xml, Excel xlsx (с использованием плагина).
Следующие демо-версии доступны в Интернете:
Обратите внимание, как фильтры автоматически сохраняются при обновлении страницы. Например, используя функцию поиска или изменив страницу в одной из демонстрационных версий HTML, а затем нажав F5. При поиске обратите внимание, что алгоритм поиска на стороне клиента также сортирует результаты по релевантности (количество вхождений, порядок свойств, генерирующих совпадение).
Примечание: все эти демонстрации представляют собой фиксированные таблицы : таблицы, в которых вся информация загружается в память, разбивается на страницы и фильтруется на стороне клиента. Чтобы увидеть примеры таблиц, разбитых на страницы с использованием запросов AJAX (на стороне сервера), см. специальную документацию и сервер разработки, представленные в репозитории.
Библиотеку KingTable можно установить с помощью npm.
npm install kingtableЗатем модули можно импортировать с использованием синтаксиса CommonJS:
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )Или синтаксис импорта ES6:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" Библиотеку KingTable можно использовать, загружая и используя файлы дистрибутива в папке dist .
< script src =" kingtable.js " > </ script > Предыдущая версия библиотеки KingTable доступна по адресу: https://github.com/RobertoPrevato/jQuery-KingTable.
Обратитесь к странице вики. Полный список возможных опций доступен на специальной странице опций.
Ниже приведена таблица со списком функций, добавленных в KingTable 2.0.
| Особенность | Описание |
|---|---|
| Исходный код ES6 | Исходный код ES6, библиотека перенесена в ES5 для распространения. |
| Исходный код, протестированный на модуль | Исходный код интегрирован с задачами Gulp, Karma, Jasmine для модульных тестов. Более 300 тестов – их еще предстоит увеличить! |
| Удалены зависимости | Удалена зависимость от jQuery, Lodash, I.js, R.js. |
| Улучшенные исключения | Исключения включают ссылку на вики GitHub с подробными инструкциями. |
| Улучшена логика получения данных. | Позволяет выбирать между методом HTTP GET (фильтры в строке запроса) или методом HTTP POST (фильтры как данные JSON POST). |
| LRU-кэш | Наименее недавно используемый механизм кэширования для кэширования последних n страниц с помощью фильтров, чтобы уменьшить количество запросов AJAX. |
| Логика получения данных таблицы | Позволяет определить функции, которые возвращают данные, необходимые для отображения самой таблицы (например, словари для представлений пользовательских фильтров). |
| Кэширование фильтров | Фильтры для каждой таблицы кэшируются в хранилище на стороне клиента (настраиваемое), поэтому они сохраняются при обновлении страницы. |
| Улучшена сортировка CS. | Строки, которые можно сортировать как числа (например, «25%», «25,40 евро», «217°»), при сортировке автоматически анализируются как числа. |
| Улучшена сортировка CS. | Сортировка на стороне клиента по нескольким свойствам. |
| Улучшен поиск CS. | Улучшена функция поиска на стороне клиента: поиск работает в строковых представлениях дат, чисел и других форматированных строк, зависящих от региональных параметров. |
| Улучшена поддержка обработчиков событий. | Пользовательские обработчики событий автоматически получают выбранный элемент в качестве параметра, если это применимо. |
| Улучшена поддержка пользовательских кнопок. | Теперь можно настроить дополнительные поля (например, кнопки), которые будут отображаться для каждого элемента. |
| Улучшенная поддержка других носителей. | Поддержка консольных приложений NodeJS и рендеринга HTML-таблиц для тел электронных писем, отправленных с помощью NodeJS. |
Библиотека KingTable реализует два режима работы:
И поддерживает как оптимизированные, так и простые коллекции. Дополнительную информацию можно найти на специальной вики-странице.
Фиксированная таблица отображает коллекцию, которая не требует разбиения на страницы на стороне сервера, но может получить преимущества от разбиения на страницы на стороне клиента. При работе над приложениями часто приходится иметь дело с коллекциями, которые не предназначены для увеличения с течением времени и имеют небольшой размер. Например, таблица категорий на сайте электронной коммерции для продажи одежды или таблица ролей пользователей в большинстве приложений. В этих случаях имеет смысл возвращать клиентам целые коллекции. Есть два способа определить фиксированную таблицу KingTable:
var table = new KingTable ( {
data : [ { ... } , { ... } , { ... } ]
} ) ;
//or... code the server side to return an array of items (instead of an object describing a paginated set of results)
var table = new KingTable ( {
element : document . getElementById ( "my-table" ) ,
url : "/api/categories"
} ) ;Фиксированные таблицы выполняют поиск и нумерацию страниц на стороне клиента.
Обычная таблица — это таблица, отображающая коллекцию, требующую разбиения на страницы на стороне сервера, поскольку она должна расти с течением времени. Это верно в большинстве случаев, например, таблицы продуктов и клиентов на веб-сайте электронной коммерции.
var table = new KingTable ( {
url : "/api/profiles"
} ) ;При получении ответа AJAX обычная таблица ожидает получить следующую структуру:
{
subset : [ array ] , // array of items that respect the given filters
total : [ number ] // the total count of items that respect the given filters; excluding the pagination: for example 13000
} Библиотека KingTable включает в себя ряд функций, повышающих удобство использования как для конечного пользователя, так и для программистов, использующих библиотеку:
sessionStorage , localStorage или совместимый объект) и сохраняются при обновлении страницы — фильтры собираются по URL-адресу и, если возможно, идентификатору таблицы.Для получения дополнительной информации обратитесь к специальной вики-странице.
Для получения полной информации обратитесь к специальной вики-странице. Библиотека KingTable включает логику для реализации локализации на стороне клиента, которая используется для отображения собственных имен кнопок (обновить, номер страницы, результатов на странице и т. д.).
Пожалуйста, обратитесь к специальной вики-странице за инструкциями по интеграции с вашим проектом и серверным кодом.
