ag-grid上的每列过滤器

Question

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

Answer 1

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

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
   ... 
}