Вызовите node.setSelected (true), но строка не выбрана из React

Question

В приложении My React есть кнопка «Слияние» , которая вызывает веб-сервис для объединения 2 строк в ag-grid в одну строку.

После вызова веб-службы я хочу повторно отобразить сетку, выбрав первую строку. Я вызываю свою функцию ReRender, чтобы сделать это. Функция вызывает мой веб-сервис для повторного извлечения данных, затем пытается выбрать строку.

Никаких ошибок не происходит, данные повторно отображаются, консоль показывает, что я нашел соответствующую строку для выбора, поэтому я вызываю node.setSelection(true), но строка не выбрана. Что я могу сделать? Сетка разбита на страницы.

Код:

    ReRender = (inventorykey) => {
            console.log(inventorykey)
            this.rowChecked = []
            fetch( 'http://apsrp07823.svr.com:8088/mpa/getCockpit?userkey=' + this.state.userkey )
            .then(res=>res.json())
            .then(resj=>{
                if (resj.rows && resj.rows.length>0) {
                    this.setState({rowData:resj.rows})
                }
            })
            .then(
                    console.log('invKey loop:'),
                    this.gridApi.forEachNode( (node) => {
                        if ( node.data.inventorykey === inventorykey ) {
                        console.log('Found it!')  
                        node.setSelected(true);}
                        else{console.log('no '+inventorykey)}
                    })
                )

            .catch(console.log)
            //this.gridApi.redrawRows(redrawRowsParams)
            //this.gridApi.refreshCells()
        }

--Console log output---

    27991
    InventoryList.js:114 invKey loop:
    InventoryList.js:119 Found it!
    105
    InventoryList.js:121 no 27991
    UserBoard.js:86 forceUpdate

Согласно журналу консоли, он нашел строку и сделал вызов, чтобы выбрать ее. Так почему же он не выбран? Пожалуйста, сообщите.

Answer 1

То, что предлагает @Pratik, является правильным, я бы хотел добавить что-то еще.

• Вы можете напрямую установить свойство rowSelection для самого элемента сетки (кроме от gridOptions).

      <AgGridReact
        ...
        onGridReady={this.onGridReady}
        rowData={this.state.rowData}
        rowSelection='single'
      />
  

• rowSelection: Тип выбора строки, установленный на «один» или «несколько», чтобы разрешить выбор. 'single' будет использовать выделение одной строки, так что когда вы выбираете строку, любая ранее выбранная строка становится невыбранной. «несколько» позволяет выбрать несколько строк.

Ссылка: Выбор строки

Answer 2

Я решил это. Проблема заключалась в том, что мой forEachNode l oop был выполнен до того, как данные сетки были повторно загружены из вызова веб-службы. Кажется, что сетка загружает данные асинхронно, поэтому мой код для выбора строк работает нормально, и после его выполнения сетка перезагружает свои данные и теряет мой выбор.

Решением было использование нового событие называется onRowDataChanged. Я положил forEachNode l oop там, и он работает.

render() {
    return (
        <Container fluid className="ag-theme-balham"  style={{  height: '100%',  margin:'0px', padding:'0px' }}>
            <AgGridReact
                onGridReady={this.onGridReady}
                onRowDataChanged={this.onRowDataChanged}
                onRowSelected = {this.inventorySelectedHandler}
                rowSelection='multiple'
                pagination={true}
                autoSize={true}
                paginationAutoPageSize={true}
                columnDefs={this.state.columnDefs}
                rowData={this.state.rowData}
                modules={AllModules}>
            </AgGridReact>
        </Container>
    );
}

Вот новая функция:

onRowDataChanged = params => {
    //console.log('InventoryList.onRowDataChanged!')
    var invkey=this.state.invkey
    if(invkey)
    {
        this.gridApi.forEachNode( (node) => {
            if ( node.data.inventorykey === invkey ) {
            //console.log('Found it!')  
            node.setSelected(true);}
        })
        this.setState({invkey:null})
    }
}

Обратите внимание, что я также должен установить для invkey значение null в состоянии после завершения выбора строки.

Спасибо всем, кто ответил.

Answer 3

Не глядя на остальную часть вашего кода, я подозреваю, что ваша сетка, возможно, не была настроена для выбора.

Вы можете выбрать любую строку для начала?

Вы может отсутствовать свойство rowSelection='single' в вашей gridOptions