Per-column 过滤 ag-grid

Question

如何在 header 标签和 ag-grid 中的数据之间显示 per-column 过滤器，而不是在每列的下拉菜单中显示过滤器？

Answer 1

最好的选择是使用 Header Template 并在其中包含一个输入。您还需要增加 gridOptions 中 header 的高度。

var gridOptions = {
    ...
    headerHeight: 150, // make this as tall as you need...
    headerCellTemplate: HEADER_CELL_TEMPLATE, // I chose to name template vars in all caps
    ...
}

var HEADER_CELL_TEMPLATE = '<div class="ag-header-cell">' + 
    '<div id="agResizeBar" class="ag-header-cell-resize"></div>' +
    '<span id="agMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
    '<div id="agHeaderCellLabel" class="ag-header-cell-label">' +
        '<span id="agSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' +
        '<span id="agSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' +
        '<span id="agNoSort" class="ag-header-icon ag-sort-none-icon"></span>' +
        '<span id="agFilter" class="ag-header-icon ag-filter-icon"></span>' +
        '<span id="agText" class="ag-header-cell-text"></span>' +
    '</div>' +
    '<input type="text" ></input>' +
'</div>'

Answer 2

还有一个用于网格配置的 floatingFilter 选项，它也可以做类似的事情：

gridOptions = {
   // turn on floating filters
   floatingFilter: true
   ... 
}

Per-column 过滤 ag-grid

Per-column Filter on ag-grid

filtering

ag-grid