← 返回所有博客文章

不少用户在使用表格绑定时会碰到自动增加的行Style或者公式丢失的情况,出现这种问题的原因是我们在设计模板时,直接将样式设置在表格的单元格上,当表格行数增加时,增加的行并没有这些样式。

正确的做法时通过设置表格样式来设置风格,而不是直接针对单元格设置,有关表格的设置,大家可以参考:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples/tableStyle

或者使用设计器设计表格样式

 

1492668503(1)

 

虽然可以通过表格样式完成行列颜色边框的修改,但是确无法设置Formatter或者Formula。这时,就需要在绑定完成之后将这些信息进行一个复制。

通过下面的示例展示如何复制单元格的样式以及公式

下图为用设计其设计的一个模板,有两个表格,第一个表格钟红色字体设置了Formatter,第二个表格最后一列使用了公式。

1492668765(1)

我们所期望的效果是绑定后,新增的行也能有formatter和公式,如下图:

1492668929(1)

 

要做到这个效果,只需要在绑定后对表格首行的样式和公式进行一个复制,将其复制到表格其他行即可,代码如下;

        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
        spread.suspendPaint();
        spread.fromJSON(templateJSON);
        var sheet = spread.getActiveSheet();
        var source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
        sheet.setDataSource(source);
       
        var tables = sheet.tables.all();
        if(tables){
            for (var i = 0; i < tables.length; i++){
                copyTableStyle(sheet, tables[i])
            }
        }
        spread.resumePaint();
    };
    function copyTableStyle(sheet, table){
        var range = table.dataRange();
        var rowHeight = sheet.getRowHeight(range.row);
        for (var i = 1; i < range.rowCount; i++) {
            // Copy Style
            sheet.copyTo(range.row + i - 1, range.col, range.row + i, range.col, 1, range.colCount, GC.Spread.Sheets.CopyToOptions.style);
            // Copy Formula
            sheet.copyTo(range.row + i - 1, range.col, range.row + i, range.col, 1, range.colCount, GC.Spread.Sheets.CopyToOptions.formula);
        }
    }

 

通过上面的代码就可以完成所有table样式的复制了。

 

更多资源

如果您对SpreadJS产品感兴趣,请到官方网站下载试用:/developer/spreadjs

产品咨询电话:400-657-6008

Spread.Sheets中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

Spread.Sheets在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadSheets10/webframe.html