单元格内边距和标签

你可以使用单元格内边距和单元格标签使你的数据更便于阅读。

SpreadJS 提供了单元格内边距和单元格标签。 可以通过设置样式的 cellPadding 属性来为单元格添加内边距,单元格内边距与CSS内边距保持相同的策略。例如: 单元格标签的值取自样式的 watermark 属性。因此,当需要单元格标签时,你需要设置 watermark 的值。例如: 可以通过设置样式的 labelOptions 属性来设置标签的样式,labelOptions 是一个对象,包含5个属性: alignment: 标签的位置。共有 6 个位置: 上左,上中,上右,下左,下中,下右。默认值是上左。 visibility: 标签的显示方式。有 3 种显示方式: visible - 总在单元格内边距区域显示水印。无论单元格是否有数据,不在单元格区域显示水印。 hidden - 不在单元格内边距区域显示水印。根据单元格数值来显示水印(单元格没有值时显示水印,单元格有值时不显示水印)。 auto - 单元格有值时在单元格内边距区域显示水印,单元格没有值时在单元格区域显示水印。这是单元格标签的默认显示方式。 font: 标签的字体属性。如果 labelFont 没有值,使用样式的字体属性。如果样式没有字体属性,使用表单的默认字体属性。 foreColor: 标签的字体颜色。如果 labelForeColor 没有值,使用样式的字体颜色。如果样式没有字体颜色,那么字体颜色为灰色。 margin: 标签外边距。标签外边距与CSS外边距保持相同的策略。 margin-top margin-right margin-bottom margin-left
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 }); initSpread(spread); addCellType(spread); }; function initSpread(spread) { var sheet = spread.getActiveSheet(); spread.suspendPaint(); spread.options.showHorizontalScrollbar = false; spread.options.showVerticalScrollbar = false; spread.options.tabStripVisible = false; spread.options.grayAreaBackColor = 'white'; sheet.options.isProtected = true; sheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: true, color: 'black' }; sheet.options.rowHeaderVisible = false; sheet.options.colHeaderVisible = false; sheet.setRowCount(14); sheet.setColumnCount(13); initLayout(sheet); setBorder(sheet); spread.resumePaint(); } function initLayout(sheet) { var rowCount = sheet.getRowCount(); var colCount = sheet.getColumnCount(); var i; for (i = 0; i < rowCount; i++) { sheet.setRowHeight(i, 40); } sheet.setColumnWidth(0, 120); sheet.setColumnWidth(1, 80); i = 0; sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i++, 3, 1, colCount - 3); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i, 6, 1, 3); sheet.addSpan(i++, 9, 1, 4); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i++, 0, 1, colCount); sheet.addSpan(i, 0, 1, 6); sheet.addSpan(i++, 6, 1, 7); sheet.addSpan(i, 0, 1, colCount - 4); sheet.addSpan(i++, colCount - 4, 1, 4); sheet.addSpan(i, 0, 1, 3); sheet.addSpan(i, 3, 1, 3); sheet.addSpan(i, 6, 1, 3); sheet.addSpan(i++, 9, 1, 4); for (; i < rowCount; i++) { sheet.addSpan(i, 0, 1, colCount); } } function setBorder(sheet) { sheet.getRange(2, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { top: true }); sheet.getRange(4, -1, 1, -1).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { top: true }); sheet.getRange(4, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(5, 0, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(6, 6, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet .getRange(9, -1, 0, -1) .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.medium), { bottom: true }); sheet.getRange(9, 0, 1, 6).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(10, 0, 2, 9).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(11, 0, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); sheet.getRange(11, 3, 1, 3).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), { right: true }); } function getCheckBoxCellType(text) { var c = new GC.Spread.Sheets.CellTypes.CheckBox(); c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right); c.caption(text); return c; } function getComboBoxCellType() { var combo = new GC.Spread.Sheets.CellTypes.ComboBox(); combo.items([ { text: 'China', value: '1' }, { text: 'United States', value: '2' }, { text: 'Japan', value: '2' }, { text: 'Germany', value: '2' }, { text: 'France', value: '2' }, { text: 'England', value: '2' } ]); combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); return combo; } function getHyperLinkCellType(text, tooltip) { var h = new GC.Spread.Sheets.CellTypes.HyperLink(); h.text(text); h.linkToolTip(tooltip); return h; } function addCellType(spread) { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.getCell(0, 0).value('Example Form').font('bold 30px Arial'); sheet .getCell(1, 0) .value('Please open an account at') .font('bold 18px Arial') .vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(2, 0).watermark('BRANCH NAME').locked(false).cellPadding('20 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(3, 0).value('Personal Details').font('bold 18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet .getCell(4, 0) .watermark('MARITIAL STATUS') .locked(false) .cellType(getCheckBoxCellType('Married')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(4, 1).locked(false).cellType(getCheckBoxCellType('Single')).cellPadding('15 0 0 0'); sheet.getCell(4, 3).watermark('FULL NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(5, 0) .watermark('EDUCATION') .locked(false) .cellType(getCheckBoxCellType('Under graduate')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(5, 1).locked(false).cellType(getCheckBoxCellType('Graduate')).cellPadding('15 0 0 0'); sheet.getCell(5, 2).locked(false).cellType(getCheckBoxCellType('Others')).cellPadding('15 0 0 0'); sheet .getCell(5, 6) .watermark('NATIONALITY') .locked(false) .cellType(getComboBoxCellType()) .cellPadding('15 0 0 10') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(6, 0).watermark('E-MAIL').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(6, 6).watermark('MOBILE NO.').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(6, 9) .watermark('EXISTING BANK ACCOUNT NO. (IF ANY)') .locked(false) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet .getCell(7, 0) .watermark('IN CASE OF A MINOR PLEASE PROVIDE DETAILS (NAME OF PARENT AND NATURAL GUARDIAN)') .locked(false) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 6 0 1' }); sheet.getCell(7, 6).watermark('NAME OF FATHER/SPOUSE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(8, 0).value('Residential address').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.getCell(9, 0).watermark('FLAT NO. AND BLDG. NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(9, 6).watermark('ROAD NO./NAME').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(10, 0).watermark('AREA AND LANDMARK').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(10, 9).watermark('CITY').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 0).watermark('TELEPHONE RESIDENCE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.getCell(11, 3).watermark('OFFICE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 6).watermark('FAX').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(11, 9).watermark('PIN CODE').locked(false).cellPadding('15 0 0 0').labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 1' }); sheet.getCell(12, 0).value('Referenced web site').font('18px Arial').vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet .getCell(13, 0) .watermark('HELP MESSAGE') .locked(false) .cellType(getHyperLinkCellType('Any question, please click here.', 'help')) .cellPadding('15 0 0 0') .labelOptions({ foreColor: '#333333', visibility: 0, font: '10px Arial', margin: '2 0 0 0' }); sheet.resumePaint(); }
<!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/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" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }