隐藏行后再展示行如何从头展示，而不是从未被隐藏行开始展示

收藏

本帖最后由 Richard.Huang 于 2024-2-4 14:47 编辑

产品：SpreadJS

初始化数据全部展示
image.png798755187.png

而后通过第一个SpreadSheets中的ComboBox对下方的SpreadSheets中数据进行过滤，根据需求所有数据都应保留，因此我选用setRowVisible方法对被过滤的数据进行隐藏和显示的调用。
当我在下拉框选用月度后，即只过滤显示月度的数据，则当前过滤情况如下图：
image.png542825927.png

当我再次在下拉框选择季度过滤项，则会从13行开始展示，即将上一步月度数据所占最后一行的下一行开始展示，如下图：
image.png852533264.png

需要滚轮向上滚动才可以看见被筛选出的数据。
请问这种情况下如何让数据直接从被筛选出的第一条数据的起始行开始展示呢？

附加问题：
选择下拉框后设置存储过滤条件，然后根据过滤条件筛选每个表的数据。当点开下拉框选择条件后页面会卡顿（数据较多情况下，目前60条数据以略显卡顿），会在所有表格重新渲染结束后才会收起下拉框并改变下拉框的值，请问这种问题如何解决呢？

由于加密设置无法上传代码demo，我将代码拷贝下方, 项目为react项目：
入口App.js:

import React from "react";
import Header from './components/header'
import Content from './components/content'
import { useState } from "react";
import { testData } from "./utils";
function App() {
const [filterInfo, setFilterInfo] = useState({})
const [detailData, setDetailData] = useState(testData)
const handleFilter = (val) => {
setFilterInfo(val)
console.log(val);
}
return (
<div className="App">
<Header handleFilter={handleFilter} />
{
detailData?.map((item, index) => {
return <div key={index}>
<Content data={item} filterInfo={filterInfo} />
</div>
})
}
</div>
);
}
export default App;

复制代码

头部Header.js:

