SpreadJS绑定数据源

作者:控件中国网   出处:控件中国网   2015-06-02 14:42:17   阅读:6

SpreadJS基于HTML5和jQuery技术,通过画布呈现在客户端。类似Excel的风格外观和用户界面行为为最终用户提供了丰富的、可交互的用户体验。同时还具有内容广泛的功能,可以快速方便地建立电子表格文档或者数据库web应用。SpreadJS也具有丰富的客户端JavaScript API,为您提供了所需要的灵活的客户端编程。

SpreadJS支持绑定到任何数组对象,Wijmo.DataView对象,Knockout.observableArray对象,同样SpreadJS支持单元格层次的绑定,可以绑定到任何对象。

下面咱们介绍下如何使用SpreadJS提供的方法进行数据绑定:

1.使用控件提供的 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);
或者
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");

2.使用控件提供的setDataSource进行数据绑定
 var test = [
        {"Series0":2,"Series1":1},
        {"Series0":4,"Series1":2},
        {"Series0":3,"Series1":4}
     ];

 activeSheet.autoGenerateColumns=true;
 activeSheet.setDataSource(test, true);
或者绑定到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);

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat