SpreadJS 14
Features / Cells / Cell Span
In This Topic
    Cell Span
    In This Topic

    You can create a cell span in the cell, row header, or column header area by using the addSpan method. You can also clear cell spans using the removeSpan method.

    ell span in header and data areas

    The entire span is treated as an active cell when using the Tab key to move the active cell to the spanned cell. The active cell outline includes the entire span.

    Using Code

    This example creates a span in the header and data areas.

    JavaScript
    Copy Code
    activeSheet.setRowCount(4,1);
    activeSheet.setColumnCount(4,2);
    activeSheet.addSpan(0,0,3,3,GC.Spread.Sheets.SheetArea.colHeader);
    activeSheet.addSpan(0,0,3,3,GC.Spread.Sheets.SheetArea.rowHeader);
    activeSheet.addSpan(0,0,3,3,GC.Spread.Sheets.SheetArea.viewport);
    

    This example spans blocks of cells.

    Merging cells in a worksheet

    JavaScript
    Copy Code
    window.onload = function()
    {
      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
      var activeSheet = spread.getActiveSheet();
    
     // Merge three columns with origin at cell(1,1).
     activeSheet.addSpan(1, 1, 1, 3, GC.Spread.Sheets.SheetArea.viewport);
    
     // Merge 2 rows x 2 columns with origin at cell(3,3).
     activeSheet.addSpan(3, 3, 2, 2, GC.Spread.Sheets.SheetArea.viewport);
    
     // Set on every anchor cell
     var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
     cell.backColor("LightCyan");
     cell.value("Row binding");
     cell = activeSheet.getCell(3, 3, GC.Spread.Sheets.SheetArea.viewport);
     cell.backColor("LightPink");
     cell.value("Matrix binding");
     cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
     cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
    } 
    
    See Also