Форматирование виджета "Таблица"
Форматирование может применяться в следующих элементах виджета:
Заголовки столбцов
Ячейки данных
При форматировании шапки можно использовать следующие зарезервированные команды:
@value
- значение ячейки шапки;
При форматировании ячеек данных можно использовать следующие зарезервированные команды:
@value
- значение в ячейке таблицы;@row
-массив значений строчки;@row[0]
- обращение к элементу массива через индекс столбца;
@column
- название столбца в таблице;@columnIndex
- позиция столбца. Отсчет начинается с 0;@rowIndex
- позиция строки. Отсчет начинается с 0.
При форматировании также можно использовать HTML разметку для более глубоко форматирования текста.
Примеры форматирования
Добавление подписи к значению
Вы можете добавить любую надпись к значениям таблицы. Например, можно округлить большое числовое значение и добавить к нему фразу млн. руб. Для этого необходимо выполнить следующую команду:
Math.round(@value/100000) + ' млн. руб'
Где
Math.round(@value/100000)
- округление числового значения и деление его на 100000;
+ ' млн. руб'
- добавленный текст.
Изменение названия столбцов
Вы можете как полностью изменить название столбца, так и добавить текст к существующему значению. В нашем примере мы добавим слово руб. к фразам Стоимость реализации товара и Закупочная стоимость, а также заменим слово Город на Города России. Для этой цели мы введем следующую команду в поле Форматирование текста раздела Заголовки столбцов:
@value == 'Стоимость реализации товара' ? @value + " руб." : @value == 'Закупочная стоимость' ? @value + " руб." : @value == 'Город' ? @value = "Города России" : " "
Где@value == 'Стоимость реализации товара'
, @value == 'Закупочная стоимость'
– условие, при котором названием колонки является фраза Стоимость реализации товара / Закупочная стоимость;@value + " руб."
– текст (руб.), который должен добавиться к названию колонки при удовлетворении условия;@value == 'Город'
– условие, при котором названием колонки является фраза Город;@value = "Города России"
– замена текста, удовлетворяющего условию (Город) на фразу Города России.
Изменение значений в ячейках
При необходимости возможно заменить значения в ячейках таблицы. В нашем примере мы заменим буквы Ж и М на слова Женщины и Мужчины. Для этого мы введем следующую команду в поле Текст раздела Ячейки данных при включённом форматировании:
@value == "Ж" ? @value = "Женщины": @value == "М" ? @value = "Мужчины": @value
Где@value == "Ж"
– условие (для удовлетворения условия значение должно быть Ж);@value = "Женщины"
- замена текста, если условие удовлетворено.
Изменение цвета фона ячейки
Цвет фона ячеек можно изменить в зависимости от значения ячейки. Например, можно задать определенный цвет фона для различных категорий значений. В нашем примере мы зададим красный цвет для городов Самара и Барнаул, зеленый - для городов Нижнеудинск и Севастополь, и синий - для Москвы. Для этого мы введем следующую команду в поле Фон раздела Ячейки данных при включенном форматировании:
@value =='Самара' || @value == 'Барнаул' ? 'red': @value =='Москва' ? 'blue' : @value == 'Нижнеудинск' || @value == 'Севастополь' ? 'green':''
Где@value =='Самара' || @value == 'Барнаул'
– условие (значение должно быть либо Самара
, либо Барнаул
);||
– логический оператор ИЛИ;'red'
- назначение цвета при удовлетворении условия;@value =='Москва'
– условие (значение должно быть Москва
);'blue'
– назначение цвета при удовлетворении условия;@value == 'Нижнеудинск' || @value == 'Севастополь'
– условие (значение должно быть либо Нижнеудинск
, либо Севастополь
)'green'
– назначение цвета при удовлетворении условия.
Возможно использование различных цветовых форматов:
HTML имя цвета (например, red)
RGBA (например, rgba(225,0,0,225))
HEX (например, #ff0000)
Изменение цвета значений
Вы можете изменять цвет значений в ячейках таблицы в зависимости от различных условий. Например, можно одну категорию значений обозначить одним цветом, а другую - другим. В нашем примере мы сравним значения ячеек в двух столбцах, и если разница будет больше 100, выделим эти значения синим цветом, в противном случае - красным. Для этого мы введем следующую команду в поле Цвет текста раздела Ячейки данных:
@row[0] - @row[1] > 100 ? 'blue':'red'
Где@row[0]
, @row[1]
- обращение к элементу массива через индекс столбца;@row[0] - @row[1]
- получение разницы между значениями из столбцов с индексами 0
и 1
;> 100 ? 'blue'
- выделение значений, между которыми разница больше 100, синим цветом;:'red'
– выделение всех остальных значений красным цветом.
Возможно использование различных цветовых форматов:
HTML имя цвета (например, red)
RGBA (например, rgba(225,0,0,225))
HEX (например, #ff0000)
Форматирование значений ячеек
Вы можете отформатировать значения ячеек, чтобы они отображались особым образом в зависимости от текста значения. Например, можно выделить жирным шрифтом определенные категории значений. В нашем примере мы выделим слово Москва во всей таблице. Для этого мы введем следующую команду в поле Форматирование раздела Ячейки данных:
@value=='Москва'?'<b>' + @value +'</b>':@value
Где @value=='Москва'
– искомое значение, которое нужно выделить жирным шрифтом;<b>' + @value +'</b>'
– выделение значения жирным шрифтом с помощью тэгов;:@value
– указывает на то, что все остальные значения остаются без изменения.
Изменение цвета значений столбцов и строк
Вы можете изменить цвет всех значений определенного столбца или строки. Это может потребоваться, например, для улучшения читаемости и восприятия данных, визуального разделения данных на группы и т.д. В нашем примере мы продемонстрируем, как изменить цвет значений первого столбца и третьей строки таблицы.
Изменение цвета значений столбца
В поле Форматирование секции Ячейки данных введите следующую команду:
@columnIndex == 0? "rgba(250,0,0,1.0)":"rgba(0,0,0,1.0)"
Где
@columnIndex == 0
– индекс столбца, в котором необходимо произвести изменения. Так как отсчет ведется с нуля, первый столбец имеет индекс 0
.
"rgba(250,0,0,1.0)":"rgba(0,0,0,1.0)"
– цвет значений столбца (красный).
Изменение цвета значений строки
Аналогичным образом можно изменить цвет всех значений строки, используя соответствующую переменную. Для этого в поле Форматирование секции Ячейки данных необходимо ввести следующую команду:
@rowIndex == 2? "rgba(0, 0, 255,1.0)":"rgba(0,0,0,1.0)"
Где
@rowIndex == 2
– индекс строки, в которой необходимо произвести изменения (отсчет с 0
).
"rgba(0, 0, 255,1.0)":"rgba(0,0,0,1.0)"
– цвет значений столбца (синий).
Отображение номеров столбцов и строк
Вы можете отобразить номера столбцов и строк, чтобы, например, упростить навигацию в больших наборах данных, иметь возможность быстро ссылаться на определенную ячейку и т.д.
Отображение номеров столбцов
Для отображения номеров столбцов необходимо ввести следующую команду в поле Форматирование текста секции Заголовки столбцов:
@value + "\n" + @columnIndex
Где
@value
– заголовок столбца.
"\n"
– перенос строки.
@columnIndex
– индекс столбца.
Отображение номеров строк
Для отображения номеров строк введите следующую команду в поле Форматирование секции Ячейки данных:
@columnIndex==0 ? @rowIndex+1: @value
Данная команда возвращает номера строк в колонке с указанным индексом (@columnIndex==0
), начиная с 1:
Смотрите также
На этой странице
Время чтения: 2 мин.
Нужна дополнительная помощь?