区域自动合并

SpreadJS支持任何单元格区域的自动合并。 如果行和列中的相邻单元格的文本相同并且不在任何合并单元格内,则它们将自动合并。

您可以使用autoMerge方法为行和列设置自动合并。 以下代码将优先在列方向上然后在行方向上应用自动合并。 以下代码将优先在行方向上然后在列方向上应用自动合并。 以下代码将在列方向应用自动合并。 以下代码将在行方向上应用自动合并。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var switchAutoMergeDirection = _getElementById("switchAutoMergeDirection"); switchAutoMergeDirection.addEventListener("change", function (event) { var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); //remove old auto merge range sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.none); //add new auto merge range sheet.autoMerge(range, parseInt(event.target.value)); sheet.resumePaint(); }); spread.suspendPaint(); spread.options.showVerticalScrollbar = false; spread.options.showHorizontalScrollbar = false; spread.options.tabStripVisible = false; //init sheet var sheet = spread.getActiveSheet(); sheet.defaults.rowHeight = 40; sheet.defaults.colWidth = 100; sheet.defaults.colHeaderRowHeight = 40; sheet.defaults.rowHeaderColWidth = 60; sheet.setRowCount(5); sheet.setColumnCount(7); var defaultStyle = sheet.getDefaultStyle(); defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; sheet.setDefaultStyle(defaultStyle); ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].forEach(function (value, index) { sheet.setValue(0, index, value, GC.Spread.Sheets.SheetArea.colHeader); }); ["12:00", "13:00", "14:00", "15:00", "16:00"].forEach(function (value, index) { sheet.setValue(index, 0, value, GC.Spread.Sheets.SheetArea.rowHeader); }); sheet.setArray(0, 0, [ ["Walker", "Morning Show", "Morning Show", "Sport", "Weather", "N/A", "N/A"], ["Today Show", "Today Show", "Sesame Street", "Football", "Market Watch", "N/A", "N/A"], ["Today Show", "Today Show", "Kid Zone", "Football", "Soap Opera", "N/A", "N/A"], ["News", "News", "News", "News", "News", "N/A", "N/A"], ["News", "News", "News", "News", "News", "N/A", "N/A"] ]); //apply auto merge var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1); sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow); spread.resumePaint(); } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> Changes the auto merge direction. <select id="switchAutoMergeDirection"> <option value="0">None</option> <option value="1">column</option> <option value="2">row</option> <option value="3" selected="selected">columnRow</option> <option value="4">rowColumn</option> </select> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } #switchAutoMergeDirection { margin: 10px 0px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }