数値の表示モード

SpreadJSは、列幅が十分に広くない場合に、日付や数字のカスタム表示モードをサポートしています。デフォルトでは、列の幅が値全体を表示できない場合、値は「#」でマスクして表示されます。これはマスクモードとして知られています。また、隣接するセルへのオーバーフローを許可することで、値全体を表示することもできます。これはオーバーフローモードとして知られています。

SpreadJSは、numbersFitModeがtrueの場合、数値の表示モードを変更します。 このモードは 数値/日付時刻 タイプと テキストの水平揃え設定で動作します。 セルのテキスト幅が列の幅よりも長く、デフォルトの (numbersFitMode = 0) の場合は、" ### "に置き換えられます。 numbersFitMode = 1 に設定した場合、コンテンツは テキストの オーバーフローポリシー に従って表示されます。
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); var sheet = spread.getActiveSheet(); spread.suspendPaint(); initData(); spread.resumePaint(); document.getElementById("mask").addEventListener("click", function(){ spread.options.numbersFitMode = 0; }); document.getElementById("overflow").addEventListener("click", function(){ spread.options.numbersFitMode = 1; }); document.getElementById("shrink").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col, ).wordWrap(false); if (!sheet.getActualStyle(row, col).shrinkToFit) { sheet.getCell(row, col).shrinkToFit(true); } else { sheet.getCell(row, col).shrinkToFit(false); } }); document.getElementById("showEllipsis").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col, ).wordWrap(false); sheet.getCell(row, col).shrinkToFit(false); if (!sheet.getActualStyle(row, col).showEllipsis) { sheet.getCell(row, col).showEllipsis(true); } else { sheet.getCell(row, col).showEllipsis(false); } }); document.getElementById("indentIncrease").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col).textIndent((sheet.getCell(row, col).textIndent() || 0) + 1); }); document.getElementById("indentDecrease").addEventListener("click", function(){ var row = sheet.getActiveRowIndex(); var col = sheet.getActiveColumnIndex(); sheet.getCell(row, col).textIndent((sheet.getCell(row, col).textIndent() || 0) - 1); }); function initData() { sheet.setValue(5, 3, "Left"); sheet.getCell(5, 3, 3).hAlign(0) sheet.setValue(6, 3, "Middle"); sheet.getCell(6, 3, 3).hAlign(1) sheet.setValue(7, 3, "Right"); sheet.getCell(7, 3, 3).hAlign(2) sheet.setValue(8, 3, "General"); sheet.getCell(8, 3, 3).hAlign(3) sheet.setValue(5, 5, new Date(2011, 10, 11)); sheet.getCell(5, 5, 3).hAlign(0) sheet.setValue(6, 5, new Date(2011, 10, 11)); sheet.getCell(6, 5, 3).hAlign(1) sheet.setValue(7, 5, new Date(2011, 10, 11)); sheet.getCell(7, 5, 3).hAlign(2) sheet.setValue(8, 5, new Date(2011, 10, 11)); sheet.getCell(8, 5, 3).hAlign(3) sheet.setColumnWidth(5, 35, 3); sheet.setValue(5, 8, 123456.789654); sheet.getCell(5, 8, 3).hAlign(0) sheet.setValue(6, 8, 123456.789654); sheet.getCell(6, 8, 3).hAlign(1) sheet.setValue(7, 8, 123456.789654); sheet.getCell(7, 8, 3).hAlign(2) sheet.setValue(8, 8, 123456.789654); sheet.getCell(8, 8, 3).hAlign(3) sheet.setColumnWidth(8, 35, 3); sheet.getRange(5, 5, 4, 1).formatter("mm-dd-yyyy"); } };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ja-jp" /> <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/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 class="sample-container"> <div id="ss" class="sample-spreadsheets"></div> </div> <div class="options-container"> <label><b>マスク</b> - 値をすべて表示できない場合に、マスク(#)で表示します。</label> <div class="options-row"> <input id="mask" type="button" value="マスク表示する" /> </div> <br> <label><b>オーバーフロー</b> - 値をすべて表示できない場合に、隣接するセルにはみ出して表示します。</label> <div class="options-row"> <input id="overflow" type="button" value="オーバーフロー表示する" /> </div> <br> <label>デフォルトでは、値はマスク(#)で表示されます。</label> <hr /> <!-- text control --> <div> <p> </p> <div class="options-row"> <input id="shrink" type="button" value="選択セルを縮小表示またはキャンセル" /> </div> <div class="options-row"> <input id="showEllipsis" type="button" value="選択セルを省略表示またはキャンセル" /> </div> <div class="options-row"> <input id="indentIncrease" type="button" value="選択セルのインデントを増やす" /> </div> <div class="options-row"> <input id="indentDecrease" type="button" value="選択セルのインデントを減らす" /> </div> </div> </div> </div> </body> </html>
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sample-options { float: right; height: 100%; } .options-toggle { display: none; } @media only screen and (max-width: 768px) { .options-toggle { display: block !important; top: 20px; left: -30px; width: 30px; height: 30px; position: absolute; background-color: #86bd00; line-height: 30px; text-align: center; padding: 4px; box-sizing: border-box; color: #fff; } .options-container { width: 280px !important; overflow: auto; height: 100%; padding: 22px; box-sizing: border-box; } .sample-container { width: 100% !important; height: 100%; overflow: hidden; float: left; } .sample-options { right: 0; padding: 0 !important; overflow: visible !important; position: absolute; box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25); transition: right .25s ease-in-out; z-index: 1000; } .sample-options.hidden { right: -280px; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; float: left; } } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-container { width: calc(100% - 280px); height: 100%; float: left; } .sample-spreadsheets { width: 100%; height: calc(100% - 25px); overflow: hidden; } #statusBar { bottom: 0; height: 25px; width: 100%; position: relative; } .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 { display: block; margin-bottom: 6px; } input { padding: 4px 6px; box-sizing: border-box; width: 100%; } input[type=button] { margin-top: 6px; display: block; } .summary { background-color: #e6e6fa; padding: 3px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }