Getting Spread

SpreadJS is the spreadsheet component of the SpreadJS product family. Popular features include a formula engine, sorting, filtering, input controls, sparklines,and native Excel input/output. Use the following steps to add Spread to a project, bind to data, and set the appearance.

Steps

  1. SpreadJS is dependency free. It requires the following files: gc.spread.sheets.xx.x.x.css, gc.spread.sheets.all.xx.x.x.min.js.
    < link rel="styleSheet" href="gc.spread.sheets.xx.x.x.css"/>
    < script src="gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript"/>
                                
  2. Include a DOM element as the container in the page body.
    < div id="ss" style="width:100%; height:360px;border: 1px solid gray;"/>
                                
  3. The Spread component is initialized with new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }).
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    };
                                

Binding Data

In this step, add the data to SpreadJS. The data is displayed in the cells based on the data source.

Steps

  1. It is easy to add data to SpreadJS. Use the getSheet method to get the sheet you are working with. Set the cell binding source with "new GC.Spread.Sheets.Bindings.CellBindingSource(person);". Then use the setBindPath method to set the binding path for the specified cell in the specified sheet area. Then set the data source for the sheet using the setDataSource method.
    var sheet = spread.getSheet(0);
    var person = { name: 'Wang feng', age: 25, gender: 'Male', address: { postcode: '710075' } };
    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);
                                    

Setting Style

After the initialization operation and data binding, the data is displayed in SpreadJS. In this step, set the style for the sheet to make the person card more attractive and standard.

Steps

  1. It is easy to add data to SpreadJS. Use the getSheet method to get the sheet you are working with. Set the cell binding source with "new GC.Spread.Sheets.Bindings.CellBindingSource(person);". Then use the setBindPath method to set the binding path for the specified cell in the specified sheet area. Then set the data source for the sheet using the setDataSource method.
    sheet.getCell(2,1).text("Name");
    sheet.getCell(3,1).text("Age");
    sheet.getCell(4,1).text("Gender");
    sheet.getCell(5,1).text("Address.Postcode");
    sheet.addSpan(1, 1, 1, 2);
    sheet.getRange(1, 1, 1, 2).text("Person Card")
    sheet.setColumnWidth(1, 120);
    sheet.setColumnWidth(2, 120);
    sheet.getRange(1, 1, 1, 2).backColor("rgb(20, 140, 1218)")
    sheet.getRange(2, 1, 4, 1).backColor("rgb(169, 238, 243)")
    sheet.getRange(2, 2, 4, 1).backColor("rgb(247, 197, 113)")
    sheet.getRange(1, 1, 5, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
    });
    sheet.getRange(2, 1, 4, 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);