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