ag网格上的每列过滤器

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