javascript - ASP.NET 中的 Reportviewer 控件加载指示器

Question

我只是用新主题为我的网站换肤，是否可以更改 ReportViewer 控件的加载图像（具有绿色）？

我尝试了一些建议的解决方案，但它不起作用，有人可以指导我吗？

Answer 1

您始终可以使用 CSS 对其进行修改。

如果您调查从 ReportViewer 控件呈现的 HTML，应该有一个<div>名为[ID_of_control]_AsyncWait_Wait

在我的，我有 css；

<style>
    /* this will remove the spinner */
    div#ReportViewer1_AsyncWait_Wait img{ display: none; } 
    /* this allows you to modify the td that contains the spinner */
    div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child{ background: red; width: 100px; height: 100px; } 
</style>

您需要做的就是将其设置为background-image打开div#ReportViewer1_AsyncWait_Wait table tbody tr td:first-child，以便拥有自己的自定义图像。

Answer 2

以下解决方案使用 jQuery 和 CSS 实现了替换加载图像。环境是 Visual Studio 2013、ReportViewer 10.0、.NET 4.0。

该技术使用window.setInterval替换加载图像并保持它被替换。在某些情况下，例如选择级联参数，ReportViewer 会替换其大部分 DOM 内容，包括加载图像。因此，使用 CSS 背景图像或使用 jQuery 一次性替换加载图像的简单解决方案不起作用。

给定添加到 .ASCX 用户控件的 ReportViewer 控件：

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<%-- replace stock SSRS wait control ("green spinner") with our own; execute every 200 milliseconds --%>
<script type="text/javascript">
$(document).ready(function () {
    OurApp.timeoutID = window.setInterval(OurApp.reportViewerWaitControlSubstitute, 200);
});
</script>

<rsweb:ReportViewer ID="rvc0" runat="server" ... CssClass="ReportViewerControl" ... >
</rsweb:ReportViewer>

JavaScript：

var OurApp= OurApp|| {};

OurApp.reportViewerWaitControlSubstitute = function () {
    var control = $('.ReportViewerControl div[id$="_AsyncWait_Wait"] img');
    var source = control.attr("src");
    var path = "/media/images/atom.gif";
    var style = "height:48px;width:48px;border-radius:10px;margin-right:10px";
    //don't replace if already our image, or it will not animate
    if (source && (source != path)) {
        control.attr("src", path);
        control.attr("style", style);
    }
}

CSS（用于圆角和更均匀的图像和文本排列）：

.ReportViewerControl div[id$='_AsyncWait_Wait'] {
    border-radius:10px;
    padding:15px 15px 0 !important}

结果：

特定的 .gif 是一个动画原子，在加载 ReportViewer 元素时看起来非常酷！