数字自适应模式

当列的宽度不足以显示整个值时,SpreadJS支持日期和数字的自适应显示模式。 默认情况下,当列宽无法显示完整值时,该值将会隐藏(#),这称为隐藏模式。 您也可以通过允许其溢出到相邻单元格中来显示完整值,这称为溢出模式。

当 numbersFitMode 为true时,SpreadJS将更改数字自适应模式。 该模式适用于数字/日期类型和 水平的文本方向。 当单元格文本的宽度大于列的宽度时,默认为 (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); } };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <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$/spread/source/js/license.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="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"> <div class="options-row"> <input id="mask" type="button" value="Mask" /> </div> <div class="options-row"> <input id="overflow" type="button" value="Overflow" /> </div> <!-- text control --> <div> <p> </p> <div class="options-row"> <input id="shrink" type="button" value="Set/Cancel Select Cell Shrink To Fit" /> </div> <div class="options-row"> <input id="showEllipsis" type="button" value="Set/Cancel Select Cell Show Ellipsis" /> </div> <div class="options-row"> <input id="indentIncrease" type="button" value="Set Select Cell Text Indent Increase " /> </div> <div class="options-row"> <input id="indentDecrease" type="button" value="Set Select Cell Text Indent decrease " /> </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; }