格式刷是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