Документация
Gridans - Data Grid компонент корпоративного уровня
### Быстрый старт Установка через npm ```plaintext npm i gridansjs ``` Подключение к проекту ```javascript import Gridans from 'gridansjs'; import '../node_modules/gridansjs/Gridans.css'; ``` Определение конфигурации ```javascript let configDoc = { cols: [ { name: 'id', caption: 'ID', type: 'String', width: 100 },//mandatory column { name: 'status', caption: 'STATUS', type: 'Lineawesomefont', width: 10 }, { name: 'name', caption: 'DOCUMENT NAME', type: 'String', width: 200 }, { name: 'url', caption: 'URL', type: 'Url', width: 100 }, { name: 'date', caption: 'DOCUMENT DATE', type: 'Date', width: 100 }, { name: 'counterparty', caption: 'COUNTERPARTY', type: 'String', width: 100, edt: true },//with extend data type { name: 'currency', caption: 'CURRENCY', type: 'String', width: 100, edt: true }, { name: 'amount', caption: 'AMOUNT', type: 'Numeric', width: 100 }, ], options: { checkboxes: false, simpleMode: false,//sort by table's level columnResizable: true, columnReorderable: true, columnSortable: true, sortSettings: [{ columnName: 'counterparty', //default sorting column name with sipmleSorting flag isAsc: true }], columnHighlights: [ { columnName: 'status', colorClass: 'highlight-yellow' }, { columnName: 'counterparty', colorClass: 'highlight-red' }, // { columnName: 'email', colorClass: 'highlight-green' } ], actionButtons:[ { id: 'insert', caption: 'Create', iconHTML: '<i class="las la-plus"></i>' }, { id: 'edit', caption: 'Edit', iconHTML: '<i class="las la-pen"></i>' }, { id: 'save', caption: 'Save', iconHTML: '<i class="las la-save"></i>' }, { id: 'delete', caption: 'Delete', iconHTML: '<i class="las la-trash-alt"></i>' }, ] } } ``` Определение данных ```javascript let data = [//Можно использовать различные дополнительные колонки, например, для хранения reference key для связывания таблиц { id: '2024-08-01R01',url:'http://google.com', status: '<i class="las la-check-circle"></i>', name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-08-01', amount: '5000', currency: 'SDR' },//iso date format { id: '2024-08-01R02',url:'http://google.com', status: '<i class="las la-check-circle"></i>', name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-22', amount: '6000', currency: 'SDR' }, { id: '2024-08-01R03',url:'http://google.com', status:'<i class="las la-check-circle"></i>',name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-22', amount: '7000', currency: 'SDR' }, { id: '2024-08-01R04',url:'http://google.com', status:'<i class="las la-check-circle"></i>',name: 'Goods Recieve', counterparty: 'Good Goods LLC', date: '2024-09-23', amount: '8000', currency: 'SDR' }, ] ``` Определение HTML контейнера ```html <div id="myTable" style={{ height: '500px' }}> </div> ``` Создание объекта Gridans ```javascript var gridans = new Gridans(configDoc, data, 'myTable');//conf, data, containerId ``` ### Конфигурация <table><tbody><tr><td><p>cols</p><p>(Колонки)</p></td><td>Array of Objects</td><td><ul><li><code>name </code>: String - имя колонки для поиска</li><li><code>caption </code>: String - надпись колонки в заголовке</li><li><code>type </code>: String - тип колонки для сортировки(<strong>String, Numeric, Date, DateTime, Lineawesomefont, Url</strong>)</li><li><code>width </code>: Integer - ширина колонки в пикселях(для пропорции при растягивании таблицы)</li><li><code>edt </code>: Boolean - Extended Data Type(из поля можно перейти к основной таблице - появляется “педалька”)</li></ul><p><strong>Примечание </strong>: Колонка с именем <code>id</code> - обязательная</p></td></tr><tr><td><p>options</p><p>(Опции)</p></td><td>Object</td><td><ul><li><code>checkboxes</code> : Boolean - Включает мультивыбор строк галочками. По умолчанию <code>false</code>.</li><li><code>simpleMode</code> : Boolean - 1.Включает сортировку данных на уровне таблицы. 2.Включает скроллинг таблицы при верхнем и нижнем положении кнопки скролла. При ложном значении. При значении <code>false </code>сортировкой и скроллом в верхнем и нижнем положении управляет разработчик. По умолчанию <code>true</code>.</li><li><code>columnResizable</code>: Boolean - Включает возможность изменять ширину колонки. По умолчанию <code>true</code>.</li><li><code>columnReorderable</code>: Boolean - Включает возможность менять порядок колонок. По умолчанию <code>true</code>.</li><li><code>columnSortable</code>: Boolean - Включает возможность сортировать колонки. По умолчанию <code>true</code>.</li><li><code>sortSettings</code>: Array of Objects - Сортировка по умолчанию и настройка текущей сортировки. Поддерживается только одно значение массива. <code>columnName</code>:String - Имя колонки, <code>isAsc</code>:Boolean - Включает сортировку по возрастанию, иначе по убыванию. По умолчанию <code>{columnName: ‘id’, isAsc: true}.</code></li><li><code>columnHighlights</code>:Array of Objects - Подсветка колонок. <code>columnName</code>:String - Имя колонки, <code>colorClass</code>:String - Цвет колонки(<strong>highlight-yellow</strong>, <strong>highlight-red</strong>, <strong>highlight-green</strong>). По умолчанию <code>[]</code>.</li><li><code>actionButtons</code>: Array of Objects - Добавляет кнопки в панель действий над таблицей. <code>id</code>:String - Код кнопки, <code>caption</code>:String - Заголовок кнопки, <code>iconHTML</code>: String - код для вставки иконки шрифта Lineawesomefont.По умолчанию <code>[]</code>.</li></ul></td></tr></tbody></table> ### Особенности реализации * Выделение строки по умолчанию - при прорисовки таблицы выделяется первая строка таблицы * Прорисовка таблицы срабатывает : 1. При создании таблицы, 2. При сортировке 3. При установки новой конфигурации 4. При установки новых данных * Выделение строки мышью - **Левая кнопка мыши** - только в режиме без мультивыбора. **Правая кнопка мыши** - в обоих режимах. * Контекстное меню на ячейках таблицы не работает, но выдается событие `gridansContextMenu` * Скроллинг таблицы - горизонтальный и вертикальный работают в трех положениях(крайние и середина - переходит автоматически). Для вертикального скроллинга - установка в верхнее положение вызывает событие `lazyload_first` , установка в нижнее положение вызывает событие `lazyload_last`. Если при этом установлена опция конфигурации `simpleMode` - то происходит скроллирование таблицы максимально вверх и максимально вниз соответственно. Горизонтальный скроллинг работает без событий как в режиме `simpleMode` . При вертикальном скроллировании максимально вверх вызывается событие `lazyload_top`, максимально вниз - `lazyload_bottom` ### API getters/setters * `newData` - устанавливает новые данные * `newConf` - устанавливает новую конфигурацию * `currData` - получает текущие данные * `currConf` - получает текущую конфигурацию Методы * `getDataLength()` - возвращает количество строк данных, загруженных в таблицу * `selectRow(id)` - выделяет строку и позиционирует на ней. Если в загруженных данных не находится id, то в консоль выдается ошибка. * `isSelectedAllRows()` - возвращает есть ли режим выделения всех строк таблицы * `getSelectedRows()` - возвращает массив выделенных строк * `lazyLoadDataBottom(additionalData)` - добавляет новую порцию данных снизу * `lazyLoadDataTop(additionalData)` - добавляет новую порцию данных сверху События * `lazyload_bottom` - загрузка новой порции данных снизу. event.detail = {tableName} * `lazyload_top` - загрузка новой порции данных сверху. event.detail = {tableName} * `lazyload_first` - загрузка первой порции данных. event.detail = {tableName} * `lazyload_last` - загрузка последней порции данных. event.detail = {tableName} * `edt_click` - событие нажатия на “педальку” в ячейке. event.detail = {tableName, columnName, rowId} * `sorting` - событие сортировки. event.detail = {tableName, columnName, isAsk} * `SelectedSingleRow` - событие выделения строки. event.detail = {tableName,selectRow(для мульти выделения строк - возвращает первую выделенную строку)} * `RowDblClick` - событие при двойном клике на строке event.detail = {tableName,selectRow} * `actionButtonClick` - событие нажатия на кнопку действий. event.detail = {tableName,action} * `gridansContextMenu` - событие вызова контекстного меню на ячейках таблицы event.detail = {tableName,selectRow(для мульти выделения строк - возвращает первую выделенную строку)} Типы данных * **String** - обычная строка * **Numeric** - любое число * **Date** - дата. Поддерживаются форматы ISO `YYYY-MM-DD` и EUR `DD.MM.YYYY` * **DateTime** - Дата и время. Поддерживаются форматы ISO `YYYY-MM-DDTHH:MM:SS` и EUR `DD.MM.YYYY HH:MM:SS` * **Url** - строка ссылки. Переводится в \<a/> * **Lineawesomefont** - иконочный шрифт. Строка - код иконки. Подробнее [здесь](https://icons8.com/line-awesome). ### Лицензия ©Коммерческая лицензия. Все права защищены. Gridans® Для частного использования и обучения - бесплатно. По всем вопросам приобретения лицензии на продукт - обращайтесь в Telegramm @andsoft80