SpreadJS 格式刷

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