Вывод данных в таблице - getItems

Процедура GetItems используется для настройки параметров вывода таблицы, также выдает данные для таблицы.

На входе: 

• @filters - состояние выбранных фильтров в таблице
• @sort - выбранная сортировка
• @direction - направление сортировки (up, down)
• @page - номер текущей выбранной страницы (пагинация)
• @pageSize - размер пагинации 1 страницы данных
• @username - текущий пользователь

SP 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

1. На вход в хранимую процедуру передается @filter - в нем содержатся все URL параметры и параметры фильтра as-crud
   Извлекаем их вышеуказанным способом и используем в первом запросе select
   Также в эту коллекцию попадаются все значения, передаваемые как data-параметр в разметку сниппета as-table 

 declare @filterElementID int
 select @filterElementID = try_cast(Value as int) from @filters where [Key] = 'elementID'

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;

Примечание:

• В GetItems - если столбец имеет null в 1 строке, то столбец не выводится (т.е. можно динамически скрывать столбцы, присваивая null всему столбцу).
  Обязательно используйте isnull(field, '') field для того, чтобы столбец всегда явно выводился. Если столбец не выводится в таблице - первым делом  проверьте что у вас не стоит null в этом столбце.   
• Вы можете в процедуре GetItems использовать @filters ExtendedDictionaryParameter (Key, Value2) вместо @filters CRUDFilterParameter (Key,Value). Это бывает необходимо, когда данные идут из внешнего источника по АПИ (и в коллекцию передаются данные response от внешнего источника).   Подробнее про универсальный API

• align_code1 - установка выравнивания для ячейки таблицы (выравнивание ячейки в шапке определяется по 1 строке данных, т.е. что в нем передано в align_{filedCode})
• backcolor_code1 nvarchar(30) - цвет ячейки code1
• badge - красит указанный столбец в badge (значок-панель) элемент (например badge_title = ‘success’ делает зеленый badge для поля title)
  Используются стандартные bootstrap 4 названия (light, secondary, warning и т.д.)
• barPercent_code1, barClass_code1 - настройка отображения прогресс-бара процент от 0 до 100 и цвет прогресс-бара (success, danger, warning, info, primary)
• color_code1 nvarchar(30) - цвет текста ячейки в колонке code1. Влияет только на текст, но не на ссылки в ячейке (см. внутреннюю разметку вывода)
• colTitle_code1 - для столбца code1 колонка будет переименована в указанное значение
• desc_code1  - дополнительное описание под значением ячейки code1
• dropdown_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>

• editable_code1 - настройки окна редактирования поля (JSON объект): 

