Форматирование электронной таблицы Essential JavaScript: форматирование ячеек

Это второй блог в нашей серии о форматировании Таблицы Syncfusion JavaScript. Для этого мы объясним параметры форматирования ячеек, такие как форматирование чисел, форматирование текста и условное форматирование. Если вы пропустили первый блог, вы можете ознакомиться с ним в разделе Форматирование основной таблицы JavaScript: форматирование чисел.

Функции форматирования ячеек в Syncfusion JavaScript Spreadsheet позволяют изменять шрифт, размер шрифта, цвет, атрибуты, такие как полужирный или курсив, и многое другое для ячейки или диапазона ячеек.

Форматирование текста помогает улучшить видимость данных при работе с большим листом. Различные типы параметров форматирования ячеек, доступные в элементе управления электронной таблицей:

Стиль шрифта
Выравнивание текста
Вертикальное выравнивание
Цвет заливки
Границы
Перенести текст
Объединить ячейки

Давайте узнаем о них!

Стиль шрифта

Каждый тип шрифта и стиля имеет определенное назначение. Это напрямую отражает тон того, что мы пытаемся показать в электронной таблице. Электронная таблица Syncfusion JavaScript поддерживает несколько настраиваемых параметров стиля шрифта, таких как семейство шрифтов, размер шрифта, выделение полужирным шрифтом, курсивом, цветом и подчеркиванием.

Семейство шрифтов по умолчанию — Calibri, а размер шрифта по умолчанию — 11 pt.

Выравнивание текста

Выравнивание текста используется для повторного выравнивания текста в ячейке. Выравнивание текста по умолчанию по левому краю. У нас есть три варианта выравнивания:

Левый
Центр
Правильно

Параметр выравнивания текста можно найти на вкладке Главная на ленте элемента управления электронной таблицей.

Вертикальное выравнивание

Выравнивание по вертикали используется для вертикального выравнивания текста в ячейке. Вертикальное выравнивание по умолчанию — по нижнему краю. У нас есть варианты выравнивания дерева:

Вверх
Середина
Нижний

Параметр вертикального выравнивания можно найти на вкладке Главная на ленте элемента управления электронной таблицей.

Цвет заливки

Цвет заливки полезен для привлечения внимания к определенной ячейке или диапазону ячеек. Вы можете использовать его, чтобы выделить результат вычисляемой формулы или конкретное значение. Параметр цвета заливки можно найти на вкладке Главная ленты в элементе управления электронной таблицей.

Граница

Добавление границ на лист Excel — это самый простой способ выделить определенные данные, которые нам нужно отобразить в виде табличных данных. Различные типы параметров границ, доступные в электронной таблице:

Вы также можете изменить цвет, размер и стиль границы. В электронной таблице поддерживаются следующие типы размеров и стилей:

Перенести текст

Перенос текста позволяет отображать большое содержимое в виде нескольких строк в одной ячейке. По умолчанию поддержка переноса текста включена.

Используйте свойство allowWrap, чтобы включить или отключить поддержку переноса текста в компоненте электронных таблиц.

Объединить ячейки

Объединить ячейки позволяет объединить две или более ячеек в одной строке или столбце в одну ячейку. Когда ячейки с несколькими значениями объединяются, данные самой верхней левой ячейки будут данными для объединенной ячейки.

По умолчанию опция объединения ячеек включена. Он часто используется, когда заголовок должен располагаться по центру определенного раздела электронной таблицы.

Используйте свойство allowMerge, чтобы включить или отключить параметр объединения ячеек в электронной таблице.

Где найти стили ячеек?

Параметры форматирования ячейки находятся на вкладке "Главная" на ленте. Включенные параметры включают шрифты покрытия, цвет, цвет заливки и границы, как показано на следующем снимке экрана.

Добавление форматирования ячеек в электронную таблицу с помощью кода

В элементе управления электронной таблицы JavaScript можно добавить форматирование ячеек с помощью кода, используя общедоступные методы cellFormat и setBorder и передав параметры формата и диапазон соответственно. Кроме того, вы можете использовать свойство style, чтобы установить строку формата ячейки в объекте ячейки.

В следующем примере кода демонстрируется форматирование ячейки.

