Question

如何设置表格开发控件 SpreadJS 单元格样式

Answer 1

通过style的相关接口进行设置，单元格的样式都在style中保存。

可以构造一个样式并设置不同的属性，例如：

var style = new GC.Spread.Sheets.Style();

style.backColor = 'red'; 

style.foreColor = 'green'; 

style.isVerticalText = 'true';

之后，你可以将此样式设置给单元格, 行, 或者列:

sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport); 

sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport); 

sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport);

样式在不同的层级结构中具有不同的优先级别, 单元格 > 行 > 列。

可以构造多个样式并设置属性，用于对比看出优先级，例如：

1.构造单元格的样式

var cellStyle = new GC.Spread.Sheets.Style();

cellStyle.backColor = 'red'; 

2.构造行样式

var rowStyle = new GC.Spread.Sheets.Style();

rowStyle .backColor = 'green'; 

3.构造列样式

var colStyle = new GC.Spread.Sheets.Style();

colStyle.backColor = 'yellow'; 

4.给单元格，整行，整列设置上述样式：

sheet.setStyle(5,5,cellStyle, GC.Spread.Sheets.SheetArea.viewport); 

sheet.setStyle(5,-1,rowStyle, GC.Spread.Sheets.SheetArea.viewport); 

sheet.setStyle(-1,5,colStyle, GC.Spread.Sheets.SheetArea.viewport); 

sheet.setStyle(-1,6,colStyle, GC.Spread.Sheets.SheetArea.viewport); 

上述代码执行效果如下图所示：

由此可见，样式的优先级：单元格 > 行 > 列

Answer 2

单元格中单一颜色的问题略显枯燥，想要实现单元格中文字丰富的样式，只需要自定义HTML单元格。

由于我们只是对单元格展示做调整所以我们直接继承GcSpread.Sheets.TextCellType，然后重写paint方法即可。
function HTMLCellType() {}HTMLCellType.prototype = new GcSpread.Sheets.TextCellType;HTMLCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) { var DOMURL = window.URL || window.webkitURL || window; var cell = context.sheet.getCell(context.row, context.col); var img = cell.tag(); if (img) { try{ ctx.save(); ctx.rect(x, y, w, h); ctx.clip(); ctx.drawImage(img, x + 2, y + 2) ctx.restore(); cell.tag(null); return; } catch(err){ GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, "#HTMLError", x, y, w, h, style, context]) cell.tag(null); return; } } var svgPattern = '<svg xmlns="http://www.w3.org/2000/svg" width="{0}" height="{1}">' + '<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font:{2}">{3}</div></foreignObject></svg>'; var data = svgPattern.replace("{0}", w).replace("{1}", h).replace("{2}", style.font).replace("{3}", value); var doc = document.implementation.createHTMLDocument(""); doc.write(data); data = (new XMLSerializer()).serializeToString(doc.body.children[0]); img = new Image(); img.src = 'data:image/svg+xml;base64,'+window.btoa(data); cell.tag(img); img.onload = function () { context.sheet.repaint(new GcSpread.Sheets.Rect(x, y, w, h)); }};

示例中我们使用svg将html元素保存为Image对象，然后保存在cell的tag中，spread重绘时展示出来。