|
Виджет Таблица |
В виджете Таблица можно выводить данные, получаемые из хранимых процедур SQL. Для выполнения действий над объектами в строках таблицы могут быть настроены смарт-кнопки (кнопки управления) — например, если в таблице отображается список задач, то с помощью кнопок можно менять их приоритет или переводить по маршруту, не заходя в карточку задачи.
Пример блока "Таблица".
В настройках виджета по ссылке Открыть дополнительные настройки будет вызвано окно дополнительных настроек:
Окно дополнительных настроек таблицы до выбора источника данных.
В качестве источника табличных данных вы можете выбрать конструктор запросов QueryBuilder или Хранимую процедуру.
QueryBuilder
Если вы используете в качестве источника данных QueryBuilder, нажмите на кнопку Редактировать в поле Построитель, после чего в новой вкладке откроется конструктор запросов:
Окно дополнительных настроек таблицы с источником данных QueryBuilder.
Хранимая процедура
Если вы используете в качестве источника данных Хранимую процедуру, введите наименование процедуры в поле Хранимая процедура (1) и нажмите кнопку Сохранить (2). После этого в таблице настроек отобразятся колонки отображаемой таблицы (3).
Окно дополнительных настроек таблицы с источником данных Хранимая процедура.
Порядок колонок в выводимой таблице можно изменить, перетаскивая строки таблицы настроек (мышкой по иконке 
).
Требования к хранимым процедурам описаны здесь.
Настройки виджета
Название |
Описание |
|---|---|
Хранимая процедура |
Название хранимой процедуры (указывается только название процедуры, без схемы и квадратных скобок) |
Количество строк итогов |
Количество последних строк, которые будут идентифицироваться как итоговые |
Брать стиль строки из |
Название колонки, в которой хранится описание стиля (атрибуты форматирования) отображения для строк таблицы |
Брать ссылку для строки из |
Название колонки, в которой хранится ссылка отображения данных для строк таблицы |
Настройки вывода колонок |
|
Блок кнопок В первой строке настроек таблицы настраивается вывод кнопок. Если для таблицы настроены кнопки, все они выводятся в одной, самой первой (левой) колонке. Для этой колонки можно только включить признак Отображать, указать имя и ширину. Сами кнопки настраиваются в блоке Кнопки управления, см ниже |
|
Отображать |
Если флажок отключен, то колонка не будет отображаться (по умолчанию отображаются все колонки) |
Столбец sql |
Название колонки в SQL-процедуре |
Имя |
Название колонки, как оно должно отображаться в таблице |
Ширина колонки |
Ширина колонки в % от общей ширины таблицы |
Колонка для функции DrillDown |
Название колонки, по которой будет строиться детализация (DrillDown).
Пример настройки детализации см. ниже В SPA порталах данные в хранимую процедуру передаются со строчной первой буквы. К примеру: в aspx в хранимую процедуру придёт значение "TaskId", а в SPA - "taskId" |
Хранимая процедура |
Название хранимой процедуры для детализации данных. Если процедура задана, то клику на значение в ячейке отображается новый виджет "Таблица" с набором данных, сформированным указанной хранимой процедурой. По нажатию на иконку Параметры хранимой процедуры: •@XmlParam xml (readonly) - параметр, в который передаются значения фильтра, привязанного к виджету, •@DrillDownField varchar(max) = null - название столбца SQL, для которого настраивается детализация (т.е. параметр определяет колонку, по которой кликнул пользователь). •@DrillDownParams varchar(max) = null - значение параметра для детализации (т.е. параметр определяет строку, по которой кликнул пользователь). •@UserID int = null - пользователь, для которого формируются данные. Пример настройки детализации см. ниже |
Детализация |
По нажатию на значок Пример настройки детализации см. ниже |
Брать ссылку из |
Если одна из колонок таблицы, возвращаемой хранимой процедурой, имеет формат ссылки (например, на задачу), то ее можно указать в данной настройке, и тогда соответствующая колонка будет отображаться в виде ссылки.
Формат ссылок можно посмотреть здесь |
Открывать в модальном окне |
Если флажок включен, то ссылка, указанная в колонке "Брать ссылку из", будет открываться в модальном окне, а если не включен - в текущей вкладке |
Другие настройки |
По нажатию на значок |
Выравнивание текста |
Выберите один из доступных вариантов выравнивания текста в данной колонке (по левому краю, по центру, по правому краю) |
Название группы колонок |
В "шапке" таблицы может быть создан верхний уровень, в котором несколько смежных колонок получают дополнительное общее название. В этой колонке это название указывается для всех группируемых колонок |
Брать стилизацию из колонки |
Если в данной настройке есть значение, то текст в этой колонке будет выводиться с указанными атрибутами форматирования (вместо форматирования по умолчанию) |
Брать класс из колонки |
Поле, содержащее набор css-классов для форматирования значений в данной колонке |
Режим фильтрации |
Определяет возможность динамической фильтрации данных по данной колонке в пользовательском режиме. Возможные значения: •Отсутствует (по умолчанию) •Обычный •Excel  |
Вывод информации |
Можно отметить один или несколько из флажков: •Текст •Изображение •Индикатор •График В зависимости от выбранного вывода информации, справа отображаются дополнительные настройки (см. ниже) |
Выделять красным отрицательные числа |
Если флажок включен, то отрицательные значения будут отображаться красным цветом |
Отображать 0 |
Если флажок включен, то нулевые значения будут отображаться как 0. Если флажок выключен, то вместо 0 будет отображаться пустая ячейка |
Вырезать теги |
Если флажок включен, то текст в колонке будет выводиться без учета html-тегов |
Переносить текст на другую строку |
Если флажок включен и для колонки задана ширина, то длинный текст в колонке автоматически переносится на другую строку с разбивкой по словам. Если флажок выключен и для колонки задана ширина, то не поместившийся текст обрезается (не отображается) |
Формат вывода данных |
|
Колонка значения |
Колонка из источника данных, которая содержит надпись, выводимую на индикатор (например, число) |
Высота %, px |
Высота изображения в пискелях или процентах |
Ширина %, px |
Ширина изображения в пискелях или процентах |
Стиль |
Дополнительные параметры вывода изображения — рамка, радиус закругления и пр. |
Выравнивание |
Определяет, будет ли индикатор отображаться слева или справа от значения в колонке |
Тип индикатора |
Возможные значения: •Текст (используется по умолчанию) •Иконка Если выбрано значение Иконка, то ниже отображается поле для выбора набора иконок. Пока доступен только набор Material. Название иконки из набора должно возвращаться в колонке SQL-процедуры, указанной в настройке Колонка значения |
Колонка цвета |
Колонка из источника данных, которая определяет цвет фона индикатора. Значение должно быть в формате hex: #XXXXXX |
Колонка значения |
Колонка из источника данных, которая содержит надпись, выводимую на индикатор, если тип индикатора Текст, или название иконки из набора, если тип индикатора Иконка (название должно начинаться с маленькой буквы) |
Стиль |
Дополнительные параметры отображения индикатора — рамка, радиус закругления и пр. |
Выравнивание |
Определяет, будет ли индикатор отображаться слева или справа от значения в колонке |
Колонка значения |
Колонка из источника данных, которая содержит конфигурацию графика в формате JSON: •Тип графика (линейный, столбчатый или круговая диаграмма) •Параметры стилизации графика •Данные |
Таблица с настройками кнопок для данного виджета. Настройка кнопок описана здесь. |
|
в колонке справа вызывается окно для настройки виджета с детализацией. 
открывается окно настройки таблицы детализации, аналогичное настройкам исходной таблицы.В виджете может быть настроена детализация данных по определенным полям. В соответствующей строке настроек в поле Хранимая процедура указывается процедура, которая будет формировать данные для детализации. Если хранимая процедура для детализации не указана, то будет вызвана хранимая процедура для самой таблицы. Детализация строится по полю, указанному в поле Колонка для функции DrillDown. Вид таблицы детализации настраивается по клику на значок в колонке Детализация.
В примере на рисунке ниже в параметр @DrillDownField будет передано название колонки 'fact', а в параметр @DrillDownParams - значение колонки fio, т.е фамилия менеджера.
Когда детализация настроена, в пользовательском интерфейсе значения в колонке отображаются в виде гиперссылок. По клику на значение (1) открывается новый виджет (2), построенный по данным хранимой процедуры для детализации по заданному полю. Для возврата к основной таблице нужно нажать ссылку Назад (3).
Вид таблицы в пользовательском интерфейсе.
Детализации могут быть вложенными: в настройках таблицы для хранимой процедуры можно настроить еще одну детализацию, и т.д.
Способ получения значений входящих параметров описан здесь.
Примеры хранимых процедур для виджетов можно посмотреть здесь.
Если предполагается форматировать выводимые в таблице данные, то в возвращаемых данных могут присутствовать поле с описанием стиля строки (указывается в поле "Брать стиль строки из") и поле с описанием стиля столбца (указывается в колонке "Брать стилизацию из колонки").
Настройки стилей в таблице.
Стили должны формироваться в указанном поле хранимой процедуры в виде текстовых значений.
Для описания стилей могут использоваться следующие типовые значения:
Значение |
CSS стиль, который соответствует данному значению |
|---|---|
Default |
Нет стиля |
Success |
background-color:#dff0d8 (зеленый) |
Info |
background-color:#d9edf7 (голубой) |
Warning |
background-color:#fcf8e3 (желтый) |
Danger |
background-color:#f2dede (розовый) |
TotalsRow |
font-weight: bold |
BackRed |
background-color: pink |
BackGreen |
background-color: lightgreen |
BackBlue |
background-color: lightblue |
BackYellow |
background-color: gold |
TextRed |
color: red |
TextGreen |
color: green |
Если необходимо задать несколько атрибутов, их надо перечислить через пробел.
Помимо типовых значений для задания стиля можно использовать любые значения цвета и фона в формате 'Color#ХХХХХХ' для цвета текста и 'Background#ХХХХХХ' для цвета фона (где ХХХХХХ - шестизначное обозначение цвета в формате HEX). Если надо задать оба значения, их можно перечислить через запятую 'Color#ХХХХХХ,Background#ХХХХХХ'. Например, 'Color#ff0000,Background#00ff00'.
Примеры JSON, описывающих график
Линейный график
{ "type":"polyline",
"points":[
{ "x":1, "y":2,
"color":"#DEDEDE"
},
{ "x":2,
"y":4,
"color":"#DEDEDE"
},
{ "x":3,
"y":8,
"color":"#DEDEDE"
},
{ "x":4,
"y":16,
"color":"#DEDEDE"
}
]
}
Столбчатый график
{ "type":"bar",
"points":[
{ "x":1,
"y":2,
"color":"#FF0000"
},
{ "x":2,
"y":4,
"color":"#00FF00"
},
{ "x":3,
"y":8,
"color":"#0000FF"
},
{ "x":4,
"y":16,
"color":"#DEDEDE"
}
]
}
Круговая диаграмма
{ "type":"pie",
"points":[
{ "x":1,
"y":2,
"color":"#FF0000"
},
{ "x":2,
"y":4,
"color":"#00FF00"
},
{ "x":3,
"y":8,
"color":"#0000FF"
},
{ "x":4,
"y":16,
"color":"#DEDEDE"
}
]
}
Пример хранимой процедуры с данными для графика
CREATE or ALTER PROCEDURE [dbo].[sp_table]
(
@XmlParam xml = null,
@DrillDownField varchar(max) = null,
@DrillDownParams varchar(max) = null,
@UserID int
)
AS
BEGIN
SET NOCOUNT ON;
declare @points table ( x int, y int, color varchar ( 100 ) )
insert into @points
select 1, 2, '#FF0000' union all
select 2, 4, '#00FF00' union all
select 3, 8, '#0000FF'
select 1 as Col1, ( select 'polyline' as [type], ( select x, y, color from @points for json path ) as points for json path, WITHOUT_ARRAY_WRAPPER ) as chartdata union all
select 2 as Col1, ( select 'bar' as [type], ( select x, y, color from @points for json path ) as points for json path, WITHOUT_ARRAY_WRAPPER ) union all
select 3 as Col1, ( select 'pie' as [type], ( select x, y, color from @points for json path ) as points for json path, WITHOUT_ARRAY_WRAPPER )
END
Полезные ссылки
Хранимые процедуры для виджетов
Настройка кнопок для виджета Таблица
