Работа с таблицами

Описание компонента Таблица

Смотреть пример компонента Таблица

Руководство Создание таблицы по шагам

Компонент создания таблиц. Нюансы работы с таблицами 

Компонент Таблица позволяет вывести некие списковые данные в виде таблицы и манипулировать данными в таблице (добавление, редактирование, удаление, групповые операции и т.д.).

Не путайте таблицу базы данных и компонент Таблица. Они никак не связаны. При создании колонок компонента Таблица в структуре базы данных изменения не происходят (не создаются таблицы БД или колонки таблицы БД). 

Разметка

<div class="as-table" data-code="dashboardPanels" data-itemid="566"></div>

Описание data элементов разметки

  1. data-code - код таблицы 
  2. data-itemID- переданный в сниппете значение, которое можно передать в разметке сниппета (например, id категории). Если нужен параметр из url, то можно написать в фигурных скобках url-itemID

Описание data-* параметров по стилизации таблицы(с указанием значения по умолчанию): 

Примечание: для данных настроек вы можете их глобально установить в as.systemOptions.js через код вида "table.{code}", например:

{
"table.createBtnClass": "btn btn-danger"
}

Настройка хранимых процедур для таблицы

Основные хранимые процедуры getItems, updateField, deleteItem, fastCreate делаем через панель управления.
Крайне важно следовать общему стилю и виду шаблонных процедур (они имеют префикс crud_example_).

 

GetItems

