SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data / Data Binding
In This Topic
    Data Binding
    In This Topic

    SpreadJS supports binding to array objects and Knockout.observableArray. SpreadJS also supports cell-level binding, which allows binding to any object.

    SpreadJS supports two-way data binding.

    Specific columns can be bound with the bindColumn method.

    See the following topics for more information:

    Using Code

    This example binds specific columns with the bindColumn method.

    JavaScript
    Copy Code
    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);
    

    Using Code

    This example binds specific columns with the bindColumn method.

    JavaScript
    Copy Code
    var test = [
            {"Series0":2,"Series1":1},
            {"Series0":4,"Series1":2},
            {"Series0":3,"Series1":4}
        ];
    
    activeSheet.setDataSource(test);
    activeSheet.bindColumn(1,"Series0");
    activeSheet.bindColumn(0,"Series1");
    

    Using Code

    This example binds the sheet with the setDataSource method.

    JavaScript
    Copy Code
    var test = [
            {"Series0":2,"Series1":1},
            {"Series0":4,"Series1":2},
            {"Series0":3,"Series1":4}
        ];
    
    activeSheet.setDataSource(test, true);
    //activeSheet.setDataSource(test);
    

    Using Code

    This example binds to a JSON array object.

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