/** 
* Cell formatting sample 
*/ 

let columns: ColumnModel[] = [{ width: 80 }, { width: 140 }, { width: 100 }, { width: 232 }, { width: 120 }, { width: 100 }, { width: 100 }, { width: 120 }, { width: 80 }]; 
let rows: RowModel[] = [
{
height: 36, 
//Applying cell formatting through cell binding. 
cells: [{ style: { textAlign: 'right' } }, { style: { textIndent:  '2pt' } }, { style: { textAlign: 'right' } }, 
{ style: { textIndent: '2pt' } }, { index: 5, style: { textAlign: 'right' } }, 
{ index: 7, style: { textAlign: 'center' } }, { index: 8, style: { textAlign: 'right' } }] 
}, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, 
{ height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, { height: 42 }, 
{ height: 42 }, { height: 42 }]; 
let sheet: SheetModel[] = [{
 name: 'Order Details',
 ranges: [{ dataSource: (dataSource as any).orderDetails }],  
 columns: columns,
 rows: rows,
 showGridLines: false 
}]; 
//Initialize Spreadsheet component 
let spreadsheet: Spreadsheet = new Spreadsheet({
  sheets: sheet,
  showFormulaBar: false,
  showRibbon: false,
  created: createdHandler,
  beforeCellRender: beforeCellRender
}); 
spreadsheet.appendTo('#spreadsheet'); 
function createdHandler(): void {
//Applying cell formatting dynamically using cellFormat method spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#4b5366', color: '#ffffff', fontSize: '12pt' }, 'A1:I1'); spreadsheet.cellFormat({ fontWeight: 'bold', textIndent: '2pt' }, 'B2:B16'); 
spreadsheet.cellFormat({ fontStyle: 'italic', textIndent: '2pt' }, 'D2:D16'); 
spreadsheet.cellFormat({ textIndent: '2pt' }, 'E1:E16'); spreadsheet.cellFormat({ textIndent: '2pt' }, 'G1:G16'); spreadsheet.cellFormat({ textAlign: 'center', fontWeight: 'bold' }, 'H2:H16'); 
spreadsheet.cellFormat({ fontFamily: 'Helvetica New', verticalAlign: 'middle' }, 'A1:I16'); 
//Applying border to a range 
spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A1:I16', 'Outer'); 
spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A2:I15', 'Horizontal'); 
} 
function beforeCellRender(args: CellRenderEventArgs): void {
if (!spreadsheet.isOpen && spreadsheet.activeSheetIndex === 0) {
if (args.cell && args.cell.value) {
//Applying cell formatting before rendering the particular cell switch (args.cell.value) {
 case 'Delivered':
 spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-
 through' }, args.address);
 break;
 case 'Shipped':
 spreadsheet.cellFormat({ color: '#62c9e8' }, args.address); break;  
 case 'Pending': spreadsheet.cellFormat({ color: '#FFC107', 
 textDecoration: 'underline' }, args.address); 
 break; 
 case 'Cancelled':
 spreadsheet.cellFormat({ color: '#ff5b5b' }, args.address);
 break; 
   } 
  } 
 } 
}

На следующем снимке экрана показано форматирование ячеек, примененное с помощью кода в электронной таблице.

Вывод

Надеюсь, теперь вы лучше понимаете функцию форматирования ячеек в элементе управления Syncfusion JavaScript Spreadsheet. В нашем следующем блоге по форматированию мы можем обсудить функцию условного форматирования или все, что вы ожидаете от электронной таблицы. Пожалуйста, поделитесь своими мыслями в разделе комментариев ниже.

Если вы уже являетесь пользователем Syncfusion, вы можете загрузить установку продукта Essential Studio for JavaScript, чтобы опробовать этот элемент управления. В противном случае вы можете скачать бесплатную 30-дневную пробную версию.

Если у вас есть какие-либо вопросы об этих функциях, свяжитесь с нами через наши форумы поддержки, Direct-Trac или портал обратной связи. Мы рады Вам помочь!

Первоначально опубликовано на https://www.syncfusion.com 29 октября 2020 г.

Форматирование электронной таблицы Essential JavaScript: форматирование ячеек