SpreadJS 给表格某一列设置ComboBox

收藏

本帖最后由 lynn512 于 2020-10-9 15:04 编辑

背景：用户有这样一个需求：创建一个表格，给表格某一列设置组合框ComboBox。
思路：目前有两种方案，我们以具体的demo为例来详细介绍这两种方案：
方案1：在设计器里设计好模板，然后绑定数据源。
我们先在设计器里设计好一个表格模板，给最后一列设置组合框。如下图：
image.png580591430.png

将模板导出为js文件，引入到demo中，绑定数据源。

var dataSource = {
person: [
{name: 'lily', age: '15', girl: '1'},
{name: 'mary', age: '12', girl: '1'},
{name: 'tom', age: '17', girl: '0'},
{name: 'dong', age: '14', girl: '0'},
{name: 'luna', age: '15', girl: '1'},
{name: 'aimi', age: '12', girl: '1'}
]
}
var datasource = new GC.Spread.Sheets.Bindings.CellBindingSource(dataSource);
sheet.setDataSource(datasource);

复制代码

这个时候我们会发现，ComboBox所在表格列显示的 0 或 1，并不是我们期待的 ”是或否“。
image.png729145812.png

这是因为使用了setDataSource,会更新这个模板的内容，原先的设置就没有了，所以我们要给表格这列重新设置ComboBox。

var table = sheet.tables.all()[0];
var row = table.dataRange().row;
var col = table.dataRange().col;
var rowCount = table.dataRange().rowCount;
var colCount = table.dataRange().colCount;
var combo = sheet.getCellType(row,colCount-1);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
//给表格最后一列设置组合框
sheet.getRange(row,colCount-1,rowCount,1).cellType(combo);

复制代码

好了，现在就可以正常显示ComboBox的值了。
image.png588265380.png

这个时候又出现了新的问题，当我们给表格插入/删除行时会发现ComboBox所在列显示不正常。
image.png35620116.png

有一个解决方式，那就是监听TableRowsChanged事件，当表格行数改变时，重新给组合框列设置ComboBox。

spread.bind(GC.Spread.Sheets.Events.TableRowsChanged, function (e, data) {
var newTable = sheet.tables.all()[0];
var newRow = table.dataRange().row;
var newCol = table.dataRange().col;
var newRowCount = table.dataRange().rowCount;
var newColCount = table.dataRange().colCount;
if (newRowCount > rowCount) {
//增加表格行时，重新给表格列设置组合框
sheet.getRange(newRow, newCol + newColCount - 1, newRowCount, 1).cellType(combo);
} else {
//删除表格行时，删除表格外组合框
sheet.getRange(newRow, newCol + newColCount - 1, newRowCount, 1).cellType(combo);
sheet.getRange(newRow + newRowCount, newCol + newColCount - 1, rowCount - newRowCount , 1).cellType(null);
}
});

复制代码

现在插入/删除表格行就没有问题了。附件有本例demo，可以查看具体的代码。
方案2：不通过模板设计，通过代码绑定表格字段。

var dataSource = {
person: [
{name: 'lily', age: '15', girl: '1'},
{name: 'mary', age: '12', girl: '1'},
{name: 'tom', age: '17', girl: '0'},
{name: 'dong', age: '14', girl: '0'},
{name: 'luna', age: '15', girl: '1'},
{name: 'aimi', age: '12', girl: '1'}
]
}
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([
{ text: '是', value: '1' },
{ text: '否', value: '0' }
]).editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
var table = sheet.tables.add('person', 0, 0, 2, 3);
var tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(1, "name", "NAME");
var tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn(2, "age", "AGE");
var tableColumn3 = new GC.Spread.Sheets.Tables.TableColumn(3, "girl", "GIRL",null,combo);//在这里绑定了ComboBox
table.autoGenerateColumns(false);
table.bind([tableColumn1, tableColumn2, tableColumn3], 'person', dataSource);

复制代码

这种方式因为是直接将ComboBox设置在表格列上，所以可以正常的插入/删除行。
不过这种方式下表格字段只能通过代码绑定，所以当字段过多时没有模板设计来的方便。
大家可以根据需要自行选择。

		自动登录	找回密码
密码			立即注册

SpreadJS 给表格某一列设置ComboBox

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人