GridManager [一套代码多框架运行]

快速且灵活地为Table标签创建实例，赋予其生命力。

Преимущества

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

Интегрирована базовая библиотека jTool, которая предоставляет кэширование DOM.

Поддерживает использование в чистом JavaScript, jQuery, Angular 1.x, Vue и React, позволяя одной и той же программе работать с различными фреймворками.

В эпоху множества фреймворков, это решение помогает фронтенд-разработчикам делать больше с меньшим количеством API.## Реализованные функции

Функция	Описание
Изменение ширины	Ширина столбцов таблицы может быть изменена путём перетаскивания
Перемещение столбца	Позицию столбцов можно изменять путём перетаскивания
Конфигурация столбцов	Возможность скрывать или показывать столбцы через конфигурацию
Закрепление строки наверху	При наличии видимого пространства, строка названий будет закреплена сверху
Закрепление столбца	Возможность закрепления одного или нескольких столбцов слева или справа
Сортировка	Одиночная или комбинированная сортировка данных таблицы
Пагинация	AJAX-пагинация таблицы, включая выбор количества записей на странице и переход к конкретной странице
Запоминание пользовательских настроек	Запоминание действий пользователя, таких как ширина столбцов, порядок столбцов, состояние видимости столбцов и количество записей на странице
Автоматическое пронумерование	Генерация автоматического номера для каждой записи
Выбор всех	Создание кнопки выбора всех записей
Экспорт	Экспорт статических данных, динамических данных и выбранных данных
Печать	Печать текущей страницы
Контекстное меню	Удобное выполнение часто используемых операций через контекстное меню
Фильтрация	Фильтрация данных для быстрого поиска
Дерево таблицы	Быстрая реализация структуры дерева таблицы через конфигурацию
Перемещение строк	Быстрая реализация перемещения строк через конфигурацию
Вложенные заголовки	Поддержка создания сложных таблиц с несколькими уровнями заголовков

Установка

npm install gridmanager --save
```### Директория установочных файлов и описание
- index.css `Файл стилей, используемый как в нативной реализации, так и в различных фреймворках`
- index.js `JavaScript файл для нативной реализации`
- vue2 `JavaScript файл для использования с Vue 2`
- react `JavaScript файл для использования с React`
- angular-1.x.js `JavaScript файл для использования с Angular 1.x`

## Включение
### ES6+

import 'gridmanager/index.css'; // Стили для различных фреймворков import GridManager from 'gridmanager'; // Нативный способ импорта import GridManager from 'gridmanager/vue2'; // Способ импорта для Vue 2 import GridManager from 'gridmanager/react'; // Способ импорта для React import GridManager from 'gridmanager/angular-1.x'; // Способ импорта для Angular 1.x


### ES5

API

Примеры

Версии для фреймворков

Примеры использования

Со стандартными настройками

<table></table>

document.querySelector('table').GM({
    gridManagerName: 'demo-baseCode',
    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajaxType: 'POST',
    query: {pluginId: 1},
    columnData: [
        {
            key: 'name',
            text: 'Название'
        },
        {
            key: 'info',
            text: 'Информация'
        },
        {
            key: 'url',
            text: 'URL'
        }
    ]
});
```### Со страницами
```html
<table></table>

document.querySelector('table').GM({
	gridManagerName: 'demo-ajaxPageCode',
	ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
	ajaxType: 'POST',
	query: {pluginId: 1},
	supportAjaxPage: true,
	columnData: [
		{
			key: 'name',
			text: 'Название'
		},
		{
			key: 'info',
			text: 'Информация'
		},
		{
			key: 'url',
			text: 'URL'
		}
	]
});

Вызов публичных методов

// Обновление
GM.refreshGrid('demo-ajaxPageCode');

// Обновление условий запроса
GM.setQuery('demo-ajaxPageCode', {name: 'baukh'});

Дополнительная информация доступна по адресу API

Формат данных

Это стандартный формат. Если возвращаемый формат отличается, его можно изменить с помощью параметров или responseHandler. Подробнее см. API

{
	"data": [
		{
			"name": "baukh",
			"age": "28",
			"createDate": "2015-03-12",
			"info": "фронтенд-разработчик",
			"operation": "редактирование"
		},
		{
			"name": "baukh",
			"age": "28",
			"createDate": "2015-03-12",
			"info": "фронтенд-разработчик",
			"operation": "редактирование"
		},
		{
			"name": "baukh",
			"age": "28",
			"createDate": "2015-03-12",
			"info": "фронтенд-разработчик",
			"operation": "редактирование"
		}
	],
	"totals": 1682
}