{
  "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.

• fontsize_code1 - устанавливает размер шрифта для ячейки (например 12px, 1rem, 1.4em)
• hiddenDevice_code1 (например 'xs sm md lg xl'). Значения разрешений через пробел, для которых будет скрываться ячейка. Например, 'xs sm' скроет на мобильных устройствах столбец
• hint_code1 - устанавливает стандартную всплывающую подсказку к полю (если нет - то используется в качестве подсказки название поля)
• icon_code1 nvarchar(256) - добавляет иконку к ячейке code1 (например 'fa fa-upload')
• marker_code1 - задает цвет небольшого маркера слева в указанной ячейке, например '#ffa' marker_field23
• modal_code1 - указываем разметку, которая будет отображаться в модальном окне. К ячейке добавляется кнопка-иконка вывода разметки в модальном окне
  Здесь можно задавать также разметку компонентов (Таблица, форма и др)
• modalIcon_code1 - можно поменять иконку вызова модального окна через modalIcon_code1 = 'fa-dot-circle'
• modalTitle_code1 - можно у модального окна задать заголовок через псевдоколонку
• prefix_code1, suffix_code1 - добавляют в ячейку текст серым перед или после значения
• prev_code1 float - указывает прирост в процентах по сравнению с предыдущим показателем (для колонки code1)
• prevcolor_code1   nvarchar(256) - цвет прироста колонки (актуально когда есть параметр prev_. Пример: #aaa)
• showHover_code1 - если 1, то ячейка по умолчанию скрыта (visibility:hidden). При наведении на строку ячейка будет отображаться.
• sub_code1 - указываем разметку подстроки. К ячейке добавляется +/- для раскрытия строки (в ней показывается указанная разметка)
  Здесь можно задавать также разметку компонентов (Таблица, форма и др)
• width_code1 - устанавливает ширину колонки (например, 500px или 30%)
  

Пример: 

-- 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, которые в целом влияют на строку таблицы: 

• color - красит фон строки в указанный цвет (например, “#aabbcc”)
• rowLink - устанавливает ссылку для всей строки таблицы. Подробнее...
• rowClass - CSS класс, который будет добавлен к строке таблицы (tr).
• rowHeight - устанавливает высоту строки (например, 500px или 30%).
• wholeRow - если указана разметка в таком поле, то для строки выводится одна ячейка, растянутая на всю строку с указанным содержимым.  https://demo.web-automation.ru/list/watch/ob-edinenie-yacheek-tablicy-v-1-stroku---1148

• min,max,step - указывает для числовых полей минимальное, максимальное значение и шаг приращения (при изменении поля)
• placement - указывает расположение окна редактирования относительно ячейки
• placeholder - указывает подсказку к полю
• inputclass - задает CSS для поля 
• escape - если true - то показываем значение в сыром HTML (если в значении есть теги)
• clear - если true - то показываем кнопку очистки поля
• rows - для многострочных полей textarea задает количество строк
• для некоторых типов полей HTML5 могут использоваться также size, minlength, maxlength, pattern, orient
• disabled - если true, то режим редактирования отключается для строки. ВАЖНО!!! Обязательно проверьте в updateItemField может ли пользователь менять данную строку или нет. Пример установки disabled: 

select *, '{"disabled": '+iif(code1='newForm', 'false' , 'true')+'}'  editable_role
from #result

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

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. EnableJSONExport, EnableXMLExport, EnableCSVExport - если 1, то будет на странице доступна кнопка с выгрузкой данных в указанном формате. Подробнее про выгрузку таблицы в различные форматы.
15. FastCreate, Remove, Comments - включают (=1) возможность Быстрого добавления, Удаления, Комментария. Чтобы корректно работало, необходимо снять соответствующую настройку в форме параметров таблицы.
16. FastCreateDialogDefaultValue - указание значение по умолчанию для поля в форме быстрого создания (для текстового поля, многострочного поля и списка). 
17. FastCreateDialogHeader - заголовок диалогового окна Создать.
18. FastCreateDialogPlaceholder - подсказка при создании в диалоговом окне Создать.
19. FastCreateLinkText - текст ссылки Создать….
20. FastCreateSearch - если true, то добавление будет работать как autocomplete список с поиском.
21. FastCreateSelectCol - указываем колонку таблицы (в /tableCols) с типом редактирования Список. Быстрое добавление будет работать в виде элемента Список со значениями из процедуры dict этой колонки. 
22. FastCreateTextarea - если true, то элементом добавления будет многострочное поле.
23. FilterMakeup - разметка HTML для  фильтра. Фильтры колонок указываются здесь через {colCode}.
    (у колонки должен быть установлен тип данных фильтра). И предустановленный параметр {buttons} - для вставки кнопок фильтра.
24. FilterOptions - настройка свойств фильтров через JSON.  
25. FontSize - указать размер шрифта для таблицы (например 10px, 0.85em).
26. FooterText - разметка, которая выводится под таблицей. 
27. FrozenLeftCol - если 1, то левая колонка фиксируется на месте при скроллинге таблицы вправо (данная настройка может конфликтовать с подтаблицами, DisableFrozenHeader), для мобильных устройств она не используется. Подробнее...
28. GanttScale, GanttNavigate, GanttItemForm, GanttItemFormTitle - настройки вывода диаграммы Ганта (см. отдельный раздел Ганта в таблицах).
29. GroupOperationsToolbar - разметка панели кнопок для групповых операций (данная разметка будет появляться когда выбрана галочками хотя бы одна строка таблицы). В разметке могут быть какие-то кнопки на модальные формы (в itemID передается ids выбранных строк таблицы).
30. HeaderTag - h1-h6 - указывает какой тег использовать для заголовка (по умолчанию h1).
31. Height - высота таблицы (например, 500px). Работает только для немобильного вида. Задает максимальную высоту части компонента, где выводится таблица. 
32. HelpLink - если указано поле таблицы Помощь, то выведется ссылка с названием в этом параметре (по умолчанию текст "Как это работает") - при клике будет выведена помощь по таблице внизу слева.  Обновление Май 2025.
33. Hide - если 1, то компонент совсем не выведется (пустой div и установка класса hide).
34. HideFilterButtons - если 1, скрывает кнопки фильтрации и сброса фильтра и включает режим instantFilter (т.е. при изменении фильтра запускается поиск).
35. HideHeader - если 1, то скрывается шапка таблицы
36. HideTitleCount - скрыть показ количества строк в заголовке
37. ImportOptions - импорт данные через файлы cvs, txt. Подробнее про импорт данных через компонент Таблица. 
38. InstantFilter - если 1, то при изменении значений фильтра сразу происходит применение фильтра к данным
39. LayoutMakeup - дает возможность задать разметку для скелета компонента. При этом в нее вставляются специальные параметры, которые заменяются на части компонента (не работает для режимов ViewType): {title}, {toolbar}, {filters}, {predefinedFilters}, {paging}, {data}
40. KanbanItemForm, KanbanItemFormTitle - настройки панелей Канбан (см. отдельный раздел про Канбан в таблицах)
41. ManageCols - если 1, то вверху справа будет кнопка настройки порядка и видимости столбцов таблицы.
42. MapShowUserLocation, MapUserImageUrl, MapShowAllRegions, MapShowLocationInRange  - настройки вывода карты
    (см отдельный раздел про использование карт в таблицах)
43. ProccessOptions. Это JSON, в котором прописаны правила обработки таблицы после загрузки (выделение цветом min и мах по строкам или столбцам).
44. RemoveConfirmText - текст подтверждения при удалении записи из таблицы
45. RowMakeup - специальный режим, при котором данные выводятся не в табличном виде, а в заданной разметке. В параметре передается разметка для строки. Подробнее о кастом разметке таблицы
46. ShowChecksCol - если 1, то будут показываться галочки для групповых операций (при этом галочка в интерфейсе должна быть снята)
47. ShowNumsCol - если 1, то будет показываться столбец номера слева в таблице (при этом галочка в интерфейсе должна быть снята)
48. Sortable - если 1, то включается режим drag-and-drop сортировки строк таблицы. Пример работы сортировки
49. TableHeaderOptions - строка с JSON, содержащая настройки стилей для шапки таблицы. Параметры fontSize, align, background, color.  См. демостенд
50. TableHeaderMakeup - разметка (теги tr, th) шапки таблицы (можно вставлять переменную {header} - вставится  стандартная шапка вместо этой переменной).
51. Theme - (пустое, light, dark) - выбрать стилизацию таблицы
52. Title - заголовок таблицы
53. TitleTooltip - подсказка рядом с заголовком (при двойном клике - подсказка копируется в буфер обмена)
54. Subtitle - панель появляется под названием 
55. Toolbar (старое название - ToolbarAdditional) - разметка панели кнопок для таблицы (находится справа от названия)
56. Ultracompact - если 1, то ячейки таблицы будут совсем без отступов (padding: 1px)
57. VerticalBorders - если 1, то у ячеек будут вертикальные границы, а не горизонтальные (по умолчанию выводятся горизонтальные границы).
58. ViewType - тип вывода данных (по умолчанию вывод таблицы. Варианты - kanban, gantt, map, timeline, card, chartbar, chart, progress, calendar, custom)
59. ZoomCells - если 1, то ячейки будут увеличиваться при наведении (актуально когда размер шрифта малый и много данных на странице)
60. Параметры диаграмм (для ViewType=chart). ChartType, ChartTitle, ChartWidth, ChartHeight, ChartLineCommaLabels, ChartOptions (JSON) - настройки вывода диаграмм (см. отдельный раздел про настройки диаграмм).