Understand Cell Style Composite in SpreadJS

SpreadJS not only provides style for the cell, but also for the row, the column, and the sheet, so that you can quickly customize the appearance of a cell or a range of cells (or rows or columns) or default style for all cells in the sheet. The actual style of a cell is composited in priority by the style of the cell, the style of the row which the cell is in, the style of the column which the cell is in, and the default style of the sheet. So that you can make the cell show some special effect with few code. This is a sample shows result of compositing back color, border, fore color of cell/row/column/sheet.

var ns = $.wijmo.wijspread;  
var style = sheet.getDefaultStyle();  
style.backColor = "lightgray";  
style.foreColor = "purple";  
style.borderLeft = new ns.LineBorder("red", ns.LineStyle.hair);  
style.borderTop = new ns.LineBorder("red", ns.LineStyle.hair);  
style.borderRight = new ns.LineBorder("red", ns.LineStyle.hair);  
style.borderBottom = new ns.LineBorder("red", ns.LineStyle.hair);  

var cell = sheet.getCells(3, 3, 7, 7);  
cell.value(10);  
cell.formatter("0.0%");  
cell.backColor("lightgreen");  
cell.borderLeft(new ns.LineBorder("gray", ns.LineStyle.double));  
cell.borderTop(new ns.LineBorder("gray", ns.LineStyle.double));  
cell.borderRight(new ns.LineBorder("gray", ns.LineStyle.double));  
cell.borderBottom(new ns.LineBorder("gray", ns.LineStyle.double));  

var row = sheet.getRows(2, 8);  
row.backColor("lightblue");  
row.borderLeft(new ns.LineBorder("green", ns.LineStyle.dashed));  
row.borderRight(new ns.LineBorder("green", ns.LineStyle.dashed));  

var col = sheet.getColumns(2, 8);  
col.backColor("pink");  
col.borderTop(new ns.LineBorder("blue", ns.LineStyle.dashed));  
col.borderBottom(new ns.LineBorder("blue", ns.LineStyle.dashed));  

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS. For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.