表格绑定中插入列并更新对应的数据透视表

收藏

背景：有的朋友有这样一个场景，他们的数据透视表引用了表格区域，并且表格区域可能会新增一些列，这个表格是通过数据绑定来实现的。这个时候就需要分别更新表格的数据源以及数据透视表。

那这样一个背景，我们可以分成两个部分来讨论。分别是给表格绑定新增表格列以及更新数据透视表及其面板。

第一个部分，表格绑定新增表格列。首先还是比较常规的部分，进行表格绑定。对表格绑定还不太熟悉的朋友可以先去看下前面的视频教程。
image.png639596252.png

绑定完成之后，我们再来加一个数据透视表。
image.png336354369.png

实现之后我们可以看到带有绑定数据源的table
image.png58370055.png

以及一个数据透视表

那接下来就是插入列的操作了，我们可以通过表格的insertColumns接口来实现表格新增列，需要注意第三个参数，是一个布尔值，表示在指定列索引的前面插入还是后面插入。

table.insertColumns(2, 1, true);

复制代码

插入完成之后，我们可以更新数据源或者我们直接返回的就是一个带有多一个cost属性的数据源也是可以的。因为表格绑定会根据绑定路径与数据源对应上，如果没有对应的，那么在绑定之后不会显示出来。
image.png793316955.png

那我们怎么处理多出来的列呢？答案就是new一个TableColumn，并为其指定name以及绑定路径，然后将其添加到我们前面绑定时所构建的tableColumns数组中。最后再通过setDataSouce将新的数据源进行绑定。

var tableColumnNew = new spreadNS.Tables.TableColumn();
tableColumnNew.name("cost");
tableColumnNew.dataField("cost");
tableColumns.push(tableColumnNew);
table.bindColumns(tableColumns);
table.bindingPath('sales');
source = new GC.Spread.Sheets.Bindings.CellBindingSource(newdata);
sheet.setDataSource(source);

复制代码

那以上就是更新数据源的操作的。那我们的数据源更新了，我们的透视表也需要进行更新。我们可以通过updateSource更新透视表的数据源，然后通过add方法为透视表的值字段加上一个cost字段。

myPivotTable.updateSource()
myPivotTable.add("cost", "Cost", GC.Spread.Pivot.PivotTableFieldType.valueField);

复制代码

最终的效果就是表格中多了一列
image.png563763122.png

数据透视表也做了更新

image.png200156859.png

下载附件即可查看完整的demo。

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

表格绑定中插入列并更新对应的数据透视表

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证