请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

inroad

中级会员

70

主题

262

帖子

784

积分

中级会员

积分
784
inroad
中级会员   /  发表于:2023-2-27 17:53  /   查看:703  /  回复:5
本帖最后由 Lynn.Dou 于 2023-2-28 10:15 编辑

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

5 个回复

倒序浏览
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-2-28 10:14:21
来自 4#

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

附件为示例demo,供参考。
主要代码如下:
  1. document.getElementById("addColumn").addEventListener("click", function () {
  2.                 var tableColumns = [];
  3.                 var table = sheet.tables.all()[0];
  4.                 var cc = table.range().colCount;
  5.                 // 获取table原有column
  6.                 for (var c = 0; c < cc; c++) {
  7.                     var dataField = table.getColumnDataField(c);
  8.                     var name = table.getColumnName(c);
  9.                     var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
  10.                     tableColumn.name(name);
  11.                     tableColumn.dataField(dataField);
  12.                     tableColumns.push(tableColumn);
  13.                 }
  14.                 // 添加新的column
  15.                 var newTableColumn = new GC.Spread.Sheets.Tables.TableColumn();
  16.                 newTableColumn.name("totlt");
  17.                 newTableColumn.dataField("totlte");
  18.                 tableColumns.push(newTableColumn);
  19.                 console.log(tableColumns);
  20.                 // table新增一列
  21.                 table.insertColumns(cc-1, 1, true);
  22.                 // bindColumns
  23.                 table.bindColumns(tableColumns);
  24.                 // 加载数据源
  25.                 var dataSource = {
  26.                     test: [
  27.                         {test1: 'test1', test2: 'A', test3: true,  totlte: 1},
  28.                         {test1: 'test1', test2: 'B', test3: false, totlte: 1},
  29.                         {test1: 'test1', test2: 'B', test3: true, totlte: 1},
  30.                         {test1: 'test1', test2: 'A', test3: false, totlte: 1}
  31.                     ]
  32.                 }
  33.                 var datasource = new GC.Spread.Sheets.Bindings.CellBindingSource(dataSource);
  34.                 sheet.setDataSource(datasource);
  35.             })
复制代码



数据绑定-新增绑定列.zip

2.71 KB, 下载次数: 20

回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-2-28 16:05:29
推荐
有问题欢迎继续交流
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-2-27 18:07:55
沙发
您好,
您可以在加载json后,执行addColumns方法添加新列,然后执行setArray等方法对新列区域赋值。
回复 使用道具 举报
inroad
中级会员   /  发表于:2023-2-27 18:15:13
板凳
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
中级会员   /  发表于:2023-2-28 14:05:03
5#
Lynn.Dou 发表于 2023-2-28 10:14
table没有直接获取columns信息的接口, 不过SpreadJS提供了 getColumnDataField 和 getColumnName 方法,
...

好的,非常感谢您的帮助,我这就去试一下
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部