Выдает следующие SELECT:

  1. Таблица с данными
  2. Количество строк
  3. Измененные параметры таблицы (заголовок Title, подсказка Subtitle, панель toolbarAdditional и др. см. ниже)
  4. Вывод столбцов подвала таблицы и дополнительных строк в шапке (isHead=1 для строки) (обычно это агрегирующие данные по таблице #result)
    Обязательно давайте название столбцам в этом запросе и указывайте их в том же порядке что и ваши столбцы в выводе
    ВАЖНО! Если это viewType=’gantt’ (Гант), 'chartbar' или ‘canban’ - то 4 запрос это данные во времени по элементам
  5. Настройки предустановленных фильтров (т.е. именные ссылки, которые одним щелчком устанавливают некий типовой фильтр, напр. Замороженные лиды)
  6. Вызов внешних действий (сентябрь 2022).
ALTER PROCEDURE [dbo].[crud_example_getItems]
	@filters CRUDFilterParameter READONLY,
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare   @ids TABLE (id int)

	-- filters...
	declare @filterName nvarchar(128)
	select @filterName = Value from @filters where [Key] = 'name'

	insert into @ids
	select id
	from as_menu
	where (isnull(@filterName, '')='' or name like '%'+@filterName+'%')

	-- SELECT 1
	select *
	/*
	example_data1
	*/
	from as_menu
	where id in (select id from @ids)
        /*сортировка
          ВАЖНО! Если мы сортируем по полю заданного типа то сортировка будет вестись
          именно по этому типу, например если мы включим сортировку по дате, но в поле
          попадает тип nvarchar, то сортировка будет идти именно по нему. Чтобы и
          избежать этого создаем дополнительно поле нужного типа только в процедуре
          (не выводим его), и вставляем его в выражение then */
	order by
		case when @sort = 'name' and @direction = 'down' then name end desc,
		case when @sort = 'name' and @direction = 'up' then name end asc
	OFFSET @PageSize * (@Page - 1) ROWS
	FETCH NEXT @PageSize ROWS ONLY;

	-- SELECT 2
	select count(*) from @ids

	-- SELECT 3
	/*Select  '' Title,
		'' ToolbarAdditional,
		'' GroupOperationsToolbar,
		'' EmptyText,
		'' FastCreateLinkText, '' FastCreateDialogHeader, '' FastCreateDialogPlaceholder,
		0 FastCreateSearch, 0 FastCreateTextarea,
		 0 HideTitleCount,
		 0 DisableCellTitle,
		 '10px' FontSize,
		 '{filterCode}' FilterMakeup,
		 1 InstantFilter,
		   */

	-- 4 SELECT Footer data or kanban/gantt data

       -- 5 SELECT - данные по предустановленным фильтрам.
       /*
         select * from (
      select 'Клиенты' Title, 'Текущие клиенты' Tooltip, 'clients' code, 'success' type, 'status=53,54' Filters, 1 Ord
      union
      select 'Лиды нетворк' Title, 'Потенциальные клиенты' Tooltip, 'leadsNetwork' code,  'info' type, 'Filter=1,2,3||Filter2=1,2,3||status=53||keepConnect=1' Filters, 2 Ord
      union
      select 'Замороженные лиды' Title, 'Те, что на долгой паузе' Tooltip, 'frozen' code,  'primary' type, 'status=53,54' Filters, 3 Ord
	) t1 order by t1.ord

       */

END

END
Нюансы по сортировке и фильтрации в GetItems 
  1. На вход в хранимую процедуру передается @filter - в нем содержатся все URL параметры и параметры фильтра as-crud
    Извлекаем их вышеуказанным способом и используем в первом запросе select
    Также в эту коллекцию попадаются все значения, передаваемые как data-параметр в разметку сниппета as-table 
Пример вызова параметра:
 declare @filterElementID int
 select @filterElementID = try_cast(Value as int) from @filters where [Key] = 'elementID'
 2. Сортировка в GetItems
select * from @result --параметры в настройках колонок таблицы: Сортировка-ДА
order by
   --каждый параметр указываем дважды, прямой и обратный порядок
   --в случае использования разметки HTML, сортировка должна идти по чистому
   --значению(hide_title)
   case when @sort = 'name' and @direction = 'down' then name end desc,
   case when @sort = 'name' and @direction = 'up' then name end asc,
   case when @sort = 'code' and @direction = 'down' then code end desc,
   case when @sort = 'code' and @direction = 'up' then code end asc
OFFSET @PageSize * (@Page - 1) ROWS
FETCH NEXT @PageSize ROWS ONLY;

Примечание:

Дополнительная настройка вывода ячеек в таблице

Есть набор псевдополей, которые позволяют расширить функционал основного поля. Если используем псевдополе, то ОБЯЗАТЕЛЬНО должно быть в таблице основное поле (сами по себе псевдополя без основного поля не используются). 
 
Псевдополя со специальными префиксами, чтобы улучшить вывод ячеек (дальше code1 - это название некой колонки таблицы): 
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
{
  "min": 0, "max": 100, "step":5,  // для числовых полей
  "placement": "top||bottom||left||right", // расположение всплывающего окна.
  "disabled": true // можно отключить редактирование поля для некоторых строк.
  "instant": true // для вывода поля редактирования прямо в таблице (только для text, textarea и select)
}

Если instant=true, то поле будет выводиться в виде элемента управления и изменение значения будет происходить при потере фокуса ввода.

Пример на демостенде - https://demo.web-automation.ru/list/watch/redaktirovanie-v-tablice-cherez-elementy-upravleniya-pryamo-v-tablice---68. Данная опция работает только для типов поля редактирования text, textarea, select.

Пример: 

-- in SELECT 1
select isnull(name, '') name,
    'some desc1' desc_name,
    'some data or control in substring' sub_name
from table1

Для Переключателей можно в этом параметре передать дополнительные настройки: on (текст Включено), off (текст Выключено), onsstyle (warning и т.д.), offstyle (secondary), size (small, mini, normal, large).

Специальные названия полей в SELECT 1, которые в целом влияют на строку таблицы: 

Варианты настройки editable_col1: 
select *, '{"disabled": '+iif(code1='newForm', 'false' , 'true')+'}'  editable_role
from #result
 
Также в разметке ячейки таблицы можно использовать разметку {edit-code1}, где code1 - код редактируемого поля. В этом случае вместо этой разметки будет выведено указанное поле. 
Пример и настройка поля - https://demo.web-automation.ru/list/watch/tablica---mnozhestov-redaktiruemykh-poley-v-odnoy-yacheyke---1141
 
Примечание:
Для псевдополей (desc_colName) не нужно создавать в таблице реальные поля. Они просто прописываются в выходном запросе SELECT 1 в GetItems.  

Пример
: Нам надо красить ячейки для колонки title (title - это код существующей колонки в таблице).

Для этого в GetItems  SELECT 1 добавляем вывод этого поля: ‘#f00’ backcolor_title

Дополнительные параметры настройки таблицы в GetItems SELECT 3
  1. ButtonSize - управляет размерами кнопок в тулбаре (варианты - sm, md, lg).
  2. CardGroupType - тип вывода карточек: deck (в 1 строку карточки), columns (разделение по колонкам),
    group (все карточки в 1 строку и выглядят как единая панель). В большинстве случаев подойдет columns.  Смотреть подробнее.
  3. ChangeFontSize - если 1, то вверху появляются кнпоки для изменения размера шрифта.
  4. Compact - если 1 то таблица будет сжатой с уменьшенными отступами.
  5. Collapse 0,1,2. Служит для сворачивания таблицы по названию. 0 - нет сворачивания. 1 - есть сворачивание, при загрузке показан в открытом виде. 2 - есть сворачивание, при загрузке свернут
  6. CollapseFilter 0,1,2. Служит для сворачивания фильтров по иконке рядом с названием. 0 - нет сворачивания. 1 - есть сворачивание, при загрузке показан в открытом виде. 2 - есть сворачивание, при загрузке свернут (иконку кнопки можно заменить через data-filterCollapseIcon="fas fa-filter" у сниппета). 
  7. DisableCellTitle - отключить подсказки у ячеек (дублируют название колонки и ее подсказку)
  8. DisableFrozenHeader - отключить для таблицы возможность показа шапки таблицы наверху при скроллинге (актуально когда есть несколько таблиц на странице либо есть вложенные таблицы)
  9. DisableSaveState - если 1, то состояние фильтра и сортировок не будет сохраняться при закрытии/перезагрузке страницы.
  10. DropdownPanel, DropdownPanelText - настройка выпадающей панели вверху рядом с названием таблицы. См. подробнее
  11. EditableMode - задает тип редактирования элемента. inline - внутри таблицы. popup - редактирование как малое всплывающее окошко
  12. EmptyText - текст, который отображается когда ничего не найдено.
  13. EnableExcelExport, EnablePrint, EnableClipboard - если 1, то появляются кнопки выгрузки таблицы в Excel, отправку на печать или копирование в буфер обмена ячеек таблицы (с разделением через \n и \t). Про стилизацию выгрузки Excel.
  14. FastCreate, Remove, Comments - включают (=1) возможность Быстрого добавления, Удаления, Комментария. Чтобы корректно работало, необходимо снять соответствующую настройку в форме параметров таблицы.
  15. FastCreateDialogDefaultValue - указание значение по умолчанию для поля в форме быстрого создания (для текстового поля, многострочного поля и списка). 
  16. FastCreateDialogHeader - заголовок диалогового окна Создать.
  17. FastCreateDialogPlaceholder - подсказка при создании в диалоговом окне Создать.
  18. FastCreateLinkText - текст ссылки Создать….
  19. FastCreateSearch - если true, то добавление будет работать как autocomplete список с поиском.
  20. FastCreateSelectCol - указываем колонку таблицы (в /tableCols) с типом редактирования Список. Быстрое добавление будет работать в виде элемента Список со значениями из процедуры dict этой колонки. 
  21. FastCreateTextarea - если true, то элементом добавления будет многострочное поле.
  22. FilterMakeup - разметка HTML для  фильтра. Фильтры колонок указываются здесь через {colCode}.
    (у колонки должен быть установлен тип данных фильтра).
  23. FilterOptions - настройка свойств фильтров через JSON.  
  24. FontSize - указать размер шрифта для таблицы (например 10px, 0.85em).
  25. FooterText - разметка, которая выводится под таблицей. 
  26. FrozenLeftCol - если 1, то левая колонка фиксируется на месте при скроллинге таблицы вправо (данная настройка может конфликтовать с подтаблицами, DisableFrozenHeader), для мобильных устройств она не используется. Подробнее...
  27. GanttScale, GanttNavigate, GanttItemForm, GanttItemFormTitle - настройки вывода диаграммы Ганта (см. отдельный раздел Ганта в таблицах).
  28. GroupOperationsToolbar - разметка панели кнопок для групповых операций (данная разметка будет появляться когда выбрана галочками хотя бы одна строка таблицы). В разметке могут быть какие-то кнопки на модальные формы (в itemID передается ids выбранных строк таблицы).
  29. HeaderTag - h1-h6 - указывает какой тег использовать для заголовка (по умолчанию h1).
  30. Height - высота таблицы (например, 500px). Работает только для немобильного вида. Задает максимальную высоту части компонента, где выводится таблица. 
  31. Hide - если 1, то компонент совсем не выведется (пустой div и установка класса hide).
  32. HideFilterButtons - если 1, скрывает кнопки фильтрации и сброса фильтра и включает режим instantFilter (т.е. при изменении фильтра запускается поиск).
  33. HideHeader - если 1, то скрывается шапка таблицы
  34. HideTitleCount - скрыть показ количества строк в заголовке
  35. InstantFilter - если 1, то при изменении значений фильтра сразу происходит применение фильтра к данным
  36. LayoutMakeup - дает возможность задать разметку для скелета компонента. При этом в нее вставляются специальные параметры, которые заменяются на части компонента (не работает для режимов ViewType): {title}, {toolbar}, {filters}, {predefinedFilters}, {paging}, {data}
  37. KanbanItemForm, KanbanItemFormTitle - настройки панелей Канбан (см. отдельный раздел про Канбан в таблицах)
  38. ManageCols - если 1, то вверху справа будет кнопка настройки порядка и видимости столбцов таблицы.
  39. MapShowUserLocation, MapUserImageUrl, MapShowAllRegions, MapShowLocationInRange  - настройки вывода карты
    (см отдельный раздел про использование карт в таблицах)
  40. ProccessOptions. Это JSON, в котором прописаны правила обработки таблицы после загрузки (выделение цветом min и мах по строкам или столбцам).
  41. RemoveConfirmText - текст подтверждения при удалении записи из таблицы
  42. RowMakeup - специальный режим, при котором данные выводятся не в табличном виде, а в заданной разметке. В параметре передается разметка для строки. Подробнее о кастом разметке таблицы
  43. ShowChecksCol - если 1, то будут показываться галочки для групповых операций (при этом галочка в интерфейсе должна быть снята)
  44. ShowNumsCol - если 1, то будет показываться столбец номера слева в таблице (при этом галочка в интерфейсе должна быть снята)
  45. Sortable - если 1, то включается режим drag-and-drop сортировки строк таблицы. Пример работы сортировки
  46. TableHeaderOptions - строка с JSON, содержащая настройки стилей для шапки таблицы. Параметры fontSize, align, background, color.  См. демостенд
  47. TableHeaderMakeup - разметка (теги tr, th) шапки таблицы (можно вставлять переменную {header} - вставится  стандартная шапка вместо этой переменной).
  48. Theme - (пустое, light, dark) - выбрать стилизацию таблицы
  49. Title - заголовок таблицы
  50. TitleTooltip - подсказка рядом с заголовком (при двойном клике - подсказка копируется в буфер обмена)
  51. Subtitle - панель появляется под названием 
  52. Toolbar (старое название - ToolbarAdditional) - разметка панели кнопок для таблицы (находится справа от названия)
  53. Ultracompact - если 1, то ячейки таблицы будут совсем без отступов (padding: 1px)
  54. ViewType - тип вывода данных (по умолчанию вывод таблицы. Варианты - kanban, gantt, map, timeline, card, chartbar, chart, progress, calendar, custom)
  55. ZoomCells - если 1, то ячейки будут увеличиваться при наведении (актуально когда размер шрифта малый и много данных на странице)
  56. Параметры диаграмм (для ViewType=chart). ChartType, ChartTitle, ChartWidth, ChartHeight, ChartLineCommaLabels, ChartOptions (JSON) - настройки вывода диаграмм (см. отдельный раздел про настройки диаграмм).

UpdateField  

Входные параметры: 

Выходные SELECT: 

CREATE PROCEDURE [dbo].[crud_newTableTest_updateField]
	@itemID int, 
	@field nvarchar(64),
	@value nvarchar(max),
	@username nvarchar(64)
AS
BEGIN
-- обновление поля таблицы
-- для приведения типов используйте try_cast(@value as int), Для даты try_convert(date, @value, 104)

if(@field = 'ХХХ') begin -- по коду проверяем что за поле и меняем его
	update as_trace set code = @value where id = @itemID
end else if(@field = 'YYY') begin
	update as_trace set code = @value where id = @itemID
end else begin
	select 'Невалидный код свойства' Msg, 0 Result
	return
end

-- SELECT 1 Вывод результата
select '' Msg, 1 Result, '' RefreshContainer
                        -- если нужно передать ошибку указываем:
                        -- 'Текст ошибки' Msg, 0 Result

-- SELECT 2 Внешнее действие (см в формах про Внешнее действие)
select 1

-- SELECT 3 Обновляемые столбцы (когда надо изменить другие столбцы или футер таблицы)
Select 'total' [Key], '' Value
union
Select 'footer-total' [Key], '' Value


END

Демостенд на обновление футера и другого поля после обновления некоторого поля - https://demo.web-automation.ru/list/watch/tablica--obnovlenie-poley-pri-redaktirovanii-dannykh---1136

Icon задает иконку в окне результата (например, 'fa-code').

Сообщение о результате выводится только в случае непустого Msg.

DeleteItem

Возвращает модель: 

SELECT 1

SELECT 2 Внешние действия

CREATE PROCEDURE [dbo].[crud_newTableTest_deleteItem]
	@itemID int,
	@username nvarchar(32)
AS
	-- удаление строки таблицы
	SET NOCOUNT off ;


	 -- проверки перед удалением
	 declare @count int
     select @count = count(*) from as_en_entityInstanceFields
     where fieldID = @itemID

     if(@count>0) begin
		select 'На поле есть ссылки в экземплярах ('+cast(@count as nvarchar)+' шт.)' Msg, 0 Result
        return
     end

	-- удаление элемента
	delete from as_trace where id = @itemID

	if (@@ROWCOUNT > 0) begin
                -- SELECT 1
		select '' Msg, 1 Result, '' Icon, '' RefreshContainer
	end else begin
                -- SELECT 1
		select 'Запись не удалилась из базы' Msg, 0 Result
	end

        -- SELECT 2  Внешние действия

Примечание:
Если хранимая процедура вернула результат {Result: false, Msg: 'Ошибка'}, то поле не будет обновлено и будет выведена ошибка редактирования для пользователя. 

Icon задает иконку в окне результата (например, 'fa-code').

FastCreate

На входе: 

Возвращает модель:

SELECT 1

SELECT 2 Внешние действия

CREATE PROCEDURE [dbo].[crud_newTableTest_fastCreate]
	@filters CRUDFilterParameter READONLY,
	@text nvarchar(256),
	@username nvarchar(32)
AS
BEGIN
	-- создание сущности в таблице по 1 полю @text
	-- извлечение параметров из URL
	declare @filterItemID int
	select @filterItemID = try_cast(Value as int) from @filters where [Key] = 'itemID'


	-- проверки
	declare @id int
	select @id = id from as_trace where code = @text
	if(@id>0) begin
		select 'Элемент с таким кодом уже существует в таблице' Msg, 0 Result
		return
	end


	-- добавление элемента в таблицу
	insert into as_trace(header, code)
	values(@text, @text )

        -- SELECT 1
        select 'Элемент создан' Msg, 1 Result

        -- SELECT 2  Внешние действия

END

Если необходимо реализовать быстрое добавление с выбором данных из справочника (через поиск в autocomplete вместо текстового поля),
то необходимо установить в SELECT 3 GetItems параметр FastCreateSearch = 1 и реализовать (создать через Быстрые действия / RunSQL) дополнительно процедуру следующего вида: 


-- имя содержит префикс _search
CREATE  PROCEDURE [dbo].[crud_productsForSupplier_fastCreate_search]
/*На входе строка поиска username, itemID оставлен для
                        совместимости и неиспользуется*/
   @q nvarchar(256),
   @itemID nvarchar(128),
   @username nvarchar(256)
AS
BEGIN
	CREATE TABLE dbo.#result (id int, [text] nvarchar(256), [desc] nvarchar(1024), [type] nvarchar(256), [date] date)

	insert into #result
	select id, name, '', '', getdate()
	  from as_cat_products p

	where name like '%'+@q+'%' and id >2
	-- на выходе - модель id, text, desc, type, date
	select * from #result
	drop table #result
END
go

В процедуру FastCreate в итоге приходит не числовой внешний ключ выбранной сущности, а ее текстовое название. 
Если нужен Textarea (многострочное поле) в FastCreate, то ставим в GetItems в SELECT 3 параметр FastCreateTextarea 1
Если нужен список с несколькими элементами для выбора, то ставим  в GetItems в SELECT 3 параметр FastCreateSelectCol = название колонки с типом Список (тип редактирования).

Примечание: 

 

Чтобы создать таблицу, вам необходимо: 

  1. На странице вывести сниппет с таблицей и кодом (например code). 
    <div class="as-table" data-code="{code}"></div>
  2. Создать в разделе "таблицы" таблицу с кодом code. 
  3. Отредактировать параметры таблицы.
  4. Создать все необходимые колонки таблицы.
  5. Реализовать все необходимые хранимые процедуры (именование - crud_{code}_functionName): 
    1. GetItems - фильтрация и получение данных таблицы
    2. UpdateField - редактирование поля в строке таблицы
    3. DeleteItem - удаление строки данных
    4. FastCreate - создание строки таблицы на основе одного поля (напр. Название или Код). 
    5. Операции таблицы. 

Параметры таблицы 

Код - название таблицы.

Название - заголовок таблицы.

Не найдено - когда в таблице нет записей отображается сообщение из этого поля.

Добавка к адресу URL - в строке адреса добавляется некий фрагмент. Пример: ?catID=.

Роли - набор ролей для кого доступна таблица (через запятую без пробелов. Если указано all - то доступ имеют все. Если * - то только авторизованные пользователи).

Размер пагинации - количество строк в таблице на странице.

Панель в названии - дополнительная HTML разметка для панели рядом с заголовоком.

Параметр Источник API - это коды исходящих запросов API (через запятую), которые выполняются перед GetItems и отклики передаются через переменную
@filters (обязательно типа ExtendedDictionaryParameter). В Key - название кода исходящего API. В Value2 - response от внешнего источника (в JSON или XML).
Подробнее про универсальный API

Пример работы внешнего источника API вывода таблицы.

Параметры колонок таблицы 



Примечание

Справочники для колонок с select (для фильтра или редактирования)

Имя процедуры задается автоматически в виде crud_{tableCode}_{colCode}_dict и процедура редактируется через кабинет в Управление колонками. 

CREATE procedure [dbo].[crud_simple_name_dict]
	@tableCode nvarchar(32),
	@col nvarchar(32),
	@username nvarchar(32),
	@parameters ExtendedDictionaryParameter readonly, -- falconGuid, langID
	@filters CRUDFilterParameter READONLY -- itemID, url parameters, other filters
as
begin
	-- source for dict col (Value, Text)

	-- SELECT 1
	select 0 Value, ' --- ' Text
	union	
	select top 5 id Value, code Text
	from as_trace
	order by Text
end
Передается ItemID и Col на случай использования универсальной процедуры. На выходе модель Value, Text, Color.

Примечание. 
declare @itemID int = isnull((select try_cast(value as int)
from @filters where lower([key])='itemid'), 0)


Типы фильтров для колонки таблицы

Если установлен фильтр у колонки, то он будет выводиться вверху как фильтр. 

Если нужно размещать по другому фильтры - вы можете использовать в GetItems SELECT 3 параметр FilterMakeup
и вставлять там фильтры через {colCode} (colCode - код колонки, у которой установлен тип фильтра).


Сама фильтрация происходит в запросе GetItems SELECT 1. Фильтр приходит в коллекции @filters. Извлечь можно так: 
declare @filterRole nvarchar(128)
select @filterRole = Value from @filters where [Key] = 'role'

См. также про настройку вида фильтров FilterOptions

Inline редактирование в таблице 

Вы можете редактировать следующие типы данных.
Строка
text
текстовое поле
Многострочный текст
textarea
поле textarea
Список
select
выбор одного элемента из списка
Список2
select2
выбор из списка с поиском. Работает только в inline режиме (Пример для колонки cat -  '{"instant": true}' editable_cat)
Дата
date
 
Дата и время
datetime
 
Галочки
checklist
value должен совпадать с text
Переключатель
switch
переключатель Да/нет
Галочка
bool
Флажок 

Непосредственное сохранение поля происходит в процедуре UpdateField. 

Кастомизация для FastCreate

Используйте в 3 запросе GetItems переменные для переименования основных меток: 

Операции в таблице (tableOperations)

В таблице можно делать некоторые кастомизированные операции (через использование своих хранимых процедур). Есть 3 вида операций: 

Настройки операций в таблице

Для добавления операции к таблице, необходимо создать операцию в разделе операции таблицы (ссылка Операции на форме редактирования таблицы). 

Для операции указываем: 

  1. код - используется для построения имен хранимых процедур
  2. название - выводится в таблице
  3. иконка - иконка Font Awesome (подобрать нужную иконку вы можете в разделе  Статическое меню), например, fa fa-bars
  4. текст подтверждения - если задан текст, то перед выполнением операции будет запрашиваться подтверждение операции с указанным текстом.  Подтверждение не запрашивается, если кастомная кнопка. При кастомной кнопке нужно в явном виде указывать  data-confirmtext="Подтвердите свой выбор".
  5. сообщение - сообщение об успешном выполнении операции при успехе
  6. Скрыть строку после выполнения операции - если ДА, то скрываем строку, для которой была вызвана операция
    (действует только для построчных операций)
  7. Перезапуск страницы после выполнения операции - если ДА, то перезагрузка всей страницы при успешном выполнении. 
  8. Пользователи, Роли - кто имеет доступ на выполнение этих операций
  9. Тип - операция может быть: 
    1. для строки (выводится тогда в строке), 
    2. просто в тулбаре (кнопка вверху таблицы)
    3. для групповых операций (появляется вверху таблицы, когда выбрана одна или более строк галочками -
      для этого необходимо у таблицы установить настройку Показывать галочки для групповых операций)
ВАЖНО: для групповых операций в SQL процедуре операции передаются id строк таблицы через запятую в @itemIDs. Эти id берутся из колонки с признаком PK (primary key). 
 
Читать про кастомизацию кнопок операций.
 
После настройки операций переходим к созданию хранимых процедур. 

Хранимые процедуры операций таблицы

Действия по кнопкам реализуются через хранимые процедуры следующего вида crud_{tableEntity}_{operationCode}_operation.

На вход процедуре передается itemIDs nvarchar(2048), в котором содержатся ID выбранной строки, либо выбранных строк для групповой операции,
либо все строки страницы (если это просто кнопка для toolbar).
--имя строится как crud_{table}_{operationCode}_operation
CREATE PROCEDURE [dbo].[crud_newTableTest_newOperation_operation]
	@filters CRUDFilterParameter READONLY,
	@itemIDs nvarchar(256),
	@username nvarchar(32)
AS
BEGIN
	-- выполнение операции таблицы
	-- если это групповая операция то itemIDs содержит значение id через запятую

	--declare @filterFormID int -- для использования переменных переданных неявно (через URL)
	--select @filterFormID = try_cast(Value as int) from @filters where [Key] = 'formID'

	-- select value from dbo.split(@itemIDs, ',') перебор значений выбранных элементов
	declare @res bit = 0

	-- SELECT 1 msg, Result, Info
	if(@res=1) begin
		select 'Произошла ошибка' Msg, 0 Result
	end else begin
		select '' Msg, 1 Result, '' Info, '' RedirectUrl
	end

	-- SELECT 2 Вызов внешнего действия
	/*
	select 'email' type,   -- email, sms, notification, clearcache
    	'ru@rudensoft.ru' [to], 'sub1' subject, 'bodyXXX'+@itemIDs body,   ---EMAIL
    	'Text 1' msg, '723429234' [number],   												--- SMS
        '' prefix,																				--CLEAR CACHE
		'text1' text , 'ru@rudensoft.ru' [to], 'ticketExecutor' typeCode, 'http///' url, 'add111' additional -- notification
	*/

END

На входе: 

На выходе: 

Примечание:

JS коллбеки (callbacks) для Таблицы 

Вы можете вызвать JS коллбек после некоторых событий в таблице 

Примеры: 

$(function(){
  as.crud2callbacks["code1_getItems"]=function(tableOptions){
  }
  as.crud2callbacks["code1_update"]=function(el, newValue, tableOptions){
  }
  as.crud2callbacks["code1_create"]=function(params,data){
  }
  as.crud2callbacks["code1_delete"]=function(params,data){
  }
  as.crud2callbacks["code1_rowCheck"]=function(tableOptions,row){
  }
  as.crud2callbacks["code1_operationCode_operation"]=function(params, tableOptions, data) 
  {
  }

});

где code1 - это код таблицы

Кастомизация стилей через data атрибуты сниппета таблицы

Вы можете изменить стили, иконки в таблице по умолчанию. Например, поставим кнопку фильтра красной с иконкой глаза: 

<div class="as-table" data-code="watch_customClassesIcons" data-filterbtnclass="btn btn-primary" data-filterbtnicon="fa fa-eye"></div>

Пример на демостенде - https://demo.web-automation.ru/list/watch/kastomizaciya-knopok-stiley-tablic---66

Выделение панели блока фильтров через стили

Укажите у as-table дополнительный класс as-table-markFilters - в этом случае фильтры будут выделяться в виде контейнера с рамкой и подложкой. 

Также вы можете через CSS задать свои стили для класса crd2FilterItems. 

Дополнительные режимы компонента Таблица

Дополнительные материалы

  1. Как редактировать колонку с датой
  2. Как реализовать подтаблицу (вложенная таблица)
  3. Как сделать операции только для некоторых строк
  4. Как использовать комментарии в таблицах
  5. Как связать таблицу и редактирование сущности (зависимая страница)
  6. Как убрать показ количества строк результата в заголовке таблицы
  7. Как сделать таблицу в модальном окне
  8. Как связать две таблицы
  9. Кастомная разметка в таблице
Страница-источник на сайте falconspace.ru