格式刷是Excel中常用到的功能，方便快捷深受广大群众喜欢，下面介绍下如何在SpreadJS中实现格式刷。
首先我们需要了解一个方法“sheet.copyTo”。
copyTo(fromRow, fromColumn, toRow, toColumn, rowCount, columnCount, option);
copyTo方法不仅能复制数据而且能复制数据、公式、样式等等。在CopyToOption Enumeration中我们可以看到所有可复制的属性。并且这些属性是可多选的GcSpread.Sheets.CopyToOption.Style | GcSpread.Sheets.CopyToOption.Span。
了解了copyTo方法后我们只要将用户选择的区域复制到需要格式化的区域就好了。下面我们看下具体步骤。
1. 点击格式化按钮，标记格式化状态，缓存格式化区域。多选区域不能格式化。
$("#btnFormat").click(function(){
var sheet = spread.getActiveSheet();
var selectionRange = sheet.getSelections();
if(selectionRange.length > 1){
alert("无法对多重选择区域执行此操作");
return;
}
if(isFormatPainting){
resetFormatPainting(sheet);
return;
}
fromRange = selectionRange[0];
isFormatPainting = true;
$("#btnFormat").text("格式化中");
});
2.选择格式化区域，如果被格式化区域小于之前选择区域则自动扩大，如果大于选择区域则自动重复格式化。
activeSheet.bind(GcSpread.Sheets.Events.SelectionChanged, function (e, info) {
if(isFormatPainting){
var sheet = spread.getActiveSheet();
resetFormatPainting(sheet);
sheet.isPaintSuspended(true);
var toRange = sheet.getSelections()[0];
//toRange biger than fromRange
if(fromRange.rowCount > toRange.rowCount){
toRange.rowCount = fromRange.rowCount;
}
if(fromRange.colCount > toRange.colCount){
toRange.colCount = fromRange.colCount;
}
//toRange must in Sheet
if(toRange.row + toRange.rowCount > sheet.getRowCount()){
toRange.rowCount = sheet.getRowCount()- toRange.row;
}
if(toRange.col + toRange.colCount > sheet.getColumnCount()){
toRange.colCount = sheet.getColumnCount()- toRange.col;
}
var rowStep = fromRange.rowCount, colStep = fromRange.colCount;
var endRow = toRange.row + toRange.rowCount - 1, endCol = toRange.col + toRange.colCount - 1;
// if toRange bigger than fromRange, repeat paint
for(var startRow = toRange.row; startRow <= endRow; startRow = startRow + rowStep){
for(var startCol = toRange.col; startCol <= endCol; startCol = startCol + colStep){
var rowCount = startRow + rowStep > endRow + 1 ? endRow - startRow + 1 : rowStep;
var colCount = startCol + colStep > endCol + 1 ? endCol - startCol + 1 : colStep;
sheet.copyTo(fromRange.row,fromRange.col, startRow, startCol, rowCount, colCount,GcSpread.Sheets.CopyToOption.Style | GcSpread.Sheets.CopyToOption.Span);
}
}
sheet.isPaintSuspended(false);
}
});
3.样式优化，当用户点击格刷后给鼠标光标旁增加一个格式刷提示。
$("body").mousemove(function(e){
var e=e?e:window.event;
if(!isFormatPainting){
$("#brushIcon").hide();
return;
}
var posx=e.pageX;
var posy=e.pageY;
var offset = $("#ss").offset();
if(posx> offset.left && posy>offset.top
&& posx < offset.left + $("#ss").width() && posy < offset.top + $("#ss").height()){
var brushIcon = $("#brushIcon");
brushIcon.show();
brushIcon.css("left", posx+12+"px");
brushIcon.css("top", posy+"px");
}
else{
$("#brushIcon").hide();
}
})
至此大功告成，可以直接在http://runjs.cn/code/ydu1tsfz上看到演示效果。
更多资源
SpreadJS中文学习指南：http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples
SpreadJS在线英文产品文档：http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html
如果您对SpreadJS产品感兴趣，可以到官方网站下载试用：/developer/spreadjs
如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn
.Ft4yd.png)
