[ELMA4] Таблица

Существуют разные варианты создания таблицы:

• Html.DynamicGrid;
• Html.Table – наследник DynamicGrid, но работает только с простым списком.

Динамическая таблица состоит из:

• источника данных;
• колонки (columns);
• различных настроек.

Методы для работы с таблицей

C#

Html.DynamicGrid – создание таблицы на странице со следующими параметрами:

• uniqueName – идентификатор таблицы;
• gridData – источник данных тип GridData.

Пример: на странице создайте таблицу с идентификатором "gridId" и двумя колонками: Наименование и Пользователь.

@(Html.DynamicGrid("gridId", Model))

Html.Table – создание простой таблицы на странице со следующими параметрами:

• uniqueName – идентификатор таблицы;
• source – источник данных тип IEnumerable.

Пример: на странице создайте таблицу с идентификатором "tableId" и двумя колонками: Наименование и Пользователь.

@(Html.Table("tableId", Model)
    .Columns(c =>
    {
        c.For(m => m.Name);
        c.For(m => m.User);
    })
)

Настройки таблицы:

• колонки / Columns;
• атрибуты строки / RowHtmlAttributes;
• сохранение состояния / SaveState;
• сортировка по умолчанию / DefaultSortExpression;
• возможность сортировки / Sortable;
• возможность кастомизации / Customizable;
• применение расширений / ApplyExtensions;
• отображение таблицы в виде карточки / UseCardGridTemplate;
• контент перед строкой / BeforeRowContent – используется в таблице-карточке.

Подробнее о колонках:

@(Html.DynamicGrid("gridId", Model)
        // колонки
        .Columns(c => { .. })
    )

Настройки колонки:

• заголовок / Header;
• кастомное отображение / Template;
• атрибуты / CellHtmlAttributes;
• ширина / Width.

Пример: на странице создайте таблицу с двумя колонками: Наименование и Пользователь.

 @(Html.DynamicGrid("gridId", Model)
        .Columns(c =>
        {
            c.For(m => m.Name);
            c.For(m => m.User);
        })
    )

JS

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

var grid = $("#" + gridId).data('tGrid');

Список функций, определенных в прототипе таблицы:

• AJAX и взаимодействие
  • ajaxRequest: function (additionalData)
  • ajaxOptions: function (options)
  • isAjax: function ()
  • showBusy: function ()
  • hideBusy: function ()
  • serverRequest: function ()
  • url: function (which)
• сортировка
  • sort: function (orderBy)
  • toggleOrder: function (column)
  • updateSorting: function ()
  • sortExpr: function ()
• работа с рядами
  • $rows: function ()
  • expandRow: function (tr)
  • collapseRow: function (tr)
• работа с колонками
  • $columns: function ()
  • columnFromTitle: function (title)
  • columnFromMember: function (member)
  • normalizeColumns: function ()
• работа со страницами
  • changePageSize: function (size)
  • pageTo: function (page)
  • updatePager: function ()
  • numericPager: function (pagerElement, currentPage, totalPages)
  • totalPages: function ()
  • firstItemInPage: function ()
  • lastItemInPage: function ()
  • sanitizePage: function (value)
• привязка элементов (внутренняя)
  • bindData: function (data, html, groups)
  • bindFooter: function()
  • bindTo: function (data)
  • rebind: function (args)
• обработчики событий
  • rowClick: function (e)
  • headerClick: function (e)
  • refreshClick: function (e, element)
  • pagerKeyDown: function (e)
  • pagerClick: function (e)

Изменение состояния:

• refreshGrid(id, callback, [additionalData]) – обновляет таблицу;
• applyFilterGrid(id, form, [params]) – применяет к таблице id фильтр с формой form, получает данные от сервера и по умолчанию переходит на первую страницу в таблице;
• doCommandGridRows(id, commandName, ids, url, data, container) – отправляет на сервер команду (в т. ч. кастомную – подробнее в Описание GridCommand) и загружает ответ в содержимое таблицы;
• doSortSelectByValue(data, attrSort) – сортирует исходный набор данных data по атрибуту attrSort и возвращает его.

Основные изменения в таблице в ELMA4 по сравнению с ELMA3

1. Добавлено свойство UseCardGridTemplate в настройках таблицы, которая позволяет отрисовать таблицу в виде карточки.

Пример:

@(Html.DynamicGrid("gridId", Model)
    .UseCardGridTemplate()
)

2. Добавлена настройка BeforeRowContent, позволяющая добавлять контент перед строкой.

Пример:

@(Html.DynamicGrid("gridId", Model)
    .UseCardGridTemplate()
    .BeforeRowContent(m => new List<string>
    {
        Html.ImageButton("#contant_menu.svg").ToHtmlString()
    })
)