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

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

转帖|使用教程|编辑：鲍佳佳|2020-07-20 10:12:57.547|阅读 240 次

概述：SpreadJS作为一款电子表格控件，它不仅可以修改表格的边框和网格线，还可以为单元格添加水印、实现单元格的对齐缩进以及为单元格设置标签和边距等。本文讲述实现上述功能的方法和代码

相关链接：

SpreadJS是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，具有 “高性能、跨平台、与 Excel 高度兼容”的产品特性，为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。

点击下载SpreadJS最新试用版

添加水印

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

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

要添加水印，你需要：

创建一个Style的实例；
设置该实例的watermark属性；
使用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);

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

单元格对齐有两个方向：

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

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

参考代码

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

// Set the horizontal and vertical alignment to center var 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");