import GC from "@grapecity/spread-sheets"
import { SpreadSheets, Worksheet } from "@grapecity/spread-sheets-react"
const Header = (props) => {
const { handleFilter } = props
const initSheet = (spread) => {
const sheet = spread.sheets[0]
sheet.setRowCount(1)
sheet.setColumnWidth(0, 110)
sheet.setRowHeight(0, 35)
let comBox = new GC.Spread.Sheets.CellTypes.ComboBox()
comBox.items([
{
value: 'ALL',
text: '全部'
},
{
value: 'YEAR',
text: '年度'
},
{
value: 'SEASON',
text: '季度'
},
{
value: 'MONTH',
text: '月度'
},
])
comBox.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value)
sheet.getCell(0,0, GC.Spread.Sheets.SheetArea.viewport).cellType(comBox).value('ALL')
sheet.bind(GC.Spread.Sheets.Events.ValueChanged, (sender, args) => {
handleFilter({periodCode: args.newValue})
})
}
return <div>
<SpreadSheets hostStyle={{height: 80}} newTabVisible={false} workbookInitialized={(spread) => initSheet(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
}
export default Header

复制代码

数据展示模块文件Content.js

import GC from "@grapecity/spread-sheets"
import { SpreadSheets, Worksheet } from "@grapecity/spread-sheets-react"
import { useEffect } from "react"
import { useState } from "react"
const Content = (props) => {
const { data, filterInfo } = props
const [contentSheet, setContentSheet] = useState()
const initSheet = (spread) => {
const sheet = spread.sheets[0]
setContentSheet(sheet)
// sheet.setRowCount(1)
sheet.setColumnWidth(0, 110)
sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(data))
let table = sheet.tables.add('table', 0, 0, 1, 5)
let column1 = new GC.Spread.Sheets.Tables.TableColumn(1, 'periodCode')
let column2 = new GC.Spread.Sheets.Tables.TableColumn(2, 'periodName')
table.autoGenerateColumns(false);
table.bindColumns([column1, column2])
table.bindingPath('dataSource')
table.showHeader(false)
sheet.deleteRows(0, 1)
}
const handleFilterData = () => {
// contentSheet.suspendPaint()
let dataSource = contentSheet.getDataSource().rT.dataSource
let tempData = []
dataSource.forEach((item, index) => {
if (filterInfo.periodCode !== 'ALL') {
if (filterInfo.periodCode === item.periodCode) {
if (item?.filter) {
contentSheet.setRowVisible(index, true)
}
tempData.push({
...item,
filter: false
})
} else {
if (!item?.filter) {
contentSheet.setRowVisible(index, false)
}
tempData.push({
...item,
filter: true
})
}
} else {
if (item?.filter) {
contentSheet.setRowVisible(index, true)
}
tempData.push({
...item,
filter: false
})
}
});
contentSheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({
...data,
dataSource: tempData
}))
contentSheet.resumePaint()
}
useEffect(() => {
if (Object.keys(filterInfo).length !== 0 && contentSheet) {
handleFilterData()
}
}, [filterInfo, contentSheet])
return <div>
<SpreadSheets hostStyle={{height: 300}} newTabVisible={false} workbookInitialized={(spread) => initSheet(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
}
export default Content

复制代码

数据文件util.js

export const testData = [
{
level: 1,
dataSource: [
{
periodCode: 'YEAR',
periodName: '年度数据',
id: 1,
filter: false,
},
{
periodCode: 'YEAR',
periodName: '年度数据2',
id: 2,
filter: false,
},
{
periodCode: 'YEAR',
periodName: '年度数据3',
id: 3,
filter: false,
},
{
periodCode: 'YEAR',
periodName: '年度数据4',
id: 4,
filter: false,
},
{
periodCode: 'SEASON',
periodName: '季度数据',
id: 5,
filter: false,
},
{
periodCode: 'SEASON',
periodName: '季度数据2',
id: 6,
filter: false,
},
{
periodCode: 'SEASON',
periodName: '季度数据3',
id: 7,
filter: false,
},
{
periodCode: 'SEASON',
periodName: '季度数据4',
id: 8,
filter: false,
},
{
periodCode: 'MONTH',
periodName: '月度数据',
id: 9,
filter: false,
},
{
periodCode: 'MONTH',
periodName: '月度数据2',
id: 10,
filter: false,
},
{
periodCode: 'MONTH',
periodName: '月度数据3',
id: 11,
filter: false,
},
{
periodCode: 'MONTH',
periodName: '月度数据4',
id: 12,
filter: false,
}
]
},
]

复制代码

如需多数据测试，可直接复制带level属性的那个对象，多复制几个即可复现卡顿问题

Richard.Huang · Richard.Huang

您好，您的两个问题我将分别进行回答：
1. 您可以通过contentSheet.showRow(0)方法将当前sheet滚动到最上面一行
2. 造成卡顿的原因是，您的handleFilter函数是一个同步函数，只有当您的三个contentSheet完成您自定义的筛选后，才会去更新您的header中的渲染，因此您可以发现卡顿，按照您目前的设计，如果您不期望卡顿，只能将handleFilter换成异步执行的操作，我注意到您之前还有一个帖子，跟这个问题很像应该是同一个问题（传送门：https://gcdn.grapecity.com.cn/showtopic-202520-1-1.html），附件是我按照这个思路实现的一个demo，您可以查看并根据您的业务实现相应调整后满足您的需求

换日线 · 换日线

本帖最后由换日线于 2024-2-2 14:15 编辑

Richard.Huang 发表于 2024-2-2 12:08
您好，您的两个问题我将分别进行回答：
1. 您可以通过contentSheet.showRow(0)方法将当前sheet滚动到最上 ...

您好，非常感谢您的解答，您的方法我应用后能够解决大部分问题。
我目前扔存在一个问题是，如果在此基础上我不希望表格内容区域能够滚动，因此我的业务代码的初始化方法中使用了以下代码禁止滚动

sheet.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
console.log(args)
sheet.showRow(0)
});

