如何设置 SpreadJS 单元格样式

发布时间:2014/05/06 00:05 发布者:iceman

返回博客中心

 

单元格样式是突出单元格数据信息的重要途径之一,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


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网