【14.0.10】如何在表格填报中新增一行数据

收藏

在spreadJs中，能否像图中红框内的表单一样，用户可以自行添加一行，或者删除一行，最终形成的数据格式类似于：
[{domain: 'a', ip: '192.168.1.1'},{domain: 'b', ip: '192.168.1.2'}]

Lynn.Dou · Lynn.Dou

您好，
没太理解您的意思，
您是希望用户填写红框部分后，能将填写的数据显示在SpreadJS中吗？
（如，作为一条数据在SpreadJS中某行显示）

如果是，
红框部分属于SpreadJS外的逻辑，需要您通过js获取这一部分的值。将这些值转化为下图数组格式，
然后使用SpreadJS 的 setArray 方法，将这些数据在SpreadJS内赋值。
image.png360917052.png

如果不是，请结合业务情况详细的描述下您的需求。

scodi · scodi

图里是一个普通表单，我是指能不能用spreadJs表单替代，来让用户在spreadJs里来填写

Lynn.Dou · Lynn.Dou

可以在SpreadJS中填写，使用getArray就可以获取填写的数据。
API如下：
https://demo.grapecity.com.cn/sp ... sheet.html#getArray

另外，您是否使用了数据绑定呢？

scodi · scodi

用了单元格绑定的，有实现的例子吗？主要是增加一行，删除一行不知道怎么实现，特别是在设计器里怎么设计

Lynn.Dou · Lynn.Dou

增加一行、删除一行的期待效果是什么？

我对此的理解如下，您看下是否正确：
增加一行：在表单里添加一行数据，点击保存。
删除一行：在表单里删除一行数据，点击保存。

单元格级别数据绑定适合于一条数据。
您应该是存在多条数据（即，存在增加多条、删除多条的情况），这种情况下建议您使用表格绑定。
增加/删除后，可以使用getDataSource获取修改后的数据源。

附件为示例demo，你可以参考下。
步骤如下：
1、运行demo，导入testTableBinding.ssjson
2、点击绑定数据源按钮
3、增加/删除行数据
4、点击获取数据源按钮。

如果我的理解不正确，请结合demo、图片等详细说明您的需求。

scodi · scodi

非常感谢你的耐心回复。

看了你的例子，有点受启发，但还是缺临门一脚。

我做了一个设计器，可以设计一些专业表格，并对单元格做了绑定，现在有这么一个需求，我做了这个demo

image.png391461791.png

demo中的环境变量是一个数组，可以让用户自己增加数组元素或者删除数组元素，这里就卡壳了，因为它不是单纯的一个table，如果是的话，你的例子可以解决这个问题。所以我需要一个思路，怎么能在spreadJs的在线填报中，实现我这个demo中的对环境变量的填写功能。不知道这样描述，理解了吗？

Lynn.Dou · Lynn.Dou

需求已了解，
这边试着思考下相关逻辑以及是否有可行的方案，这需要一定的时间，
预计下午更新进展。

Lynn.Dou · Lynn.Dou

有个思路您可以参考下：
利用表格绑定，添加数据时动态修改数据源，重新绑定。
删除数据则通过删除当前行实现。
附件为一个示例demo，您可以参考下思路。
最终效果如下图:

image.png109821776.png

scodi · scodi

很赞

，demo看了，可以满足需求。
var datasource = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheet.setDataSource(datasource);
但是还有个疑问，为什么添加一行时要重新改变data，再用data绑一次，而不能直接对datasource做修改呢，就像vue一样，数据和ui既然绑定了，改变数据就等于改变ui

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

[已处理] 【14.0.10】如何在表格填报中新增一行数据

12 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人