table绑定动态添加列

收藏

本帖最后由 Lynn.Dou 于 2023-2-28 10:15 编辑

当前表单是在其他设计器表单中保存的spreadjson渲染而来，怎么对当前表单的已有表格添加新列，并且新列也能从data中读取数据并渲染

Lynn.Dou · Lynn.Dou

table没有直接获取columns信息的接口, 不过SpreadJS提供了 getColumnDataField 和 getColumnName 方法，
可以获取table某一列的字段名和name，您可以重新new TableColumn，然后将新的TableColumn添加进去，再进行bindColumns 绑定。

附件为示例demo，供参考。
主要代码如下：

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);
})

复制代码

Lynn.Dou · Lynn.Dou

有问题欢迎继续交流

Lynn.Dou · Lynn.Dou

您好，
您可以在加载json后，执行addColumns方法添加新列，然后执行setArray等方法对新列区域赋值。

inroad · inroad

Lynn.Dou 发表于 2023-2-27 18:07
您好，
您可以在加载json后，执行addColumns方法添加新列，然后执行setArray等方法对新列区域赋值。

您好，我的意思是讲表格是表单里的table进行添加新列，

，大概的代码是这样，我尝试在一个表格中添加了一列，但是会覆盖掉原有的表格的第一列，虽然这一列渲染出来了，但是数据还不能显示
if(this.getspreadJson){
   spread.fromJSON(this.getspreadJson, { doNotRecalculateAfterLoad: true })
   const source = new GC.Spread.Sheets.Bindings.CellBindingSource(this.tableData)
   const currentSheet = spread.getSheet(0)
   const tables = currentSheet.tables.all()
   const sheetColumnCount = currentSheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport)
   let maxDataLength = 0
      tables.forEach((cv) => {
         cv.autoGenerateColumns(false)
         const row = cv.dataRange().row
         const bindingPath = cv.bindingPath()
         const len = this.tableData[bindingPath]?.length + row
         if (len > maxDataLength) {
            maxDataLength = len
         }
         let tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
         tableColumn.name("totlt");
         tableColumn.dataField("totlte");
         cv.bindColumns([tableColumn]);
         console.log(cv);
         // const filterJson = cv.rowFilter().toJSON()
         // console.log(filterJson,'----',cv.name);
         // filterJson && this.tableFilterJson.set(cv.name(), filterJson)
      })
      // 设置行数
      const rowCount = currentSheet.getRowCount(
         GC.Spread.Sheets.SheetArea.viewport
      )
      if (rowCount <= maxDataLength) {
         currentSheet.setRowCount(maxDataLength + 5)
      }
      currentSheet.setDataSource(source)
}

inroad · inroad

Lynn.Dou 发表于 2023-2-28 10:14
table没有直接获取columns信息的接口, 不过SpreadJS提供了 getColumnDataField 和 getColumnName 方法，
...

好的，非常感谢您的帮助，我这就去试一下

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

[已处理] table绑定动态添加列

5 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人