数据绑定

SpreadJS支持绑定到数组对象和Knockout.observableArray。 SpreadJS还支持单元级绑定，该单元级绑定允许绑定到任何对象。SpreadJS支持两种数据绑定。

单元格绑定

您可以在SpreadJS中使用单元级绑定。

单元级绑定将对象的属性绑定到表单单元。在绑定单元格之前，将数据对象包装到GC.Spread.Sheets.Bindings。在绑定单元格前使用 CellBindingSource 。然后将包装的源绑定到表单（sheet. setDataSource ）。

本示例绑定表单中的单元格。

var person = {name: "Wang feng", age: 25, address: {postcode: "710075"}};
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
activeSheet.setBindingPath(0, 0, "name");
activeSheet.setBindingPath(1, 1, "age");
activeSheet.setBindingPath(3, 3, "address.postcode");
activeSheet.setDataSource(source);

按列绑定

特定列可以使用 bindColumn 方法进行绑定。

本示例使用 bindColumn 方法绑定特定的列。

var datasource = [
                   { name: "Alice", age: 27, birthday: "1985/08/31", position: "PM" },
                   { name: "Aimee", age: 28, birthday: "1984/07/31", position: "TL" },
                   { name: "Charles", age: 29, birthday: "1983/03/31", position: "QC" },
                   { name: "Fred", age: 30, birthday: "1982/02/20", position: "DL" },
                   { name: "Angelia", age: 31, birthday: "1981/05/30", position: "QC" },
                   { name: "Peter", age: 32, birthday: "1980/11/08", position: "QC" }
               ];
var nameColInfo = { name: "name", displayName: "Name", size: 70 };
var ageColInfo = { name: "age", displayName: "Age", size: 40, resizable: false };
var birthdayColInfo = { name: "birthday", displayName: "Birthday",formatter:"d/M/yy", size: 120 };
var positionColInfo = { name: "position", displayName: "Position", size: 50, visible: false };
activeSheet.autoGenerateColumns = true;
activeSheet.setDataSource(datasource);
activeSheet.bindColumn(0, nameColInfo);
activeSheet.bindColumn(1, ageColInfo);
activeSheet.bindColumn(2, birthdayColInfo);
activeSheet.bindColumn(3, positionColInfo);

本示例绑定到JSON数组对象。

var jasonArray = '{"phoneNumbers": [{"type": "home","number": "212 555-1234"},{"type": "fax","number": "646 555-4567"}]}';
var arr = JSON.parse(jasonArray);
activeSheet.setDataSource(arr.phoneNumbers);

表格绑定

您可以创建表格并将其绑定到数据源。

本示例手动创建并绑定到表。

window.onload = function()
{
  var spread =
  new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
  var activeSheet = spread.getActiveSheet();
   
  // 手动创建数据表。
  var sampleTable =
   [
        {"ID":10, "Text":"Text-10", "Check":true},
        {"ID":20, "Text":"Text-20", "Check":false},
        {"ID":30, "Text":"Text-30", "Check":false},
        {"ID":40, "Text":"Text-40", "Check":true},
        {"ID":50, "Text":"Text-50", "Check":true}
    ];
   
   // 绑定数据表
   activeSheet.setDataSource(sampleTable);
}

使用数据添加新行并更新数据源

你可以在绑定后添加行。

本示例在最后一行之后添加行。

window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();

   // 手动创建数据表。
   var sampleTable =
    [
         {"ID":10, "Text":"Text-10", "Check":true},
         {"ID":20, "Text":"Text-20", "Check":false},
         {"ID":30, "Text":"Text-30", "Check":false},
         {"ID":40, "Text":"Text-40", "Check":true},
         {"ID":50, "Text":"Text-50", "Check":true}
     ];
    
   // 绑定数据表
   spread.getActiveSheet().setDataSource(sampleTable);
   $("#button1").click(function()
   {
     console.log("The number of all rows in the
     datasource before addition:" + sampleTable.length);
     
     var activeSheet = spread.getActiveSheet();
     var row = activeSheet.getRowCount();
        
    // 在最后一行之后添加行
    activeSheet.addRows(row, 1);
        
    // 设置数据
    activeSheet.setValue(row, 0, 100);
    activeSheet.setValue(row, 1, "Text-New");
    activeSheet.setValue(row, 2, true);
    activeSheet.getCell(row, -1).backColor("pink");
        
    // 数据表已更新。
    console.log("The number of all rows in the datasource
    after addition:" + sampleTable.length);
    console.log("The value of the Text field in the last row
    of the datasource: " + sampleTable[sampleTable.length - 1].Text);
   });
}

添加未绑定的列

您可以将未绑定的列添加到控件。

本示例添加未绑定的列。

$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
    var activeSheet = spread.getActiveSheet();
    var rowCount, colCount;
   
    // 手动创建数据表。
    var sampleTable =
    [
        {"Num1":10, "Num2":100, "Num3":1000},
        {"Num1":20, "Num2":200, "Num3":2000},
        {"Num1":30, "Num2":300, "Num3":3000},
        {"Num1":40, "Num2":400, "Num3":4000},
        {"Num1":50, "Num2":500, "Num3":5000}
    ];
   
    // 绑定数据表。
    activeSheet.setDataSource(sampleTable);
   
    // 添加列（它们将成为未绑定的列）。
    activeSheet.addColumns(2, 1);
    activeSheet.addColumns(activeSheet.getColumnCount(), 1);
   
    // 显示小计。
    rowCount = activeSheet.getRowCount();
    spread.options.referenceStyle =
    GC.Spread.Sheets.ReferenceStyle.R1C1;
    activeSheet.setValue(0, 2,
    "Subtotal",  GC.Spread.Sheets.SheetArea.colHeader);                    
   
    for(var i = 0; i < rowCount; i++)
    {
        activeSheet.setFormula(i, 2, "SUBTOTAL(9, RC[-2]:RC[-1])");
    }

    activeSheet.getRange(-1, 2, -1, 1).backColor("LightCyan");
    activeSheet.getCell(0, 2, GC.Spread.Sheets.SheetArea.colHeader).backColor("LightCyan");
    activeSheet.setColumnWidth(2, 60);
   
    // 显示总计。
    colCount = activeSheet.getColumnCount();
    activeSheet.setValue(0, colCount - 1,
    "Total", GC.Spread.Sheets.SheetArea.colHeader);                    
    for(var i = 0; i < rowCount; i++)
    {
        activeSheet.setFormula(i, colCount - 1, "SUBTOTAL(9,RC[-4]:RC[-1])");
    }
    activeSheet.getRange(-1, colCount - 1, -1, 1).backColor("LightPink");
    activeSheet.getCell(0, colCount - 1,
    GC.Spread.Sheets.SheetArea.colHeader).backColor("LightPink");
    activeSheet.setColumnWidth(colCount - 1, 60);              
              
});