樱花飞舞 发表于 2024-11-1 11:13:03

【5.20213.824】flexGrid表格使用select方法的视图滚动的问题

请问我在react中使用wijmo的flexgrid组件,使用select方法,选中数据后,视图定位到表格最底部,有什么方法可以让视图滚动到视图居中的位置吗?





Richard.Ma 发表于 2024-11-1 11:13:04

这个是产品的设计就是这样,目前没有选项可以让选中行刚好在中间,你可以不加最后一个参数,这样只是单纯select而不会跳转

然后自己自己判断需要滚动到哪一行,通过scrollintoview方法滚动即可,
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#scrollintoview

Richard.Ma 发表于 2024-11-1 11:53:36

“使用select方法,选中数据后,视图定位到表格最底部”具体的代码是什么?

樱花飞舞 发表于 2024-11-1 11:58:16

Richard.Ma 发表于 2024-11-1 11:53
“使用select方法,选中数据后,视图定位到表格最底部”具体的代码是什么?

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import * as wjGrid from '@grapecity/wijmo.react.grid';
import { ODataCollectionView } from '@grapecity/wijmo.odata';
import * as wjFilter from '@grapecity/wijmo.react.grid.filter';
class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
            flexGridRef: null,
            customers: new ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Customers", {
                sortOnServer: true,
                filterOnServer: true
            }),
            itemCount: ""
      };
    }
    render() {
      return (<div className="container-fluid">
      <p>{this.state.itemCount}</p>
      <button onClick={this.handleJump}>跳转</button>
      <wjGrid.FlexGrid itemsSource={this.state.customers} isReadOnly={true} initialized={this.flexInitialized.bind(this)}>
          <wjFilter.FlexGridFilter />
      </wjGrid.FlexGrid>
      </div>);
    }
    flexInitialized(flexgrid) {
      this.setState({
            flexGridRef: flexgrid
      })
      flexgrid.loadedRows.addHandler(() => {
            this.setState({
                itemCount: flexgrid.rows.length + " items"
            });
      });
    }
    handleJump = () => {
      if (this.state.flexGridRef) {
            this.state.flexGridRef.select(20, 0, true)
      }
    }
}
setTimeout(() => {
    const container = document.getElementById('app');
    if (container) {
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    }
}, 100);

樱花飞舞 发表于 2024-11-1 12:00:04

樱花飞舞 发表于 2024-11-1 11:58


请见41行,奇怪贴不了图

樱花飞舞 发表于 2024-11-1 12:54:42

详情请见贴图,谢谢
页: [1]
查看完整版本: 【5.20213.824】flexGrid表格使用select方法的视图滚动的问题