JqG​​rid Web 印刷実装 code_jquery

IE9では問題なく印刷できますが、IE6、7、8では最初の数ページが真っ白になってしまいます（列ヘッダー情報のみが表示されます） いろいろ調べた結果、ui-jqgrid-であることが分かりました。 bdivスタイルクラス(ui.jqgrid.css内 のオーバーフローが原因です)を印刷前に削除し、印刷後に元に戻してください。
印刷時の CSS スタイルは次のとおりです:

コードをコピー コードは次のとおりです:

< style type="text/css" media="print">
#accordion h3, #vcol, div.loading, div.ui-tabs-hide,ul.ui-tabs-nav li , td.HeaderRight { 表示: なし }
.ui-jqgrid-titlebar, .ui-jqgrid-title{ 表示: なし }
.ui-jqgrid-bdiv_self{位置: 相対マージン: 0em; 0; text-align :left;}
#pager{display:none; z-index:-1;}

印刷コード:

コードをコピー コードは次のとおりです:

$("#btnPrint").live("click ", function () {
window.focus();
window.print();
return false;
});
var GridHeight;
function window.onbeforeprint( ) {
//print Pre-event var jqgridObj=jQuery("#jqgridlist");
GridHeight = jqgridObj.jqGrid('getGridParam', 'height');// 高さを取得 jqgridObj.jqGrid(' setGridHeight', '100%');/ /主に、jqgrid にスクロール バーがある場合に、スクロール バーのすべての内容を印刷できるように、高さを 100% に設定します $("#gview_jqgridlist .ui-jqgrid -bdiv").removeClass().addClass("ui -jqgrid-bdiv_self");//オーバーフロー属性を削除}
function window.onafterprint() {//印刷後のイベント//非表示の要素を解放
$("#gview_jqgridlist .ui-jqgrid-bdiv_self ").removeClass().addClass("ui-jqgrid-bdiv");//オーバーフロー属性を復元します。そうしないと、jqgrid のスクロール バーが消えます。 jQuery("#jqgridlist" ).jqGrid('setGridHeight', GridHeight);/ /印刷前に高さに設定します}

CSS メディア プロパティの概要:
メディア タイプを使用すると、ドキュメントを配置するメディアを定義できます。が提出されます。ドキュメントは、モニター、紙媒体、聴覚ブラウザなどに表示できます。
メディア タイプ
一部の CSS プロパティは、特定のメディアのみを対象とするように設計されています。たとえば、「voice-family」属性は、ユーザー端末の聴覚を考慮して設計されています。他のプロパティはさまざまなメディアで使用できます。たとえば、「font-size」属性は印刷メディアだけでなくモニターにも使用できますが、値が異なる場合があります。モニター上に表示されるドキュメントは、通常、紙上のドキュメントよりも大きなフォント サイズを必要とします。同時に、サンセリフ フォントはモニター上で読みやすく、セリフ フォントは紙上で読みやすくなります。
@media rules
@media rules を使用すると、同じスタイル シート内の異なるメディアに異なるスタイル ルールを使用できます。
以下の例のスタイルは、モニター上に Verdana フォントを 14 ピクセルで表示するようにブラウザに指示します。ただし、ページを印刷する必要がある場合は、10 ピクセルの Times フォントが使用されます。注: ディスプレイや紙媒体に関係なく、フォントの太さは太字に設定されます:

コードをコピーします コードは次のとおりです。

@media screen
{
p.test {font-family:verdana,サンセリフ; font-size:14px}
}
@media print
{
p.test {font-family:times,serif;
}
@media screen,print
{
p.test {font-weight:bold}
}

;... .



さまざまなメディア タイプ

注:
メディア タイプ名では大文字と小文字が区別されません。