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

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

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

然后自己自己判断需要滚动到哪一行，通过scrollintoview方法滚动即可，
https://demo.grapecity.com.cn/wi ... html#scrollintoview

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

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

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './app.css';
   
4. //
   
5. import * as React from 'react';
   
6. import * as ReactDOM from 'react-dom/client';
   
7. import * as wjGrid from '@grapecity/wijmo.react.grid';
   
8. import { ODataCollectionView } from '@grapecity/wijmo.odata';
   
9. import * as wjFilter from '@grapecity/wijmo.react.grid.filter';
   
10. class App extends React.Component {
    
11.     constructor(props) {
    
12.         super(props);
    
13.         this.state = {
    
14.             flexGridRef: null,
    
15.             customers: new ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Customers", {
    
16.                 sortOnServer: true,
    
17.                 filterOnServer: true
    
18.             }),
    
19.             itemCount: ""
    
20.         };
    
21.     }
    
22.     render() {
    
23.         return (<div className="container-fluid">
    
24.         <p>{this.state.itemCount}</p>
    
25.         <button onClick={this.handleJump}>跳转</button>
    
26.         <wjGrid.FlexGrid itemsSource={this.state.customers} isReadOnly={true} initialized={this.flexInitialized.bind(this)}>
    
27.           <wjFilter.FlexGridFilter />
    
28.         </wjGrid.FlexGrid>
    
29.       </div>);
    
30.     }
    
31.     flexInitialized(flexgrid) {
    
32.         this.setState({
    
33.             flexGridRef: flexgrid
    
34.         })
    
35.         flexgrid.loadedRows.addHandler(() => {
    
36.             this.setState({
    
37.                 itemCount: flexgrid.rows.length + " items"
    
38.             });
    
39.         });
    
40.     }
    
41.     handleJump = () => {
    
42.         if (this.state.flexGridRef) {
    
43.             this.state.flexGridRef.select(20, 0, true)
    
44.         }
    
45.     }
    
46. }
    
47. setTimeout(() => {
    
48.     const container = document.getElementById('app');
    
49.     if (container) {
    
50.         const root = ReactDOM.createRoot(container);
    
51.         root.render(<App />);
    
52.     }
    
53. }, 100);
    

复制代码

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

请见41行，奇怪贴不了图

详情请见贴图，谢谢