1

まず、Razor ビュー エンジンを使用する MVC 4 Web アプリケーションを使用しています。ファイル パスは Windows Communication Foundation アプリケーションから取得されます。

ページネーションを使用して IFrame 内に HTML ファイルを表示しようとしています。テーブルはデータベースから生成され、コード内の XML ドキュメントから XSL スタイルシートにフィードされます。ファイルパスは文字列として返され、IFrame に完全に読み込まれます。テーブルを表示し、必要に応じてスクロールできます。

テーブルが大きすぎて数千行のデータになる可能性があるため、既存の HTML テーブルを別のページに分割する必要がある場合に問題が発生します。

入力 html の短縮バージョンのサンプルを次に示します。このファイルは文字列として入ってきます。

string filePath = @"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 を使用することになった場合、IE8 で使用するには 1.8 以下である必要があります。別のテーブルを作成し、オンクリックで次の html ページを生成しない理由を尋ねているかもしれません。それは可能ですが、私の要件のためにそれを行うことはできません。

任意の入力を歓迎します。前もって感謝します。

4

2 に答える 2

0

最終的に JavaScript を使用してテーブルを非表示にしました。スタイル シートで、作成されたテーブルごとに異なるテーブル ID を作成しました (テーブルは再帰を使用して作成されました)。スタイル シートで作成した head タグに、テーブルを非表示にする JavaScript 関数を追加しました。document.getElementById(id).style.display = 'none'; を使用しました。もちろん、これは本当のページネーションではありませんが、複数の html ファイルを作成しなくても、目的の効果がレンダリングされました。href も再帰を使用して作成されたため、ページ数はテーブル数と一致しました。前のボタンと次のボタンは、テーブルの表示をチェックする for ループを通過し、テーブルの表示が「ブロック」に等しい場合、そのテーブルを「なし」としてレンダリングし、そのテーブルの前または次のテーブルをブロックとしてレンダリングしました。

于 2013-10-25T15:40:00.797 に答える