使用电子表格控件SpreadJS定制外观（三）：如何为单元格添加水印设置边距和标签

SpreadJS最新试用版

添加水印

水印指的是，当单元格的值为空时，显示的内容。

你可以为单元格设置如下水印。

要添加水印，你需要：

1. 创建一个Style的实例；
2. 设置该实例的watermark属性；
3. 使用setStyle方法将该实例设置到单元格，列和行中。

水印文字不会溢出到该单元格的外面。

示例代码

此代码将会在 B1 和 B2 单元格中设置水印。

var type = new GC.Spread.Sheets.Style();type.watermark = "User name";sheet.setStyle(0, 1, type);var type = new GC.Spread.Sheets.Style();type.watermark = "Password";sheet.setStyle(1, 1, type);

单元格内边距和标签

你可以设置单元格内边距，字体，前景色，对齐和是否可见等。

使用cellPadding来设置单元格的内边距。

示例代码

以下代码给一个单元格设置了标签（watermark），并给单元格设置了一个内边距。

var type = new GC.Spread.Sheets.Style();type.watermark = "User name";type.cellPadding = "20";type.labelOptions = {alignment:GC.Spread.Sheets.LabelAlignment.topLeft, visibility: GC.Spread.Sheets.LabelVisibility.visible};activeSheet.setStyle(0, 1, type);activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);activeSheet.getRange(-1, 1, -1, 1).width(150);var combo = new GC.Spread.Sheets.CellTypes.ComboBox();combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);activeSheet.setCellType(2, 1, combo, GC.Spread.Sheets.SheetArea.viewport);activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).watermark("ComboBox Cell Type").cellPadding('10 10 20 10');activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).labelOptions({alignment: GC.Spread.Sheets.LabelAlignment.bottomCenter, foreColor: 'yellowgreen', font: 'bold 15px Arial'});activeSheet.getRange(2, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);

你可以设置单元格的对齐方式和缩进。

单元格对齐有两个方向：

1. 水平对齐（hAlign方法），
2. 垂直对齐（vAlign方法）。

你可以使用textIndent来设置单元格内容的缩进方式。

以下代码给 B2 单元格设置了水平方向和垂直方向的对齐方式，给 B3 单元格设置了缩进。

// Set the horizontal and vertical alignment to centervar cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);cell.value("Alignment");// Indent the string.cell = activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport);cell.textIndent(2);cell.value("Indent");

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询在线客服>>