Работа с таблицами. Создание таблиц на сайте
Описание компонента Таблица
Смотреть пример компонента Таблица
Руководство Создание таблицы по шагам
Компонент создания таблиц. Нюансы работы с таблицами
Компонент Таблица позволяет вывести некие списковые данные в виде таблицы и манипулировать данными в таблице (добавление, редактирование, удаление, групповые операции и т.д.).
Не путайте таблицу базы данных и компонент Таблица. Они никак не связаны. При создании колонок компонента Таблица в структуре базы данных изменения не происходят (не создаются таблицы БД или колонки таблицы БД).
Разметка
<div class="as-table" data-code="dashboardPanels" data-elementid="566" data-name="name1"></div>
Описание data элементов разметки
- data-code - код таблицы
- data-itemID- переданный в сниппете значение, которое можно передать в разметке сниппета (например, id категории). Если нужен параметр из url, то можно написать в фигурных скобках url-itemID.
- data-name - заголовок таблицы
Описание data-* параметров по стилизации таблицы(с указанием значения по умолчанию):
- tableClass - добавляет CSS класс к тегу таблицы (можно использовать классы bootstrap - table-dark table-hover table-striped table-bordered table-borderless table-sm).
- filterBtnIcon = "fa fa-search" - иконка Font Awesome у кнопки фильтра. Смотреть иконки Font Awesome.
- filterBtnClass = "btn btn-secondary btn-md"
- showTypicalFilterBtn - если 1, то показывать кнопку сохранения типовых комбинаций фильтров.
- typicalFilterBtnIcon = "fa fa-bars" - кнопка типовые фильтры
- typicalFilterBtnClass = "btn btn-light btn-md"
- resetFilterBtnIcon = "" - кнопка сброса фильтра
- resetFilterBtnClass = "btn btn-light btn-md"
- titleTooltipIcon = "fa fa-info-circle" - подсказка рядом с названием
- titleTooltipClass = "btn btn-circle text-primary"
- titleClass = "" - css класс для контейнера заголовка
- subtitleClass = "" - css класс для контейнера подзаголовка
- toolbarClass = "" - css класс для контейнера панели рядом с названием
- groupToolbarClass = "" - css класс для контейнера панели групповых действий
- operationClass-code1 = "btn btn-light " - CSS классы кнопки операции (code1 - код операции)
- removeBtnIcon = "fa far fa-trash-alt" - кнопка удаления в строке
- removeBtnClass = ""
- commentsBtnIcon = "fa fa-comment" - кнопка комментариев в строке
- commentsBtnClass = ""
- numColHeader = "#" - заголовок столбца с порядковым номером
- createBtnIcon = "fa fa-plus"; - кнопка быстрого создания
- createBtnClass = "btn btn-primary"
- createModalType = "primary" - кнопка в строке для modal_ режима
- modalBtnIcon = "fa fa-dot-circle"
- modalBtnClass = ""
- subBtnPlusIcon = "fa-plus" кнопка в строке для sub_ режима (важно! здесь только 1 класс без fa добавки)
- subBtnMinusIcon = "fa-minus"
- subBtnClass = ""
- noItemsClass = "alert alert-info my-3" панель "Не найдено"
- noItemsIcon = "fa fa-frown"
- alwaysShowGroupPanel = "" Если стоит непустая строка, то панель групповых действий будет видна всегда, но при этом если нет выбранных галочек, то кнопки в этой панели будут активны (для кнопок операции будут проверяться выбранные галочки. Если их нет то выводится сообщение из этой настройки data-alwaysShowGroupPanel).
- disableRemoveConfirm - если "1", то не будет запрашиваться подтверждение удаления строки таблицы (confirm)
- progress - если указана иконка font awesome (fa fa-bars) или путь к картинке, то она будет загружаться в форму, пока идет прогрузка данных. Т.е. выполняет роль элемента прогресс-бара (аналогичный параметр есть и у Формы).
Примечание: для данных настроек вы можете их глобально установить в as.systemOptions.js через код вида "table.{code}", например:
{
"table.createBtnClass": "btn btn-danger"
}
Настройка хранимых процедур для таблицы
Основные хранимые процедуры getItems, updateField, deleteItem, fastCreate делаем через панель управления.
Крайне важно следовать общему стилю и виду шаблонных процедур (они имеют префикс crud_example_).
GetItems
Выдает следующие SELECT:
-
Таблица с данными
-
Количество строк
-
Измененные параметры таблицы (заголовок Title, подсказка Subtitle, панель toolbarAdditional и др. см. ниже)
-
Вывод столбцов подвала таблицы и дополнительных строк в шапке (isHead=1 для строки) (обычно это агрегирующие данные по таблице #result)
Обязательно давайте название столбцам в этом запросе и указывайте их в том же порядке что и ваши столбцы в выводе
ВАЖНО! Если это viewType=’gantt’ (Гант), 'chartbar' или ‘canban’ - то 4 запрос это данные во времени по элементам - Настройки предустановленных фильтров (т.е. именные ссылки, которые одним щелчком устанавливают некий типовой фильтр, напр. Замороженные лиды)
- Вызов внешних действий (сентябрь 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
-
На вход в хранимую процедуру передается @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
Для псевдополей (desc_colName) не нужно создавать в таблице реальные поля. Они просто прописываются в выходном запросе SELECT 1 в GetItems.
Пример: Нам надо красить ячейки для колонки title (title - это код существующей колонки в таблице).
Для этого в GetItems SELECT 1 добавляем вывод этого поля: ‘#f00’ backcolor_title
- ButtonSize - управляет размерами кнопок в тулбаре (варианты - sm, md, lg).
- CardGroupType - тип вывода карточек: deck (в 1 строку карточки), columns (разделение по колонкам),
group (все карточки в 1 строку и выглядят как единая панель). В большинстве случаев подойдет columns. Смотреть подробнее. - ChangeFontSize - если 1, то вверху появляются кнпоки для изменения размера шрифта.
- Compact - если 1 то таблица будет сжатой с уменьшенными отступами.
- Collapse 0,1,2. Служит для сворачивания таблицы по названию. 0 - нет сворачивания. 1 - есть сворачивание, при загрузке показан в открытом виде. 2 - есть сворачивание, при загрузке свернут
- CollapseFilter 0,1,2. Служит для сворачивания фильтров по иконке рядом с названием. 0 - нет сворачивания. 1 - есть сворачивание, при загрузке показан в открытом виде. 2 - есть сворачивание, при загрузке свернут (иконку кнопки можно заменить через data-filterCollapseIcon="fas fa-filter" у сниппета).
- DisableCellTitle - отключить подсказки у ячеек (дублируют название колонки и ее подсказку)
- DisableFrozenHeader - отключить для таблицы возможность показа шапки таблицы наверху при скроллинге (актуально когда есть несколько таблиц на странице либо есть вложенные таблицы)
- DisableSaveState - если 1, то состояние фильтра и сортировок не будет сохраняться при закрытии/перезагрузке страницы.
- DropdownPanel, DropdownPanelText - настройка выпадающей панели вверху рядом с названием таблицы. См. подробнее.
- EditableMode - задает тип редактирования элемента. inline - внутри таблицы. popup - редактирование как малое всплывающее окошко
- EmptyText - текст, который отображается когда ничего не найдено.
- EnableExcelExport, EnablePrint, EnableClipboard - если 1, то появляются кнопки выгрузки таблицы в Excel, отправку на печать или копирование в буфер обмена ячеек таблицы (с разделением через \n и \t).
- FastCreate, Remove, Comments - включают (=1) возможность Быстрого добавления, Удаления, Комментария. Чтобы корректно работало, необходимо снять соответствующую настройку в форме параметров таблицы.
- FastCreateDialogDefaultValue - указание значение по умолчанию для поля в форме быстрого создания (для текстового поля, многострочного поля и списка).
- FastCreateDialogHeader - заголовок диалогового окна Создать.
- FastCreateDialogPlaceholder - подсказка при создании в диалоговом окне Создать.
- FastCreateLinkText - текст ссылки Создать….
- FastCreateSearch - если true, то добавление будет работать как autocomplete список с поиском.
- FastCreateSelectCol - указываем колонку таблицы (в /tableCols) с типом редактирования Список. Быстрое добавление будет работать в виде элемента Список со значениями из процедуры dict этой колонки.
- FastCreateTextarea - если true, то элементом добавления будет многострочное поле.
- FilterMakeup - разметка HTML для фильтра. Фильтры колонок указываются здесь через {colCode}.
(у колонки должен быть установлен тип данных фильтра). - FontSize - указать размер шрифта для таблицы (например 10px, 0.85em).
- FooterText - разметка, которая выводится под таблицей.
- FrozenLeftCol - если 1, то левая колонка фиксируется на месте при скроллинге таблицы вправо (данная настройка может конфликтовать с подтаблицами, DisableFrozenHeader), для мобильных устройств она не используется. Подробнее...
- GanttScale, GanttNavigate, GanttItemForm, GanttItemFormTitle - настройки вывода диаграммы Ганта (см. отдельный раздел Ганта в таблицах).
- GroupOperationsToolbar - разметка панели кнопок для групповых операций (данная разметка будет появляться когда выбрана галочками хотя бы одна строка таблицы). В разметке могут быть какие-то кнопки на модальные формы (в itemID передается ids выбранных строк таблицы).
- HeaderTag - h1-h6 - указывает какой тег использовать для заголовка (по умолчанию h1).
- Height - высота таблицы (например, 500px). Работает только для немобильного вида. Задает максимальную высоту части компонента, где выводится таблица.
- Hide - если 1, то компонент совсем не выведется (пустой div и установка класса hide).
- HideFilterButtons - если 1, скрывает кнопки фильтрации и сброса фильтра и включает режим instantFilter (т.е. при изменении фильтра запускается поиск).
- HideHeader - если 1, то скрывается шапка таблицы
- HideTitleCount - скрыть показ количества строк в заголовке
- InstantFilter - если 1, то при изменении значений фильтра сразу происходит применение фильтра к данным
- LayoutMakeup - дает возможность задать разметку для скелета компонента. При этом в нее вставляются специальные параметры, которые заменяются на части компонента (не работает для режимов ViewType): {title}, {toolbar}, {filters}, {predefinedFilters}, {paging}, {data}
- KanbanItemForm, KanbanItemFormTitle - настройки панелей Канбан (см. отдельный раздел про Канбан в таблицах)
- ManageCols - если 1, то вверху справа будет кнопка настройки порядка и видимости столбцов таблицы.
- MapShowUserLocation, MapUserImageUrl, MapShowAllRegions, MapShowLocationInRange - настройки вывода карты
(см отдельный раздел про использование карт в таблицах) - ProccessOptions. Это JSON, в котором прописаны правила обработки таблицы после загрузки (выделение цветом min и мах по строкам или столбцам).
- RemoveConfirmText - текст подтверждения при удалении записи из таблицы
- RowMakeup - специальный режим, при котором данные выводятся не в табличном виде, а в заданной разметке. В параметре передается разметка для строки. Подробнее о кастом разметке таблицы
- ShowChecksCol - если 1, то будут показываться галочки для групповых операций (при этом галочка в интерфейсе должна быть снята)
- ShowNumsCol - если 1, то будет показываться столбец номера слева в таблице (при этом галочка в интерфейсе должна быть снята)
- Sortable - если 1, то включается режим drag-and-drop сортировки строк таблицы. Пример работы сортировки
- TableHeaderOptions - строка с JSON, содержащая настройки стилей для шапки таблицы. Параметры fontSize, align, background, color. См. демостенд
- TableHeaderMakeup - разметка (теги tr, th) шапки таблицы (можно вставлять переменную {header} - вставится стандартная шапка вместо этой переменной).
- Theme - (пустое, light, dark) - выбрать стилизацию таблицы
- Title - заголовок таблицы
- TitleTooltip - подсказка рядом с заголовком (при двойном клике - подсказка копируется в буфер обмена)
- Subtitle - панель появляется под названием
-
ToolbarAdditional - разметка панели кнопок для таблицы (находится справа от названия)
- Ultracompact - если 1, то ячейки таблицы будут совсем без отступов (padding: 1px)
- ViewType - тип вывода данных (по умолчанию вывод таблицы. Варианты - kanban, gantt, map, timeline, card, chartbar, chart, progress, calendar, custom)
- ZoomCells - если 1, то ячейки будут увеличиваться при наведении (актуально когда размер шрифта малый и много данных на странице)
- Параметры диаграмм (для ViewType=chart). ChartType, ChartTitle, ChartWidth, ChartHeight, ChartLineCommaLabels, ChartOptions (JSON) - настройки вывода диаграмм (см. отдельный раздел про настройки диаграмм).
UpdateField
Входные параметры:
- @itemID - id строки (это колонка в таблице с признаком PK=Да)
- @field - код поля, которое в данный момент редактируем
- @value - новое значение поля
- @username - текущий пользователь (используется обычно для дополнительной проверки прав)
- @parameters ExtendedDictionaryParameter - опциональный параметр, в котором передаются langID, falconGuid, userIP и др.
Выходные SELECT:
- SELECT 1. Возвращает модель:
- Msg - сообщение о результате,
- Result - 0 или 1, результат операции,
- Icon - иконка в сообщении alert (font awesome),
- RefreshContainer (область на странице, которую надо обновить). Если Result ='1', то операция совершена успешно.
- Actions - JSON для действий в браузере.
- SELECT 2. Второй запрос возвращает Вызов внешних действий.
- SELECT 3 задает другие поля для обновления. Key - код поля, Value - новое значение для него. Для изменения полей в подвале таблицы напротив соответствующего
столбца в качестве Key указывается footer-{code}
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
- Msg - сообщение,
- Result - результат операции (bit),
- Icon (иконка в окне результата),
- RefreshContainer(задает селектор контейнера для обновления после удаления)
- Actions - JSON для действий в браузере.
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
- Msg - сообщение,
- Result - результат операции (bit),
- RedirectUrl - если непустой, то будет редирект на данный URL,
- Icon - иконка font awesome,
- RefreshContainer - обновление компонентов в данном контейнере.
- Actions - JSON для действий в браузере.
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
Примечание:
-
Если выходной параметр RedirectUrl не пустой, то после успешного сохранения будет редирект на указанную страницу.
- Выходной параметр RefreshContainer задает селектор jQuery для обновления какой-то области на странице.
-
В процедуру search передается itemID - он заполняется из атрибута data-itemID от сниппета таблицы.
Чтобы создать таблицу, вам необходимо:
-
На странице вывести сниппет с таблицей и кодом (например code).
<div class="as-table" data-code="{code}"></div>
-
Создать в разделе "таблицы" таблицу с кодом code.
-
Отредактировать параметры таблицы.
-
Создать все необходимые колонки таблицы.
-
Реализовать все необходимые хранимые процедуры (именование - crud_{code}_functionName):
-
GetItems - фильтрация и получение данных таблицы
-
UpdateField - редактирование поля в строке таблицы
-
DeleteItem - удаление строки данных
-
FastCreate - создание строки таблицы на основе одного поля (напр. Название или Код).
-
Операции таблицы.
Параметры таблицы
Код - название таблицы.
Название - заголовок таблицы.
Не найдено - когда в таблице нет записей отображается сообщение из этого поля.
Добавка к адресу URL - в строке адреса добавляется некий фрагмент. Пример: ?catID=.
Роли - набор ролей для кого доступна таблица (через запятую без пробелов. Если указано all - то доступ имеют все. Если * - то только авторизованные пользователи).
Размер пагинации - количество строк в таблице на странице.
Панель в названии - дополнительная HTML разметка для панели рядом с заголовоком.
Параметр Источник API - это коды исходящих запросов API (через запятую), которые выполняются перед GetItems и отклики передаются через переменную
@filters (обязательно типа ExtendedDictionaryParameter). В Key - название кода исходящего API. В Value2 - response от внешнего источника (в JSON или XML).
Подробнее про универсальный API
Пример работы внешнего источника API вывода таблицы.
Параметры колонок таблицы
Примечание
- ВАЖНО. Колонки именуйте обязательно в lowerCamelCase, например parentName (а не PARENT_NAME, ParentName).
-
Вместо хранимки для списка значений колонки можно указать JSON для вывода статичного списка.
(например для булевских элементов можно указать {1: “Да”} ). - В таблице обязательно должен быть столбец с кодом id и PK=Да (Видимый=Нет).
-
ВАЖНО. Если столбец не указывать в выводе GetItems (или присвоить NULL значениям столбца), то он не будет показываться на странице и не будет ошибки.
Таким образом можно варьировать столбцы таблицы в зависимости от пользователя и других параметров. -
Параметр id с PK=true ВСЕГДА должен идти на первом месте. По возможности не применяйте ord < 0.
Справочники для колонок с 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
Примечание.
- в процедуру dict может передаваться необязательный параметр @parameters ExtendedDictionaryParameter в котором передаются дополнительные параметры (langID, falconGuid).
- в процедуру может передаваться @filters CRUDFilterParameter READONLY - здесь может быть itemID (переданный в data-itemID на компонент Таблица) и параметры из URL.
- ВАЖНО! Используйте именно @filters для извлечения data-itemID от таблицы с lower проверкой key:
declare @itemID int = isnull((select try_cast(value as int)
from @filters where lower([key])='itemid'), 0)
-
Ранее использовалось поле для хранения имени процедуры. Он остался рабочим для совместимости.
Сейчас это поле не выводится и вместо него необходимо использовать новые процедуры с редактированием через кабинет. -
Если нужен элемент Не выбрано, то можно сделать union select 0 Value, "‘Не выбрано’ Text".
-
Если установлен цвет Color, то у элемента (Галочка, Список, Радиокнопка) будет установлен фон (CSS background-color) с указанным цветом.
Типы фильтров для колонки таблицы
-
Целое число int,
-
Дробное число float,
-
Строка string,
-
Список select,
- Список с поиском select2,
-
Флажок bool,
-
Дата date,
-
Диапазон дат daterange,
-
Флажки checkboxes,
-
Диапазон чисел intrange,
-
Выбор одного варианта radio,
-
Выбор chosen chosen,
-
Выбор множ. chosen chosenMultiple,
-
Переключатель switch (ВАЖНО. Не используйте при большом PageSize(>30), т.к. инициализация множественных switch делает задержку при загрузке).
Если нужно размещать по другому фильтры - вы можете использовать в GetItems SELECT 3 параметр FilterMakeup
и вставлять там фильтры через {colCode} (colCode - код колонки, у которой установлен тип фильтра).
Сама фильтрация происходит в запросе GetItems SELECT 1. Фильтр приходит в коллекции @filters. Извлечь можно так:
declare @filterRole nvarchar(128)
select @filterRole = Value from @filters where [Key] = 'role'
Inline редактирование в таблице
Строка
|
text
|
текстовое поле |
Многострочный текст
|
textarea
|
поле textarea |
Список
|
select
|
выбор одного элемента из списка |
Список2
|
select2
|
выбор из списка с поиском. Работает только в inline режиме (Пример для колонки cat - '{"instant": true}' editable_cat) |
Дата
|
date
|
|
Дата и время
|
datetime
|
|
Галочки
|
checklist
|
value должен совпадать с text |
Переключатель
|
switch
|
переключатель Да/нет
|
Галочка |
bool
|
Флажок |
Непосредственное сохранение поля происходит в процедуре UpdateField.
Кастомизация для FastCreate
Используйте в 3 запросе GetItems переменные для переименования основных меток:
-
fastCreateLinkText - текст кнопки Создать
-
fastCreateDialogHeader - заголовок диалогового окна
-
fastCreateDialogPlaceholder - текст подсказки
Операции в таблице (tableOperations)
В таблице можно делать некоторые кастомизированные операции (через использование своих хранимых процедур). Есть 3 вида операций:
-
групповые операции - кнопка в тулбаре для групповых операций
-
операция со строкой - будет кнопка у строки
-
кнопка в тулбаре
Настройки операций в таблице
Для добавления операции к таблице, необходимо создать операцию в разделе операции таблицы (ссылка Операции на форме редактирования таблицы).
Для операции указываем:
-
код - используется для построения имен хранимых процедур
-
название - выводится в таблице
-
иконка - иконка Font Awesome (подобрать нужную иконку вы можете в разделе Статическое меню), например, fa fa-bars
-
текст подтверждения - если задан текст, то перед выполнением операции будет запрашиваться подтверждение операции с указанным текстом. Подтверждение не запрашивается, если кастомная кнопка. При кастомной кнопке нужно в явном виде указывать data-confirmtext="Подтвердите свой выбор".
-
сообщение - сообщение об успешном выполнении операции при успехе
-
Скрыть строку после выполнения операции - если ДА, то скрываем строку, для которой была вызвана операция
(действует только для построчных операций) -
Перезапуск страницы после выполнения операции - если ДА, то перезагрузка всей страницы при успешном выполнении.
-
Пользователи, Роли - кто имеет доступ на выполнение этих операций
-
Тип - операция может быть:
-
для строки (выводится тогда в строке),
-
просто в тулбаре (кнопка вверху таблицы)
-
для групповых операций (появляется вверху таблицы, когда выбрана одна или более строк галочками -
для этого необходимо у таблицы установить настройку Показывать галочки для групповых операций)
Хранимые процедуры операций таблицы
На вход процедуре передается 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
На входе:
- @filters - текущие фильтры таблицы (также здесь лежит itemID).
- @itemIDs - через запятую id строк таблицы. Eсли row операция - то id строки, для которой вызвана операция. Если group операция - то id (это колонки с PK=true) строк через запятую. Если toolbar операция - то пустое.
- @username - текущий пользователь.
- @parameters ExtendedDictionaryParameter - опциональный параметр, в котором передаются langID, falconGuid, userIP и др.
На выходе:
- SELECT 1 -
- Result - результат операции (bit),
- Msg - сообщение пользователю,
- Icon - Поле Icon задает иконку результата в окне справа вверху, например, 'fa fa-code',
- Info - эта информация будет выводиться в диалоговом окне после выполнения операции (если указан type - то будет выведено окно alert справа наверху с разметкой из info),
- RedirectUrl - если указан и операция выполнена успешно, то будет выполнен редирект на указанный адрес,
- RefreshContainer - если указан селектор, то будет выполнено обновление компонентов в заданном контейнере.
- Actions - JSON для действий в браузере.
- Color - можно установить цвет фона для выбранных строк (галочками для групповой операции или для операции на строке).
- SELECT 2 - вызовы внешних действий (почта, смс, уведомление и т.д.). См. вызов внешних действий.
Примечание:
- Если вы планируете использовать формы для обработки выбранных строк (особенно в случае групповых операций): Кнопка модальной формы (as-form-modal) добавляется в groupOperationsToolbar для таблицы, в data-itemID кнопки автоматически при простановке галочек попадают itemID строк через запятую, например "123,456,789".
- Если указано RedirectUrl, то после успешного выполнения операции будет переход на указанный URL.
JS коллбеки (callbacks) для Таблицы
Вы можете вызвать JS коллбек после некоторых событий в таблице
- getItems - вызывается после показа данных таблицы
- update -вызывается после обновления поля
- create - создание элемента
- delete - вызывается после удаления строки
- operation - вызов после выполнения операции
- rowCheck - отмечена галочка для выбора строки таблицы.
Примеры:
$(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
Дополнительные режимы компонента Таблица
- Диаграмма Ганта (gantt)
- Канбан (kanban)
- Диаграмма Chartbar (chartbar)
- Карта с маркерами
- Временная линия (timeline)
- Карточки (card)
- Полоски прогресса (progress)
- Диаграммы и графики (chart)
- Календарь (calendar)
- Визуализация движения заявки по статусам
Дополнительные материалы
- Как редактировать колонку с датой
- Как реализовать подтаблицу (вложенная таблица)
- Как сделать операции только для некоторых строк
- Как использовать комментарии в таблицах
- Как связать таблицу и редактирование сущности (зависимая страница)
- Как убрать показ количества строк результата в заголовке таблицы
- Как сделать таблицу в модальном окне
- Как связать две таблицы
- Кастомная разметка в таблице
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты Работа со статусами. Управление статусами заявок, сущностей в личных кабинетах пользователей Работа с таблицами. Создание таблиц на сайте Работа с формами Работа с дашбордами личных кабинетов Диаграммы и графики в личном кабинете на сайте Календарь. Управление событиями в личном кабинете Терминал - рабочее пространство с окнами и вкладками
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта