边框和网格线

Spread可以设置单元格边框,添加、删除网格线。

Spread 提供了多种的线型样式来帮助你自定制表单的边界线和网格线, 例如细线型, 点线型, 双线型等等。例如, 以下代码改变了指定区域的左边和右边的边界线为点线型。 Spread 提供了两种对角线线型:向上对角线和向下对角线. diagonalDown diagonalUp 例如可以通过如下方法来设置单元格的对角线 你可以添加、删除网格线或者用下面的代码来设置网格线的颜色: 你可以设置 sheetAreaOffset 属性来设置表单绘制区域相对于左上角的偏移量。这样表单的绘制区域将具有足够的空间来绘制左/上边框和选择框 sheetAreaOffset 默认值为 { left:0 , top:0 }。
var spreadNS = GC.Spread.Sheets; window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 }); var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.options.gridline.showHorizontalGridline = false; sheet.options.gridline.showVerticalGridline = false; var lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin); var range = sheet.getRange(7, 1, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderLeft(new spreadNS.LineBorder('red', spreadNS.LineStyle.double)); range = sheet.getRange(7, 4, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium)); range = sheet.getRange(7, 7, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed)); range = sheet.getRange(7, 10, 2, 2); range.setBorder(lineBorder1, { outline: true }); range.borderBottom(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted)); range = sheet.getRange(11, 1, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thick), { all: true }); range.diagonalUp(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thin)); range = sheet.getRange(11, 4, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.hair), { all: true }); range.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted)); range = sheet.getRange(11, 7, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.mediumDashed), { all: true }); range.diagonalUp(new spreadNS.LineBorder('plum', spreadNS.LineStyle.double)); range.diagonalDown(new spreadNS.LineBorder('brown', spreadNS.LineStyle.thick)); range = sheet.getRange(11, 10, 2, 2); range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.dashDot), { all: true }); range = sheet.getRange(17, 1, 2, 5); range.setBorder(lineBorder1, { outline: true }); range = sheet.getRange(17, 1, 2, 2); range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.slantedDashDot), { inside: true }); range = sheet.getRange(17, 4, 2, 2); range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.mediumDashed), { inside: true }); range = sheet.getRange(16, 7, 7, 4); range.setBorder(new spreadNS.LineBorder('plum', spreadNS.LineStyle.thick), { left: true, bottom: true }); range = sheet.getRange(15, 8, 7, 4); range.setBorder(new spreadNS.LineBorder('royalblue', spreadNS.LineStyle.slantedDashDot), { top: true, right: true }); range = sheet.getRange(16, 8, 6, 3); range.setBorder(new spreadNS.LineBorder('tomato', spreadNS.LineStyle.dashDot), { left: true, bottom: true }); range = sheet.getRange(16, 8, 6, 3); range.setBorder(new spreadNS.LineBorder('palegreen', spreadNS.LineStyle.mediumDashed), { top: true, right: true }); range = sheet.getRange(16, 9, 5, 2); range.setBorder(new spreadNS.LineBorder('violet', spreadNS.LineStyle.dotted), { left: true, bottom: true }); range = sheet.getRange(17, 8, 5, 2); range.setBorder(new spreadNS.LineBorder('skyblue', spreadNS.LineStyle.hair), { top: true, right: true }); sheet.addSpan(17, 9, 2, 1); range = sheet.getRange(17, 9, 2, 1); range.setBorder(new spreadNS.LineBorder('purple', spreadNS.LineStyle.thin), { all: true }); addTableInfo(sheet); initSheetAreaSheet(spread.getSheet(1)); _getElementById('gridline_show').addEventListener('change', function() { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.options.gridline.showHorizontalGridline = this.checked; sheet.options.gridline.showVerticalGridline = this.checked; sheet.resumePaint(); }); spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e, args) { if (args.oldSheet === sheet) { _forSheetAreaStatus('block'); _getElementByClassName('forBorder')[0].setAttribute('style', 'display:none'); } else { _forSheetAreaStatus('none'); _getElementByClassName('forBorder')[0].setAttribute('style', 'display:block'); } }); }; function addTableInfo(sheet) { sheet.setArray(1, 3, [ [ 'Gender', 'Phone Number', 'Address' ], [ 'woman', '021-432668', 'Chester Road' ], [ 'man', '021-432238', 'Gertt Road' ], [ 'man', '021-432533', 'Jnyliner Road' ], [ 'man', '021-432125', 'Approach Road' ] ]); var style = new GC.Spread.Sheets.Style(); style.wordWrap = true; style.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet.setStyle(1, 2, style, 3); sheet.setText(1, 2, ' Info Name', spreadNS.SheetArea.viewport); cell = sheet.getCell(1, 2); cell.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted)); sheet.setStyle(1, 3, style, GC.Spread.Sheets.SheetArea.viewport); sheet.setStyle(1, 4, style, GC.Spread.Sheets.SheetArea.viewport); sheet.setStyle(1, 5, style, GC.Spread.Sheets.SheetArea.viewport); sheet.setText(2, 2, 'John', spreadNS.SheetArea.viewport); sheet.setText(3, 2, 'linda', spreadNS.SheetArea.viewport); sheet.setText(4, 2, 'henry', spreadNS.SheetArea.viewport); sheet.setText(5, 2, 'smith', spreadNS.SheetArea.viewport); sheet.setRowHeight(1, 30); sheet.setColumnWidth(4, 120); sheet.setColumnWidth(5, 120); range = sheet.getRange(1, 2, 5, 4); range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.thin), { all: true }); sheet.resumePaint(); } function initSheetAreaSheet(sheet) { sheet.suspendPaint(); sheet.name('SheetAreaOffset'); var data = sheetAreaJSON; sheet.fromJSON(data); sheet.options.colHeaderVisible = false; sheet.options.rowHeaderVisible = false; sheet.options.sheetAreaOffset = { left: 2, top: 2 }; var range = sheet.getRange(0, 0, 3, 10); range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.double), { left: true, bottom: true, top: true, right: true }); sheet.resumePaint(); _getElementById('headerVisible').addEventListener('change', function() { sheet.options.rowHeaderVisible = this.checked; sheet.options.colHeaderVisible = this.checked; }); _getElementById('setOffset').addEventListener('click', function() { var left = _getElementById('offsetLeft').value, top = _getElementById('offsetTop').value; sheet.options.sheetAreaOffset = { left: parseInt(left, 10), top: parseInt(top, 10) }; }); _forSheetAreaStatus('none'); } function _getElementById(id) { return document.getElementById(id); } function _getElementByClassName(className) { return document.getElementsByClassName(className); } function _forSheetAreaStatus(status) { var forSheetAreas = _getElementByClassName('forSheetArea'); for (var i = 0; i < forSheetAreas.length; i++) { forSheetAreas[i].setAttribute('style', 'display:' + status); } }
<!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="$DEMOROOT$/spread/source/data/sheetAreaData.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 forBorder"> <input type="checkbox" id="gridline_show"/> <label for="gridline_show" title="Set whether to display grid line">ShowGridLine</label> </div> <div class="option-row forSheetArea"> <input type="checkbox" id="headerVisible"><label for="headerVisible">HeaderVisible</label> </div> <div class="option-row forSheetArea"> <label> left: <input type="number" id="offsetLeft" value="2" /></label> </div> <div class="option-row forSheetArea"> <label> top: <input type="number" id="offsetTop" value="2" /></label> </div> <div class="option-row forSheetArea"> <input type="button" id="setOffset" value="Set Sheet Area Offset"> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 300px); height: calc(100% - 20px); overflow: hidden; float: left; margin: 10px; } .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=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }