SpreadJS table绑定动态新增列

收藏

背景：

用户在加载table模板文件时，需要根据需求新增table绑定列，来渲染加载数据源。
这该如何实现呢？

步骤：
了解数据绑定的小伙伴应该能想到，绑定列就是通过tableColumn来实现的，我们只需要将table模板中的tableColumns获取到，
再push进去新的tableColumn，重新bindColumns即可。
目前table没有直接获取columns信息的接口, 不过SpreadJS提供了 getColumnDataField 和 getColumnName 方法。
所以可以获取table某一列的字段名和name，您可以重新new TableColumn，然后将新的TableColumn添加进去，再进行bindColumns 绑定。
主要代码如下：

document.getElementById("addColumn").addEventListener("click", function () {
var tableColumns = [];
var table = sheet.tables.all()[0];
var cc = table.range().colCount;
// 获取table原有column
for (var c = 0; c < cc; c++) {
var dataField = table.getColumnDataField(c);
var name = table.getColumnName(c);
var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn.name(name);
tableColumn.dataField(dataField);
tableColumns.push(tableColumn);
}
// 添加新的column
var newTableColumn = new GC.Spread.Sheets.Tables.TableColumn();
newTableColumn.name("totlt");
newTableColumn.dataField("totlte");
tableColumns.push(newTableColumn);
console.log(tableColumns);
// table新增一列
table.insertColumns(cc-1, 1, true);
// bindColumns
table.bindColumns(tableColumns);
// 加载数据源
var dataSource = {
test: [
{test1: 'test1', test2: 'A', test3: true, totlte: 1},
{test1: 'test1', test2: 'B', test3: false, totlte: 1},
{test1: 'test1', test2: 'B', test3: true, totlte: 1},
{test1: 'test1', test2: 'A', test3: false, totlte: 1}
]
}
var datasource = new GC.Spread.Sheets.Bindings.CellBindingSource(dataSource);
sheet.setDataSource(datasource);
})

复制代码

完整代码见附件demo，供参考。

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

SpreadJS table绑定动态新增列

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人