Фильтровать одну ag-сетку на основе события из другой

#javascript #ag-grid

#javascript #ag-сетка

Вопрос:

Я хочу выбрать одну строку в моей первой сетке, grid1 и функция event затем отфильтровала бы мою другую сетку grid2 на основе значений, найденных в выбранной строке. Я использую чистую версию библиотеки на javascript.

Что-то вроде

 gridOptions:{
    onRowSelected:my_event_filter_func,
    rowData: [...],
    columnDefs:[...]
}
grid1 = new agGrid.Grid(document.querySelector("#the_place"),gridOptions)

( grid2 определяется таким же образом на основе разных данных и без функции event)

где my_event_filter_func находится

 my_event_filter_func = function(event) {
    let my_name = event.data.name
    // filter grid2 to show only the rows where the 'name' column matches my_name
}

Приветствуется любая помощь.

Ответ №1:

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

 function copyData() {
  rowData = [];
  gridApi.forEachNode(node => rowData.push(node.data));
  // temp is the copy of your full data in grid2
  temp = [...rowData];
}

Далее, на вашем my_event_filter_func , вы можете отфильтровать строки, которые будут отображаться в grid2, на основе отфильтрованного значения из grid1.

 function my_event_filter_func(event) {
  let my_name = event.data.name

  // get the rows that do not have the matching value
  const rowsToBeRemoved = temp.filter(row => row['name'] !== my_name);

  // remove the rows from grid2 that do not have the matching names
  gridOptions.api.updateRowData({remove: rowsToBeRemoved});

}

1. Спасибо, что потратили время. да, в итоге я сделал что-то подобное. Также опубликую свой ответ.

2. Приятно! Также хотелось бы увидеть ваше решение и посмотреть, как вы его реализуете. В настоящее время я делаю довольно много вещей с ag-grid, поэтому я пытаюсь учиться у как можно большего числа пользователей ag-grid. Что ж, если мой код полезен, был бы признателен, если бы вы могли проголосовать за 😉

Ответ №2:

Источником для двух сеток являются базовые данные для grid1 , так что это упростило мне жизнь. Если это не так, вам нужно сохранить ваши базовые данные для grid2 где-нибудь, чтобы вы могли получить к ним доступ при запуске события.

В итоге я объявил свои 2 сетки как глобальные переменные и использовал приведенную ниже функцию в качестве функции события :

 var onSelectionChanged = function(event) {

let name = grid1.gridOptions.api.getSelectedRows()[0].name; // we know there is only one
let newRowData = grid1.gridOptions.rowData
    .filter(x => x.name===name)
    .map(x => {
            return {
                'name': x.name
                // other fields...
            }
    })
    // this overwrites grid2 data so need to save original data somewhere.
    grid2.gridOptions.api.setRowData(newRowData);
    grid2.gridOptions.api.refreshCells({force:true});
};