SpreadJS控件JavaScript入门介绍

仅需几行代码,就可以将类似于Excel的JavaScript电子表格嵌入到您的企业应用程序中。您可以在下面找到有关创建SpreadJS JavaScript应用程序的介绍, 并初始化一个SpreadJS。

步骤

  1. 创建一个JavaScript应用程序 - SpreadJS是无依赖的。 仅仅需要以下文件: gc.spread.sheets.xx.x.x.css, gc.spread.sheets.all.xx.x.x.min.js.
                                    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="utf-8" />
    
    <script src="gc.spread.sheets.all.xx.x.x.min.js">
    <link rel="stylesheet" href="gc.spread.sheets.xx.x.x.css"type="text/css"/>
    </head>
    
    <body></body>
    </html>
                                    
    
  2. 添加SpreadJS容器元素 - 在页面的body元素中添加一个DOM元素作为它的容器。
    <div id="ss"></div>
    
  3. 初始化SpreadJS JavaScript控件。 - SpreadJS控件通过使用new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })来进行初始化。
        
    window.onload = function () {
    // Initialize a workbook
    var workbook = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // get workbook object
    // var workbook = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    };
                                

设置值和公式

步骤

  1. 使用 setValue 方法来给指定单元格设置值,使用 setFormula 方法来设置计算公式。
    var sheet = spread.getSheet(0);
    //Setting Values - Text
    sheet.setText(0,0,"This is a text");
    //Setting Values - Number 
    sheet.setValue(1, 0, 2245);
    sheet.setValue(2, 0, 345);
    //Setting Values - DateTime
    sheet.setValue(3, 0, new Date(2020, 10, 7).toLocaleDateString('en-US');
    sheet.getRange(3, 0, 1, 1).formatter("mm-dd-yyyy");
    
    //Setting Formula, Sum of the A2 and A3 cell
    sheet.setFormula(3, 3, '=SUM(A2:A3)');
    

设置样式

使用以下功能,为您的数据提供更有价值和更吸引人的外观。

步骤

  1. 在这一步,设置样式使得数据更具吸引力、更规范。

    //Setting style
    sheet.setColumnWidth(1, 200);
    sheet.setColumnWidth(2, 200);
    sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
    sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
    sheet.addSpan(1, 1, 1, 2);
    sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
    });
    sheet.getRange(2, 1, 3, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
        inside: true
    });
    sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);

绑定数据

探索如何轻松地绑定数据。

步骤

  1. 使用 getSheet 方法来获取您正在使用的表单。通过使用 "new GC.Spread.Sheets.Bindings.CellBindingSource(person);" 来添加单元格需要绑定的数据源。 之后使用 setBindingPath 方法来给指定表单区域的指定单元格绑定数据。最后使用setDataSource方法来给指定表单添加数据源。
    var sheet = spread.getSheet(0);
    var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
    var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
    sheet.setBindingPath(2, 2, 'name');
    sheet.setBindingPath(3, 2, 'age');
    sheet.setBindingPath(4, 2, 'gender');
    sheet.setBindingPath(5, 2, 'address.postcode');
    sheet.setDataSource(source);