Bind Cells

You can use cell-level binding in SpreadJS.

Cell-level binding binds an object's property to a sheet cell. Wrap the data object to GC.Spread.Sheets.Bindings.CellBindingSource before binding the cell. Then bind the wrapped source to the sheet (sheet.setDataSource).

The following code sample binds cells in the sheet.

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);

SpreadJS worksheet displaying Wang feng in cell A1, age 25 in B2, and postcode 710075 in D4 through cell-level binding paths.

Bind Cells to a Data Manager Table

Cell-level binding can also use a Data Manager table as the binding source. In this case, the sheet is bound to one record from the table, and each cell binding path resolves against that record.

The following example binds cells to fields from the first record in a Data Manager table.

var dataManager = spread.dataManager();
var ordersTable = dataManager.addTable("Orders", {
    data: [
        {
            orderId: 10248,
            customerId: "VINET",
            freight: 32.38
        },
        {
            orderId: 10249,
            customerId: "TOMSP",
            freight: 11.61
        }
    ]
});
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(ordersTable, 0);
activeSheet.setBindingPath(0, 0, "orderId");
activeSheet.setBindingPath(1, 0, "customerId");
activeSheet.setBindingPath(2, 0, "freight");
activeSheet.setDataSource(source);

SpreadJS worksheet displaying order ID 10248, customer ID VINET, and freight 32.38 in cells A1 through A3 from the first Data Manager table record.

The second argument of CellBindingSource specifies the active record index. For example, index 0 uses the first record, and index 1 uses the second record.

Binding paths can also refer to nested fields by using dot notation. For example, the binding path address.postcode refers to the postcode field in the nested address object.

activeSheet.setBindingPath(3, 0, "address.postcode");