基本应用

有时候你需要更简单的管理或者分析一组数据,Spread.Sheet提供了表格来帮助你,你可以选取一片区域或者一些单元格来插入一个表格。

添加表格有两种方式。第一种方式是使用 add 添加一个空的表格,示例代码如下: 第二种方式就是使用 addFromDataSource 创建一个带数据源的表格。例如: 使用这两种方式都能够完成对表格的初始化。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); var source = [ { Course: "Calculus", Term: 1, Credit: 5, Score: 80, Teacher: "Nancy.Feehafer" }, { Course: "P.E.", Term: 1, Credit: 3.5, Score: 85, Teacher: "Andrew.Cencini" }, { Course: "Political Economics", Term: 1, Credit: 3.5, Score: 95, Teacher: "Jan.Kotas" }, { Course: "Basic of Computer", Term: 1, Credit: 2, Score: 85, Teacher: "Steven.Thorpe" }, { Course: "Micro-Economics", Term: 1, Credit: 4, Score: 62, Teacher: "Jan.Kotas" }, { Course: "Linear Algebra", Term: 2, Credit: 5, Score: 73, Teacher: "Nancy.Feehafer" }, { Course: "Accounting", Term: 2, Credit: 3.5, Score: 86, Teacher: "Nancy.Feehafer" }, { Course: "Statistics", Term: 2, Credit: 5, Score: 85, Teacher: "Robert.Zare" }, { Course: "Marketing", Term: 2, Credit: 4, Score: 70, Teacher: "Laura.Giussani" } ]; spread.suspendPaint(); var table = sheet.tables.addFromDataSource("Table1", 2, 1, source, spreadNS.Tables.TableThemes.medium2); table.showFooter(true); table.showHeader(true); table.highlightFirstColumn(true); table.highlightLastColumn(false); table.setColumnFormula(2, "=SUBTOTAL(109,[Credit])"); table.setColumnFormula(3, "=SUBTOTAL(109,[Score])"); table.setColumnValue(0, "Total"); sheet.setColumnWidth(0, 20); sheet.setColumnWidth(1, 130); sheet.setColumnWidth(2, 70); sheet.setColumnWidth(3, 70); sheet.setColumnWidth(4, 70); sheet.setColumnWidth(5, 100); spread.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; }