复制代码

但是设置了这个代码的话好像就会造成死循环导致内存溢出，请问这个有解决办法吗

Richard.Huang · Richard.Huang

换日线发表于 2024-2-2 13:54
您好，非常感谢您的解答，您的方法我应用后能够解决大部分问题。
我目前扔存在一个问题是，如果在此基础 ...

您好，您所面临的情况的原因是sheet.showRow这个方法如果造成页面滚动，也是会触发TopRowChanged这个事件的，对于您的需求来讲我想您可以在contentSheet.showRow(0)这个方法的前后先解绑TopRowChanaged事件滚动结束后再重新监听这个事件：

contentSheet.unbind(GC.Spread.Sheets.Events.TopRowChanged);
contentSheet.showRow(0);
contentSheet.bind(
GC.Spread.Sheets.Events.TopRowChanged,
function (sender, args) {
console.log(args);
contentSheet.showRow(0);
}
);

复制代码

换日线 · 换日线

Richard.Huang 发表于 2024-2-2 15:19
您好，您所面临的情况的原因是sheet.showRow这个方法如果造成页面滚动，也是会触发TopRowChanged这个事件 ...

使用此方法只要切换了过滤条件后，只要在表格中触发了滚动滚轮，便会页面卡死，内存溢出，似乎有点问题

Richard.Huang · Richard.Huang

换日线发表于 2024-2-2 15:57
使用此方法只要切换了过滤条件后，只要在表格中触发了滚动滚轮，便会页面卡死，内存溢出，似乎有点问 ...

经过测试发现，是因为当筛选结束后非隐藏行最小的行索引大于0时，showRow(0)会将当前页面发生滚动，但是因为无法滚动到索引为0处，于是又触发TopRowChanged事件，从而变成了循环，这里我们应该将showRow(0)改成showRow(topRowIndex)，这里的topRowIndex为拉到最上面看到的行号，以下是修改后的代码示例

contentSheet.unbind(GC.Spread.Sheets.Events.TopRowChanged);
contentSheet.showRow(0);
//获取目前视窗最上面的行索引
let topRowIndex = contentSheet.getViewportTopRow(1);
contentSheet.bind(
GC.Spread.Sheets.Events.TopRowChanged,
function (sender, args) {
console.log(args);
contentSheet.showRow(topRowIndex);
}
);

复制代码

换日线 · 换日线

本帖最后由换日线于 2024-2-5 15:57 编辑

Richard.Huang 发表于 2024-2-2 17:55
经过测试发现，是因为当筛选结束后非隐藏行最小的行索引大于0时，showRow(0)会将当前页面发生滚动，但是 ...

按照代码中的结构，遍历数据渲染多个SpreadSheets表，在每个表中插入table表以供数据渲染，但是当数据有两万条时，加载会非常卡顿，请问有什么解决办法吗？并且渲染样式后，卡顿会至少翻一倍。

Richard.Huang · Richard.Huang

换日线发表于 2024-2-5 15:40
按照代码中的结构，遍历数据渲染多个SpreadSheets表，在每个表中插入table表以供数据渲染，但是当数据有 ...

因为您的逻辑是遍历每条数据并根据筛选情况去每一行的隐藏和展示，我想我们可以采取另一种方式来解决您的需求，采用筛选同步的方式，附件是我测试的demo，2w行数据没有明显卡顿

Richard.Huang · Richard.Huang

您好，由于您长时间未回帖，本贴就先作结帖处理了，后续如果有其他新的问题，欢迎继续发新帖询问

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

[已处理] 隐藏行后再展示行如何从头展示，而不是从未被隐藏行开始展示

8 个回复

浏览过的版块

SpreadJS 认证

SpreadJS 高级认证