9

私は次の形式のデータを持っています：

（ダミーエントリ）（id = posGridView）

ここに画像の説明を入力してください

販売を処理すると、すべての列ではなく、選択した列に小さなレシートが自動的に印刷されます。

このグリッドビューではすべてのデータを利用できるため、jqueryを使用して任意の形式で動的に印刷するにはどうすればよいですか？

編集済み

実は上記のグリッドビューからダイナミックにこのフォーマットで印刷したい

ここに画像の説明を入力してください

4

1 に答える 1

29

印刷

ページを印刷するためにjQueryは必要ありません。必要なのは、JavaScript関数ですwindow.print();。

特定のコンテンツを印刷する必要がある場合は、CSSで残りを非表示にする（および印刷領域をフォーマットする）ことができます。

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style> 
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

ご覧のとおり、スタイルタグのメディア属性を設定することで、通常のビュー（画面）と印刷ビュー（印刷）の両方のスタイルを設定できます。完全な記事はここにあります。

ダイナミズム

プロセスに特定のダイナミズムを追加できますが、それはユーザーにとってダイナミカルである可能性があることに注意してください。ただし、コードでは、印刷を添付するためのイベントを検索する必要があります。そのイベントは、アンカーのクリックである可能性があります。

<a href='javascript:window.print();'>Print</a>

それはあなたのページのonloadイベントである可能性があります：

window.onload = function () {
    window.print();
}

または、注意が必要なその他のイベント（現在、jQueryを使用していることに注意してください）：

var doPrintPage;

function printPage(){
    window.print();
}

$(document).ready(function(){
    $('input').blur(function(){
        //3sec after the user leaves the input, printPage will fire
        doPrintPage = setTimeout('printPage();', 3000);
    });
    $('input').focus(function(){
        //But if another input gains focus printPage won't fire
        clearTimeout(doPrintPage);
    });
});

上記のコードは非常に単純です。ユーザーが入力を離れてから3秒後に、printPageが起動します。入力がこれらの3秒間にフォーカスを取得した場合、printPageは呼び出されません。この正確なコードが必要なものだとは思いませんが、ダイナミズムをエミュレートする方法を説明します。ここで、setTimeoutとclearTimeoutの定義を確認できます。

編集：上記で説明したように、CSSを介して不要な印刷HTMLを非表示にし、window.printを呼び出すことはほとんどお勧めしません。とにかく、ここで私は新しいページを通してそれを行うためのいくつかのコードを追加しています。

真新しいページからの印刷

表示しているページとはまったく異なるページから印刷する場合は、そのページを要求し、サーバー側でHTMLを管理して、読み込まれるとすぐに印刷するようにページに指示できます。これを行うには、少なくとも2つの方法があります。それらを段階的に見てみましょう：

A）最初の選択肢は、GridViewを新しいページに送信し、そこから印刷することです。問題は、これを行うために新しいページを簡単に開くことができないことです。そのため、ページから印刷するhtmlを表示する新しいページに移動する必要があります。

A1）このためには、GridViewを次のフォームで囲む​​必要があります。

<form runat="server">
<asp:GridView id="gridView" />
<asp:Button id="btnPrint" Text="Print" runat="server" OnClick="btnPrint_Click" />
</form>

A2）次に、*btnPrint_Click*から「printPage.aspx」を呼び出します。JS / jQueryを使用してGridViewを変更した場合、それらの変更を利用できない可能性があることに注意してください（.NETがGridViewではなく非表示の状態変数を読み取る可能性があるため）。

B）それを行う2番目の方法はJavaScriptを使用することです。ただし、この選択では、新しいページでテーブルを編集する場合に苦労することに注意してください（GridViewを受信しないため、htmlを受信します）。良い点は、新しいページを簡単に開くことができることです。

B1）もちろん、次のようなフォーム（ターゲットとアクションに注意）が必要になります。

<form id="myPageForm" name="myPageForm" target="_blank" action="printPage.aspx">
    <input type="hidden" name="htmlToPrint" id="htmlToPrint" />
    <input type="button" value="submit">Print</button>
</form>

B2）次に、データをそのアンカーに渡す必要があります。フォームを送信する前に、テーブルデータを使用して入力を設定します。

$(document).ready(function(){
    $('#myPageForm').submit(function(){
        //Filling the hidden input
        var htmlToPrint = $(".posGridView").html(); //I'm using a class and not an ID 'cause .NET will change your GridView's ID when rendering you page
        $("#htmlToPrint").value(htmlToPrint);
        return true;
    });
});

サーバー側（printPage.asx）にデータを取得したら、上記のように、印刷するHTMLを簡単に作成し、そのページのonloadでwindow.print（）を呼び出すことができます。

于 2012-06-11T00:16:23.490 に答える