背景: SpreadJS 中提供多种类型的数据绑定,需要对不同类型的单元格进行数据绑定。无论是普通单元格,CheckBox ,下拉框, 或者是自定义单元格都可以进行数据绑定。对下拉框进行数据绑定:
下图的sheet中是一个表单级别的数据绑定,在第四列中设置了单元格类型为ComboBox
- var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
- combo.items([
- { text: '男', value: '1' },
- { text: '女', value: '2' }]);
- combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
- var columnInfo = [
- { name: "person", displayName: "姓名", cellType: new FullNameCellType(), size: 170 },
- { name: "result", displayName: "收藏", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 50 },
- { name: "money", displayName: "余额", size: 50 ,formatter:'_(¥* #,##0.00_)',size: 90},
- { name: "sex", displayName: "性别", cellType:combo,size: 90}
- ];
复制代码 ComboBox 中对应有Value 和Text ,
数据源中的性别字段是Value:
- { sex:'1',money:-100,result: true, person: {firstName:"LeBron",lastName:"James"}},
复制代码 所以设置了 editorValueType为Value,
- combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
复制代码 绑定数据源后展示的效果如下:
Sheet2 页面中演示了单元格级别的数据绑定,首先加载一个设置了数据绑定字段的表单,再通过简单的几行代码可实现数据绑定:
- var person = { name: "Wang Feng", age: 25, sex: "男", work: "工程师",m:true };
- var source = new spreadNS.Bindings.CellBindingSource(person);
- sheet.setDataSource(source);
复制代码 效果如下图:
下载附件可查看完整代码。
|
|