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

QQ登录

只需一步,快速开始

nutstore
金牌服务用户   /  发表于:2021-6-28 15:12  /   查看:4248  /  回复:15
100金币
我们在使用ODataVirtualCollectionView这个组件时遇到一个问题:
我们有一个表,有很多列,大概有20列左右,当页面宽度较小时,横向滚动到靠后的列时,就会报错。
报错截图:

  1. vendors~index.50a9cc17.chunk.js:2 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
  2.     at Es (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1870183)
  3.     at Du (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1889297)
  4.     at t.unstable_runWithPriority (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1910383)
  5.     at Go (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1835081)
  6.     at Iu (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1887196)
  7.     at Ou (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1877494)
  8.     at mu (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1874038)
  9.     at oc (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1902078)
  10.     at lc (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1902941)
  11.     at https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1905454
  12.     at _u (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1877645)
  13.     at Object.unmountComponentAtNode (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1905439)
  14.     at DirectiveCellFactory.disposeTemplate (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:486:2445)
  15.     at DirectiveCellFactoryBase.doDisposeCell (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:467:7977)
  16.     at DirectiveCellFactoryBase._doDisposeCell (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:467:8173)
  17.     at DirectiveCellFactoryBase.disposeCell (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:467:6584)
  18.     at GridPanel._removeExtraCells (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:25132)
  19.     at GridPanel._renderColHdrRow (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:19962)
  20.     at GridPanel._updateContent (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:17448)
  21.     at FlexGrid._updateContent (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:127481)
  22.     at HTMLDivElement.<anonymous> (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:71944)
  23.     at HTMLDivElement.i (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:442378)
复制代码


从堆栈中看出来,应该是FlexGrid在做列回收时出现了问题。
我们应该怎么解决这个问题呢?

附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册

15 个回复

倒序浏览
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-6-28 16:41:53
沙发
问题已经收到,从你描述的情况来看可能是FLEXGIRD控件中存在bug,您那边有没有可能提供一个可以重现问题的简单demo? 我需要先重现问题,
回复 使用道具 举报
nutstore
金牌服务用户   /  发表于:2021-6-28 17:12:07
板凳
Richard.Ma 发表于 2021-6-28 16:41
问题已经收到,从你描述的情况来看可能是FLEXGIRD控件中存在bug,您那边有没有可能提供一个可以重现问题的 ...

这个因为demo里边,没办法修改odata协议的数据源,所以可能不太好写demo,复现步骤的话其实只要使用 odata 虚拟列表那个组件,然后渲染比较多的列,然后调小窗口宽度,再横向滚动到最后一列应该就能复现。
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-6-28 18:03:39
地板
好的,我这边验证后给您回复
回复 使用道具 举报
nutstore
金牌服务用户   /  发表于:2021-7-1 18:07:08
5#
本帖最后由 nutstore 于 2021-7-1 20:40 编辑

我们尝试更新到最新版本之后,这个问题好像复现不出来了。
哦我话说早了... 还是能复现,就是场景不一样了
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-7-1 18:18:52
6#
嗯,这两天我也用下面的地址中的Northwind>>Invoice测试了一下,也没有重现问题
https://pragmatiqa.com/xodata/

下次如果您这边有关于odata的问题的话,也可以用这种公开的数据源来测试一下,咱们两边也好同步测试结果
回复 使用道具 举报
nutstore
金牌服务用户   /  发表于:2021-7-7 10:43:06
7#
本帖最后由 nutstore 于 2021-9-23 11:39 编辑

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as wjcCore from "@grapecity/wijmo";
import * as wjcGrid from "@grapecity/wijmo.grid";
import * as wjcOData from "@grapecity/wijmo.odata";
import * as wjGrid from '@grapecity/wijmo.react.grid';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderDetails: new wjcOData.ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Order_Details_Extendeds"),
            virtualOrderDetails: new wjcOData.ODataVirtualCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Order_Details_Extendeds", {
                loaded: (sender, e) => {
                    this.setState({
                        totalItemCount: wjcCore.format("{totalItemCount:n0} items", sender)
                    });
                }
            }),
            itemCount: "",
            totalItemCount: "",
            isEmpty: false,
        };
        setTimeout(() => {
            this.setState({
                isEmpty: true
            })
        }, 3000)
    }
    render() {
        return <div className="container-fluid">
            <div className="col-sm-6">
                <h4>ODataCollectionView</h4>
                <p>{this.state.itemCount}</p>
                <wjGrid.FlexGrid itemsSource={this.state.orderDetails} isReadOnly={true} initialized={this.gridInitialized.bind(this)}>
                </wjGrid.FlexGrid>
            </div>

            <div className="col-sm-6">
                <h4>ODataVirtualCollectionView</h4>
                <p>{this.state.totalItemCount}</p>
{this.state.isEmpty ? null : (
                    <wjGrid.FlexGrid itemsSource={this.state.virtualOrderDetails} isReadOnly={true} initialized={this.virtualGridInitialized.bind(this)}>
                    </wjGrid.FlexGrid>
                )}
            </div>
        </div>;
    }
    gridInitialized(flexgrid) {
        flexgrid.formatItem.addHandler((s, e) => {
            // show row indices in row headers
            if (e.panel.cellType == wjcGrid.CellType.RowHeader) {
                e.cell.textContent = (e.row + 1).toString();
            }
        });
        flexgrid.loadedRows.addHandler((sender, e) => {
            this.setState({
                itemCount: wjcCore.format("{length:n0} items", sender.rows)
            });
        });
    }
    virtualGridInitialized(flexgrid) {
        flexgrid.formatItem.addHandler((s, e) => {
            // show row indices in row headers
            if (e.panel.cellType == wjcGrid.CellType.RowHeader) {
                e.cell.textContent = (e.row + 1).toString();
            }
        });
        flexgrid.scrollPositionChanged.addHandler(() => {
            let rng = flexgrid.viewRange;
            this.state.virtualOrderDetails.setWindow(rng.row, rng.row2);
        });
    }
}
ReactDOM.render(<App />, document.getElementById('app'));


回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-7-7 11:36:42
8#
收到
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-9-23 10:23:53
9#
抱歉忘记给您回复了,您这边提供的代码修改后无法运行起来,我把这个原始的demo打包了,你可以在这个基础上修改。我这边来重现问题

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
nutstore
金牌服务用户   /  发表于:2021-9-23 11:45:00
10#
Richard.Ma 发表于 2021-9-23 10:23
抱歉忘记给您回复了,您这边提供的代码修改后无法运行起来,我把这个原始的demo打包了,你可以在这个基础上 ...

这个包下载下来,改了代码复现不了问题;上边的代码可能复制的时候出了问题,现在已经更新了,可以在demo上复现。

看起来是新版本里已经解决了这个问题?
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部