演示过滤器与社区过滤器

Question

我刚开始使用 ag-grid。我正在研究一些文档，并且运行处理我不清楚的内容。在“列过滤”部分，我看到了示例，并整理了一些我认为与示例中重复的代码相同的代码。代码有效，我可以过滤，但我看到的过滤器弹出窗口与我在页面示例中看到的不一样。具体来说，我看到一个过滤器有一个文本输入区域，输入文本后，一个区域显示 And/Or 按钮（按钮位于文本顶部）和第二个文本输入区域。在文档中的示例中，我看到清晰的弹出窗口，其中包含以 "Contains" 开头的下拉菜单（以及其他选项）和下方的文本输入区域。我在做什么 wrongly/missing？这是预期的行为吗？我的专栏定义如下：

var columnDefs = [
{headerName: "Title", field: "title"},
{headerName: "Alias", field: "alias"}
];

我的网格选项是：

var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
enableColResize:true,
rowSelection:'single',
rowDeselection:true,
onRowSelected: onRowSelected,
onSelectionChanged: onSelectionChanged
};

我正在从 fetch 中获取行，因此未定义 rowData。

图像（第一个是我在演示中看到的，第二个是我在我的应用程序中看到的）：

我在演示应用程序中看到的过滤器

我在我的应用程序中看到的过滤器

Answer 1

来自评论：

I see your screenshots, and I don't have a clue what's happening. At a guess, I would say you have some strange CSS that's affecting the ag-grid filter. Try temporarily removing all CSS that isn't native to ag-grid. If you need more help, you'll have to provide a demo that reproduces the problem.

问题的根源似乎是materialize.css：

@thirtydot spot on. the "select" elements had been undisplayed in some other css, and the inputs had been resized. The culprit here seems to be materialize.css.

您可能需要这样的 CSS：

.ag-root-wrapper select {
    display: inline-block !important; /* might not need !important */
    /* and any other needed CSS to make selects display normally */
}

演示过滤器与社区过滤器

Demo Filters vs. Community Filters

filter

ag-grid