ag-grid, обеспечивает клиентскую сторону всего набора данных с правильным разбиением на страницы / фильтрацией / сортировкой

Я использую класс источника данных для предоставления данных в сетку, а в функции getRows () я вычисляю строки, которые нужно вернуть для текущей страницы. Проблема в том, что фильтрация / сортировка применяется только на текущей странице. Я не могу найти способ использовать сборку сеток для сортировки и фильтрации в функции getRows (), чтобы вернуть правильные данные путем фильтрации всего набора данных. Похоже, это будет основная функция. Таблицы данных и сетка PrimeNG делают это из коробки. Я что-то упустил или ag-grid действительно не поддерживает это? Как бы то ни было, кажется, что нет способа использовать разбиение на страницы вместе с сетками, встроенными в функции фильтрации / сортировки, если вы хотите, чтобы фильтрация / сортировка применялась ко всему набору данных (что является наиболее популярным вариантом использования imo)


angular ag-grid datatables
person Josh    schedule 24.01.2017    source источник
comment
Если я правильно понимаю, вы показываете, скажем, 10 строк на странице и помещаете только 10 строк в атрибут rowData ag-grid? или вы используете функцию разбиения на страницы?   -  person Jarod Moser    schedule 25.01.2017
comment
Я использую функцию разбивки на страницы. Я вообще не использую rowData, я предоставляю dataSource с функцией getRows (), аналогичной тому, как они это делают в примере № 1 на странице, которую вы связали. если вы посмотрите на функцию getRows (), она берет allOfTheData и нарезает ее, чтобы получить строки для текущей страницы. Моя проблема в том, что allOfTheData всегда является исходной коллекцией, поэтому, когда я просматриваю ее, порядок операций неправильный. Сначала я получаю страницу, затем она сортирует / фильтрует содержимое выгружаемого набора данных. Я хочу, чтобы он отсортировал / отфильтровал всю коллекцию, а затем страницу.   -  person Josh    schedule 25.01.2017
comment
Даже пример на сайте работает некорректно. Отсортируйте его по странам, а затем начните листать список. Австралия будет на каждой странице. Я хочу отсортировать всю коллекцию по округам, а затем пролистать страницу так, чтобы в конечном итоге я пролистал b, c, d и больше не видел Австралию на последующих страницах.   -  person Josh    schedule 25.01.2017
comment
В документации даже сказано, что у вас есть два варианта сортировки и фильтрации. Либо вы можете разрешить сетке делать это на определенной странице (в сетке), либо вы делаете это на стороне сервера по всему набору данных. Но почему бы не использовать третьи варианты сортировки / фильтрации / разбиения на страницы по всему набору данных в сетке?   -  person Josh    schedule 25.01.2017

Ответы (1)


arrow_upward
3
arrow_downward

Еще нет, на их странице github есть открытый запрос на это улучшение

На этой странице предлагается обходной путь путем создания новой функции сортировки и фильтрации для каждого столбца. Учитывая, насколько сложным и конкретным может быть это решение, я создал другой обходной путь, используя Slave / Master. Вот jsfiddle для демонстрационных целей.

Это работает за счет призрачной сетки, которая показывает только заголовок. Эта призрачная сетка будет обрабатывать всю сортировку и фильтрацию, присущую ag-сетке, затем она будет передавать отсортированные / отфильтрованные данные в сетку зомби.

Соответствующий код (не включает в себя то, что изначально потребовалось для настройки разбивки на страницы):

HTML:

<div id="ghostGrid" style="height: 25px" class="ag-fresh"></div>
<div id="zombieGrid" style="height: 500px;" class="ag-fresh"></div>

Высота ghostGrid должна равняться высоте заголовка (по умолчанию 25 пикселей)

CSS:

.ag-bl-full-height {
  overflow: unset;
}

.ag-menu {
  top: 23px !important;
  z-index: 99;
}

Этот CSS необходим для отображения всплывающего меню фильтров в нужном месте (возможно, придется поиграть с верхним свойством в вашем приложении)

JS:

var zombieGridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    headerHeight:0,
    rowModelType: 'pagination',
    paginationPageSize: 50,
    slaveGrids: [],
};

var ghostGridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableFilter: true,
    enableSorting: true,
    slaveGrids: [],
    onFilterChanged: updateZombieAfterSortAndFilter,
    onSortChanged: updateZombieAfterSortAndFilter
};

function updateZombieAfterSortAndFilter(){
    sortedAndFilteredData = [];
    ghostGridOptions.api.getModel().rowsToDisplay.forEach(e=>sortedAndFilteredData.push(e.data))
    setRowData(sortedAndFilteredData)
}

ghostGridOptions.slaveGrids.push(zombieGridOptions);
zombieGridOptions.slaveGrids.push(ghostGridOptions);
person Jarod Moser    schedule 25.01.2017
comment
Спасибо, что нашли это! Это однозначно отвечает на вопрос. Кажется, сейчас это невозможно без довольно уродливого обходного пути. Я задал там вопрос, который я повторю здесь, если вы знаете. В опубликованном обходном пути используется настраиваемая функция фильтра и сортировки, которая не обрабатывает все сложные случаи (больше, меньше, начинается с и т. Д.) И должна быть создана для каждого экземпляра сетки, потому что она специфична для столбцов . Можно ли получить доступ к внутренней логике сортировки / фильтрации сетки, чтобы передать весь набор данных и получить обратно отсортированный / отсортированный набор? - person Josh; 25.01.2017
comment
Возможная идея: создать ghostGrid и zombieGrid, ghostGrid вообще не отображается, а просто обрабатывает сортировку / фильтрацию. zombieGrid - это то, что люди видят и передают фильтры в ghostGrid. Вам нужно будет использовать методы api, такие как getModel(), setQuickFilter(), setSortModel() Не уверен, насколько это будет сложно, я попытаюсь придумать jsfiddle позже. (возможно, функция ведомого / ведущего будет как-то полезна?) - person Jarod Moser; 25.01.2017
comment
Интересная идея! Итак, по сути, призрачной сетке передаются параметры сортировки / фильтрации, а затем через api извлекаются данные и используются в функции getRows () zombieGrid? Не уверен, что могу представить себе, как именно это будет работать, может быть, есть таймауты, чтобы дать ghostGrid время сделать свое дело, а затем передать результат зомби? Очень интересно посмотреть, что вы придумали! - person Josh; 25.01.2017