logo

[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()
    })
)