为 Devextreme Datagrid 标头过滤器添加自定义微调器图像答案

【问题标题】：Add custom spinner image for the Devextreme Datagrid header filter为 Devextreme Datagrid 标头过滤器添加自定义微调器图像
【发布时间】：2017-03-14 13:26:29
【问题描述】：

devextreme的datagrid控件有一个loadPanel配置。

https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDataGrid/Configuration/loadPanel/

但是，为了保持一致性，我希望数据网格中列的标题过滤器内的微调器具有相同的可配置性。

我需要使用自定义 gif 并删除默认面板并加载显示的文本有人知道怎么做吗？

【问题讨论】：

标签： angular devexpress devextreme

【解决方案1】：

恐怕没有您提到的内置功能。无论如何，您可以使用 CSS 对其进行自定义。

在这种情况下，您必须检查 html 标记并更改所需的样式。

在sample 中，我更改了以下样式以自定义标题过滤器中的加载指示器：

/* hide 'Loading...' message */
.dx-header-filter-menu .dx-scrollview-scrollbottom-text {
    display: none;
}

/* hide default loading icon */
.dx-header-filter-menu .dx-loadindicator-icon .dx-loadindicator-segment {
    display: none;
}

/* use custom loading icon */
.dx-header-filter-menu .dx-loadindicator-icon {
    background: url('https://preloaders.net/preloaders/3/Chasing%20arrows.gif') no-repeat 0 0;
    width: 28px;
    height: 28px;
    background-size: 100% 100%;
}

是的，我在这里使用 jQuery 方法。但这没有意义，因为在 Angular2 应用程序中您必须覆盖相同的样式。

【讨论】：

工作就像一个魅力。非常感谢。我不得不删除 dx-header-filter-menu 因为层次结构有点不同。而是使用“/deep/.dx-loadindicator-icon”。此外，尝试将图标的大小更改为更大的数字，但不能。有什么用吗？
我觉得应该是/deep/ .dx-loadindicator { width: 64px; height: 64px; }