Merged cells
This section covers creating and managing merged cells in your online spreadsheets.Documentation
Methods
The following methods help to deal with the merged cells programmatically.Method | Description |
---|---|
setMerge | Set the defined merged cell by the number of columns and rows given. Null to consider all selected cells.setMerge(mixed: String, colspan: Number, rowspan: number) : void @Param {string?} columnName such as A1 or null to all selected cells @Param {number} colspan - Number of columns @Param {number} rowspan - Number of rows |
getMerge | Get the merged cells by cell name or all merged cells when null is given.getMerge(mixed: String) : mixed @param {string?} Cellname such as A1 or null to return all merged cells. @return {array|object} array with colspan/rowspan or an object with all merged cells. |
removeMerge | Destroy the merged cells by column name param string columnName - Column name, such as A1. removeMerge(cellName: String) : null |
destroyMerge Destroy all merged cells | destroyMerge(); |
Events
Spreadsheet merge cells related events.Method | Description |
---|---|
onmerge | onmerge(worksheet: Object, newValue: Array, oldValue: Array) : void |
Initial Settings
The initial merge cells spreadsheet properties.Property | Description |
---|---|
mergeCells: array | Allow the user to define the initial default merged cells. |
Examples
A basic example of how to initiate and programmatically change the merged cells definitions.The methods for merged cell management are: setMerge, getMerge, removeMerge and destroyMerge
Open the merged cells example on JSFiddle.
Source code
<html> <script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <div id="spreadsheet"></div> <script> // Set the JSS spreadsheet license jspreadsheet.setLicense('ODNlY2Y5MDI3NzExNzBmYzQ0ZDhmMDRmZDhjYmQ1ZTM4Y2ZmNjBkOTQxNDkyYzdhOTY2YWJmNDc0OWQ0OWFjYmY2Y2ViOTM3MmZiZmEzYjU5N2VkNzIwNDVjZTA4MTMyMWZjMmM4OTVlYzJjN2NlODI0NDc2MzEyODFjNWQxNjYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TXpBek9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); var table = jspreadsheet(document.getElementById('spreadsheet'), { toolbar: [ ['Mazda', 2001, 2000, '2006-01-01 12:00:00'], ['Pegeout', 2010, 5000, '2005-01-01 13:00:00'], ['Honda Fit', 2009, 3000, '2004-01-01 14:01:00'], ['Honda CRV', 2010, 6000, '2003-01-01 23:30:00'], ], worksheets: [{ data: data, columnDrag: true, worksheetName: 'Merged Cells', minDimensions: [50, 5000], tableOverflow: true, tableWidth: '800px', tableHeight: '300px', columns: [ { type: 'text', width: '300px', title: 'Model', }, { type: 'text', width: '80px', title: 'Year', }, { type: 'text', width: '100px', title: 'Price', }, { type: 'calendar', width: '150px', title: 'Date', options: { format: 'DD/MM/YYYY HH24:MI', time: 1, } }, ], mergeCells: { A1: [2,2] }, columnDrag: true, }] }); </script> <button type="button" onclick="table[0].setMerge('A3', 2, 3);">Merge cell A3 (colspan: 2, rowspan: 3)</button> <button type="button" onclick="table[0].removeMerge('A3');">Destroy merge from A3</button> <button type="button" onclick="document.getElementById('console').innerHTML = JSON.stringify(table[0].getMerge());">Get all merged cells</button> <button type="button" onclick="table[0].destroyMerge();">Destroy all merged</button> </html>