网页的 SQL Reporting Services 查看器 - 可以移动“查看报告”按钮吗？

Question

使用查看器控件在网页上显示 SQL Reporting Services 报表 (Microsoft.ReportViewer.WebForms)，您可以移动“查看报表”按钮吗？它默认位于报告的最右侧，这意味着您必须一直滚动才能看到按钮。对于适合窗口宽度的报表来说这不是问题，但对于非常宽的报表来说这很快就会成为问题。

Answer 1

这是一种 hack，但您可以在 JavaScript 中移动它。只需查看 ReportViewer 生成的 HTML，然后编写适当的 JavaScript 代码来移动按钮即可。我使用 JavaScript 来隐藏该按钮（因为我们想要自己的“查看报告”按钮）。任何操作生成的 ReportViewer HTML 的 JavaScript 代码都必须位于 .aspx 页面中的 ReportViewer 控件之后。这是我隐藏按钮的代码，让您了解您要做什么：

function getRepViewBtn() {
  return document.getElementsByName("ReportViewer1$ctl00$ctl00")[0];
}

function hideViewReportButton() { // call this where needed
  var btn = getRepViewBtn();
  btn.style.display = 'none';
}

Answer 2

不可以，您无法在 ReportViewer 控件中重新定位查看报告按钮。

但是，您可以创建自己的自定义报告查看控件。该控件将由报告参数字段和生成报告的按钮组成。当用户单击该按钮时，您可以在后台生成报告。您可以将报告显示为 PDF、HTML 等。

Answer 3

按钮被推到右侧的原因是参数的 td 具有 width="100%"。我正在使用以下 jquery 解决这个问题。它只是将参数 td 的宽度更改为 1。浏览器会自行将宽度扩展到元素内容的宽度。希望这可以帮助。

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%= ReportViewer1.ClientID %> td:first").attr("width", "1");
    });
</script>

Answer 4

由于我昨天正在寻找这个答案，因此我想我应该发布我想出的解决方案来解决我们的问题。我们的报告回来得很宽，我们希望“查看报告”按钮位于控件的左侧，这样就不需要滚动才能找到该按钮。我确实需要进入渲染文件的源来查找按钮和目标表的 ID 名称。

我编写了一个简单的剪切和粘贴 JavaScript 函数，将按钮从其原始位置拉出，并将其放入日期选择器下方包含表中的下一行。

function moveButton() {
  document.getElementById('ParameterTable_ctl00_MainContent_MyReports_ctl04').appendChild(document.getElementById('ctl00_MainContent_MyReports_ctl04_ctl00'));
        }

该函数在报表查看器加载事件上被调用。

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "moveButton", "moveButton();", True)

为了调整位置，我使用了 CSS ID。

#ctl00_MainContent_MyReports_ctl04_ctl00 {
    margin: 0px 0px 0px 50px;
}

Answer 5

我遇到了同样的问题，最终使用了 Travis Collins 答案的扩展；除了更改表列宽度之外，我还将“查看报告”按钮向左对齐，以便它看起来更靠近其余控件。

    <script type="text/javascript">
  $(document).ready(function() {
     $("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:first-child").attr("width", "1"); 
     $("#_ctl0_MainContent_reportViewer_fixedTable tr:first td:last-child").attr("align", "left");   
  });
</script>

您可能需要根据分配给现有控件的元素命名来调整 JQuery 选择器。