找回密码
 立即注册

QQ登录

只需一步,快速开始

Fiooona
论坛元老   /  发表于:2020-9-25 17:45  /   查看:3153  /  回复:0
背景: SpreadJS 中提供多种类型的数据绑定,需要对不同类型的单元格进行数据绑定。无论是普通单元格,CheckBox ,下拉框, 或者是自定义单元格都可以进行数据绑定。对下拉框进行数据绑定:
下图的sheet中是一个表单级别的数据绑定,在第四列中设置了单元格类型为ComboBox
  1.       var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
  2.         combo.items([
  3.      { text: '男', value: '1' },
  4.      { text: '女', value: '2' }]);
  5.      combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
  6.         var columnInfo = [
  7.                 { name: "person", displayName: "姓名", cellType: new FullNameCellType(), size: 170 },
  8.                 { name: "result", displayName: "收藏", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 50 },
  9.                 { name: "money", displayName: "余额", size: 50 ,formatter:'_(¥* #,##0.00_)',size: 90},
  10.                 { name: "sex", displayName: "性别", cellType:combo,size: 90}

  11.             ];
复制代码
ComboBox 中对应有Value 和Text ,
数据源中的性别字段是Value:
  1.       { sex:'1',money:-100,result: true, person: {firstName:"LeBron",lastName:"James"}},
复制代码
所以设置了 editorValueType为Value,
  1. combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
复制代码
绑定数据源后展示的效果如下:

image.png105712889.png

Sheet2 页面中演示了单元格级别的数据绑定,首先加载一个设置了数据绑定字段的表单,再通过简单的几行代码可实现数据绑定:
  1. var  person = { name: "Wang Feng", age: 25, sex: "男", work: "工程师",m:true };
  2.        var source = new spreadNS.Bindings.CellBindingSource(person);
  3.        sheet.setDataSource(source);
复制代码
效果如下图:
image.png527598876.png

下载附件可查看完整代码。

数据绑定.rar

1.74 MB, 下载次数: 69

组件化表格编辑器(预览版)试用进行中,点击了解详情!
请点击评分,对我的服务做出评价!5分为非常满意!
您需要登录后才可以回帖 登录 | 立即注册
返回顶部