单元格样式是突出单元格数据信息的重要途径之一,SpreadJS 提供了样式接口使你能突出数据显示。可以设置单元格的前景色、边框或是网格线等样式信息。

SpreadJS 可以通过 getCell 方法来获取 Cell DOM 节点,进而设置样式信息,代码如下:

sheet.addSpan(1, 1, 1, 5);
sheet.setValue(1, 1, "Sale Data Analysis");
sheet.getCell(1, 1).font("bold 16px arial");
sheet.getCell(1, 1).foreColor("white");
sheet.getCell(1, 1).backColor("Purple");.
 

另外,可以通过 sheet 下的 setBorder 方法设置范围单元格的边框。代码如下:

sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.thin), { outline: true });
sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Blue", $.wijmo.wijspread.LineStyle.dotted), { inside: true });
sheet.setBorder(new $.wijmo.wijspread.Range(5, 1, 1, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.double), { bottom: true });
 

同时,也可以改变网格线的颜色,甚至是隐藏网格线来突出数据的显示。

sheet.setGridlineOptions({showVerticalGridline: false, showHorizontalGridline: false});
 

你可以在初始化控件时设置这些样式信息,关于如何使用 Spread可以参考 SpreadJS 快速启动

更多关于 SpreadJS 的示例请参考:/developer/wijmojs