spredJs在一个页面展示多个透视表面板时，面板控制异常（SJS-9189）

收藏

本帖最后由 Clark.Pan 于 2021-8-2 14:31 编辑

异常出现步骤：
1. 使用的官网案例：https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/pivot-table/pivot-panel/overview/react2. 在案例上加了两个SpreadSheets，每个spread都有自己的透视页

<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div class="sample-panel">
<div id="panel"></div>
</div>
</div>
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>this.initSpread(spread, 2)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div class="sample-panel">
<div id="panel2"></div>
</div>
</div>

复制代码

3. 对每个透视页分别加上自己的透视面板

initPivotTable(sheet, id) {
let myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
if(id) {
let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel1", myPivotTable, document.getElementById("panel2"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
} else {
let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel2", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
}
...

复制代码

4. 操作：控制第一个透视面板时，数据透视的结果却出现在第二个透视表中，控制错乱。
image.png852351989.png

完整jsx代码：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import GC from '@grapecity/spread-sheets';
import "@grapecity/spread-sheets-pivot-addon";
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';
import './styles.css';
const Component = React.Component;
function _getElementById(id) {
return document.getElementById(id);
}
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div class='wrapper'>
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div class="sample-panel">
<div id="panel"></div>
</div>
</div>
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread=>this.initSpread(spread, 2)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div class="sample-panel">
<div id="panel2"></div>
</div>
</div>
</div>
);
}
initSpread(spread, id) {
this.initSheets(spread);
let pivotLayoutSheet = spread.getSheet(0);
this.initPivotTable(pivotLayoutSheet, id);
}
initPivotTable(sheet, id) {
let myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
if(id) {
let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel1", myPivotTable, document.getElementById("panel2"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
} else {
let panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel2", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
}
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("date", "Date", GC.Spread.Pivot.PivotTableFieldType.columnField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
myPivotTable.group(groupInfo);
myPivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
}
initSheets (spread) {
spread.suspendPaint();
let sheet = spread.getSheet(1);
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1,4,0,2).formatter("$ #,##0");
sheet.setArray(0, 0, pivotSales);
let table = sheet.tables.add('tableSales', 0, 0, 117, 6);
for(let i=2;i<=117;i++)
{
sheet.setFormula(i-1,5,'=D'+i+'*E'+i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
let sheet0 = spread.getSheet(0);
sheet0.name("PivotLayout");
spread.resumePaint();
}
}
ReactDOM.render(<App />, _getElementById('app'));

复制代码

完整css代码

.wrapper {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 48%;
margin-bottom: 20px;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.sample-panel {
float: right;
width: 300px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.gc-panel {
padding: 10px;
background-color: rgb(230, 230, 230);
}
#panel {
position: absolute;
right: 0;
width: 300px;
height: 100%;
top: 0;
}
#panel2 {
position: absolute;
right: 0;
width: 300px;
height: 100%;
bottom: 0;
}
#app {
height: 100%;
}

复制代码

Lynn.Dou · Lynn.Dou

本帖最后由 Clark.Pan 于 2021-8-6 15:18 编辑

您好，问题已复现，这边调研下原因，有结果在本贴更新。
----------------------------------------------------------------

该问题最新进展V14.1.3版本已经进行了修复

Lynn.Dou · Lynn.Dou

您好，
该问题计划在V14.1.3修复，计划发布时间7月下旬

July_peng · July_peng

Lynn.Dou 发表于 2021-7-14 18:26
您好，
该问题计划在V14.1.3修复，计划发布时间7月下旬

14.1.3更新后，获取不到pivotTables了。。。
复现场景：在react引入14.1.3包，创建一个workbook, 增加一个sheet页，获取sheet.pivotTables，返回undefined

July_peng · July_peng

July_peng 发表于 2021-7-26 17:51
14.1.3更新后，获取不到pivotTables了。。。
复现场景：在react引入14.1.3包，创建一个workbook, 增加 ...

在哪里可以看到更新日志，如果API调用更新，是否有地方说明？版本更新后是否可以邮件通知？

Clark.Pan · Clark.Pan

这个问题只是日常的修复bug，API没有需要更新的地方。
像1.3这样的小版本属于日常维护修复版本，是不会有邮件通知的，修复的bug后会通知相关用户进行更新，并不是全员覆盖。正常SP版本或者大版本是会有直邮通知的。

July_peng · July_peng

July_peng 发表于 2021-7-26 17:51
14.1.3更新后，获取不到pivotTables了。。。
复现场景：在react引入14.1.3包，创建一个workbook, 增加 ...

这个bug麻烦尽快看看，要上线了

Clark.Pan · Clark.Pan

这个bug不是已经修复了吗？获取不到pivotTables应该是你代码的问题，我这边测试是没问题的。

July_peng · July_peng

Clark.Pan 发表于 2021-7-27 09:57
这个bug不是已经修复了吗？获取不到pivotTables应该是你代码的问题，我这边测试是没问题的。

react+node包模式使用会复现详细使用代码在App.js中
步骤：
1. 下载附件包
2. 安装依赖，npm install
3. 启动项目, npm start
4. 查看控制台log: pivotTableManager undefined

Clark.Pan · Clark.Pan

你 pivot相关的包没有引用啊，如果是这样就算是换到以前的版本也一样用不了。sheet.pivotTables也一样是空。
image.png542342528.png

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

[已处理] spredJs在一个页面展示多个透视表面板时，面板控制异常（SJS-9189）

11 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