列と行の分割サイズ

SpreadJSは、分割サイズ変更の機能をサポートしています。 ユーザーは列や行のサイズを変更しながら、隣接している行や列のサイズも変更できます。たとえば、列Aのサイズを変更すると列Bもサイズが変更されますが、他の列はそのままのサイズに維持されます。これにより、他の行や列にあるデータが表示領域から移動するのを防ぎます。

ResizeModeをsplitに設定すると、行と列の両方でこの機能を有効にできます。 なお、通常のサイズ変更時にCtrlキーを使用すると、分割サイズ変更動作を有効にできます。
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var rowResizeMode = _getElementById("rowResizeMode"); rowResizeMode.addEventListener("change", function () { spread.options.rowResizeMode = parseInt(rowResizeMode.options[rowResizeMode.selectedIndex].value, 10); }); var columnResizeMode = _getElementById("columnResizeMode"); _getElementById("columnResizeMode").addEventListener("change", function () { spread.options.columnResizeMode = parseInt(columnResizeMode.options[columnResizeMode.selectedIndex].value, 10); }); for (var col = 0; col < 5; col++) { sheet.setColumnWidth(col, 147); } var colHeader = GC.Spread.Sheets.SheetArea.colHeader; sheet.setRowHeight(0, 50, colHeader); for (var row = 0; row < 12; row++) { sheet.setRowHeight(row, 36); for (col = 0; col < 5; col++) { sheet.getCell(row, col) .cellPadding('0 0 0 10') .vAlign(GC.Spread.Sheets.VerticalAlign.center); } } sheet.setValue(0, 0, 'Company Name', colHeader); sheet.setValue(0, 1, 'City', colHeader); sheet.setValue(0, 2, 'State', colHeader); sheet.setValue(0, 3, 'Phone', colHeader); sheet.setValue(0, 4, 'Fax', colHeader); sheet.setArray(0, 0, [ ["Super Mart of the West", "Bentonville", "Arkansas", "(800) 555-2797", "(800) 555-2171"], ["Electronics Depot", "Atlanta", "Georgia", "(800) 595-3232", "(800) 595-3231"], ["K&S Music", "Minneapolis", "Minnesota", "(612) 304-6073", "(612) 304-6074"], ["Tom's Club", "Issaquah", "Washington", "(800) 955-2292", "(800) 955-2293"], ["E-Mart", "Hoffman Estates", "Illinois", "(847) 286-2500", "(847) 286-2501"], ["Walters", "Deerfield", "Illinois", "(847) 940-2500", "(847) 940-2501"], ["StereoShack", "Fort Worth", "Texas", "(817) 820-0741", "(817) 820-0742"], ["Circuit Town", "Oak Brook", "Illinois", "(800) 955-2929", "(800) 955-9392"], ["Premier Buy", "Richfield", "Minnesota", "(612) 291-1000", "(612) 291-2001"], ["ElectrixMax", "Naperville", "Illinois", "(630) 438-7800", "(630) 438-7801"], ["Video Emporium", "Dallas", "Texas", "(214) 854-3000", "(214) 854-3001"], ["Screen Shop", "Mooresville", "North Carolina", "(800) 445-6937", "(800) 445-6938"] ]); sheet.resumePaint(); } function _getElementById(id){ return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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"> <p>この機能を有効にするには、サイズ変更モードをsplitに変更します。</p> <p>列サイズ変更モードをsplitに設定し、列Aの幅を変更した場合には、列Bは自動的にサイズ変更され、残りの列は同じサイズのままになります。</p> <label for="columnResizeMode">列サイズ変更モード</label> <select id="columnResizeMode"> <option value="0">normal</option> <option value="1">split</option> </select> </div> <div class="option-row"> <label for="rowResizeMode">行サイズ変更モード</label> <select id="rowResizeMode"> <option value="0">normal</option> <option value="1">split</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; } label { margin-bottom: 6px; } input { padding: 4px 6px; } input[type=number] { width: 40px; } hr { border-color: #fff; opacity: .2; margin-top: 20px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }