1

首先，我正在使用一个使用 razor 视图引擎的 MVC 4 Web 应用程序，并且文件路径来自一个 Windows Communication Foundation 应用程序。

我正在尝试在带有分页的 IFrame 内显示 HTML 文件。该表是从数据库中生成的，并以代码形式从 XML 文档馈送到 XSL 样式表中。文件路径以字符串形式返回，并完美地加载到 IFrame 中。我可以查看表格并根据需要滚动。

问题出现在我需要将已经存在的 HTML 表格拆分为不同页面的地方，因为表格可能太大，有数千行数据。

这是输入 html 的示例、缩短版本。该文件将以字符串形式出现。

字符串文件路径 = @"C:\documents\visualstudio2010\projects\myproject\Temp\Pagination.html";

<!DOCTYPE html />
<script src="../../Scripts/jquery.Pagination.js" type="text/javascript"></script>
<title></title>
<html>
<head>
</head>
<body>
    <table border="1">
        <thead>
            <th>
                Names
            </th>
            <th>
                Age
            </th>
        </thead>
        <tbody>
            <tr>
                <td>
                    John Smith
                </td>
                <td>
                    30
                </td>
            </tr>
            <tr>
                <td>
                    Jane Smith
                </td>
                <td>
                    29
                </td>
            </tr>
        </tbody>
    </table>
  <body>
</html>

这是我对生成 IFrame 的看法。

<script src="../../Scripts/jquery.Pagination.js" type="text/javascript"></script>
<script src="../../Scripts/sorttable.js" type="text/javascript"></script>
<script src="../../Scripts/dragtable.js" type="text/javascript"></script>
<script src="../../Content/themes/base/jquery.ui.pagination.css" rel="stylesheet"
     type="text/css" />
@{
     ViewBag.Title = "HtmlDisplay";
}
<html>
<head>
    <title>Save as example</title>
    <script language="JavaScript" type="text/JavaScript">
        var now = false;
        function saveIt() {
            if (now) { document.execCommand("SaveAs"); }
        }
    </script>
</head>
<body onload="now=true">
    <a href="javascript:;" onclick="saveIt();">
        <img style="height: 40px; width: 40px; display: inline;"             src="../../Content/images/go_down_blue.png"
        alt="" />
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Print Iframe From Parent</title>
    <style>
        body
        {
            font-family: Arial;
            font-size: 12px;
        }
    </style>
</head>
<body>
</body>
</html>
<script language="javascript" type="text/javascript">
    var header_friendly = '<div style="position: relative; text-align: center; border-bottom: 2px     solid black; font-family: verdana; font-size: 11px; padding: 5px; padding-top: 1px; color: darkred">This is a printer friendly version of the page. Click <button style="cursor: pointer" onclick="window.print(); parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">PRINT</button> to print it. Click <button style="cursor: pointer" onclick="parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">CLOSE</button>  to close this window without printing.<\/div>'

    function printer_friendly(which, left, top, width, height) {
        frames['ifr_friendly'].document.body.innerHTML = header_friendly +     frames[which].document.body.innerHTML;
        document.getElementById('ifr_friendly').style.left = left;
        document.getElementById('ifr_friendly').style.top = top;
        document.getElementById('ifr_friendly').style.width = width;
        document.getElementById('ifr_friendly').style.height = height;
    }};
</script>
<div>
    <!-- Order: name of the printer-friendly-iframe, left, top, width, height  -->
    <a href="javascript: void(0)" onclick="printer_friendly('ifr', '5%', '5%', '90%', '90%')">
        <img src="../../Content/images/print-256.png" alt="" style="height: 40px; width: auto;" />        </a>
    <iframe class="sorttable dragtable" id="ifr" name="ifr" style="position: absolute; left: 15%;     top: 45%; width: 70%;
        height: 60%;" src="..\..\Temp\Pagination.html"></iframe>
    <!-- The printer friendly window -->
    <iframe id="ifr_friendly" name="ifr_friendly" style="position: relative; z-index: 10000;
        background: white; left: -10000px; border: 1px solid black"></iframe>
</div>

我曾尝试使用 JQuery 对表进行分页，但没有按计划进行。如果我最终使用某种类型的 JQuery，它必须是 1.8 或更低版本才能在 IE8 中使用。您可能会问我为什么不制作不同的表格，然后单击以生成下一个 html 页面。这是可能的，但由于我的要求，我不能这样做。

欢迎任何意见。提前致谢。

4

2 回答 2

0

您是否尝试过使用 MVC WebGrid 代替？他们内置了分页功能，将为您生成实际的 HTML。我假设您可以选择直接从数据库中获取数据，而不是获取预渲染的 HTML。

MSDN 文章：http: //msdn.microsoft.com/en-us/magazine/hh288075.aspx

代码看起来像......

@{
     var grid = new WebGrid(model)
}
@if (grid.TotalRowCount > 0)
@grid.GetHtml(tableStyle: "WebGridTableStyle", alternatingRowStyle: "WebGridAlternatingRowStyle", rowStyle: "WebGridRowStyle", headerStyle: "GridHeader", columns: grid.Columns(
    grid.Column("Name", format: @<text>@item.Name</text>),
    grid.Column("Age", format: @<text>@item.Age</text>)))
@grid.Pager(
    mode: WebGridPagerModes.All,
    numericLinksCount: 5,
    firstText: "<<",
    previoustext: "<",
    nextText: ">",
    lastText: ">>")
}
于 2013-10-08T19:26:45.463 回答
0

我最终使用 JavaScript 来隐藏表格。在样式表中，我为每个创建的表创建了一个不同的表 ID（这些表是使用递归创建的）。在样式表创建的 head 标记中，我添加了一个 javascript 函数来隐藏表格。它使用了 document.getElementById(id).style.display = 'none';。当然，这不是真正的分页，但它确实呈现了我想要的效果，而无需创建多个 html 文件。href 也是使用递归创建的，因此页数与表数相匹配。上一个和下一个按钮通过一个 for 循环检查表格的显示，如果表格显示等于“块”，则将该表格呈现为“无”，并将该表格的前面或后面的一个呈现为块。

于 2013-10-25T15:40:00.797 回答