JqGrid web printing implementation code

JqGrid web printing implementation code_jquery

WBOY

Release： 2016-05-16 18:06:14

Original

1823 people have browsed it

There is no problem printing in IE9, but the first few pages will be blank in IE6, 7, and 8 (only column header information is displayed). After searching for a long time, I found out that it is the ui-jqgrid-bdiv style class (in ui.jqgrid.css It is caused by the overflow in ), delete it before printing, and restore it after printing.
The CSS style when printing is as follows:

Copy code The code is as follows:

 
< style type="text/css" media="print"> 
#accordion h3, #vcol, div.loading, div.ui-tabs-hide,ul.ui-tabs-nav li, td.HeaderRight { display:none } 
.ui-jqgrid-titlebar, .ui-jqgrid-title{ display:none } 
.ui-jqgrid-bdiv_self{position: relative; margin: 0em; padding:0; text-align :left;} 
#pager{display:none; z-index:-1;} 
 

Print code:

Copy code The code is as follows:

 
$("#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');//Get the height jqgridObj.jqGrid('setGridHeight', '100%');/ /Set its height to 100%, mainly so that when there is a scroll bar in jqgrid, all the contents of the scroll bar can be printed out $("#gview_jqgridlist .ui-jqgrid-bdiv").removeClass().addClass("ui -jqgrid-bdiv_self");//Remove overflow attribute} 
function window.onafterprint() {//Post-print event//Release hidden elements
$("#gview_jqgridlist .ui-jqgrid-bdiv_self ").removeClass().addClass("ui-jqgrid-bdiv");//Restore the overflow attribute, otherwise the scroll bar in jqgrid will disappear jQuery("#jqgridlist").jqGrid('setGridHeight', GridHeight);/ /Set to the height before printing} 

Introduction to CSS media properties:
Media Types allow you to define the medium in which the document is submitted. Documents can be displayed on a monitor, paper media, or an auditory browser, etc.
Media Types
Some CSS properties are only designed to target certain media. For example, the "voice-family" attribute is designed for hearing user terminals. Other properties can be used in different media. For example, the "font-size" attribute can be used for monitors as well as print media, but may have different values. Documents displayed on a monitor usually require larger font sizes than documents on paper. At the same time, sans-serif fonts are easier to read on a monitor, while serif fonts are easier to read on paper.
@media rules
@media rules give you the ability to use different style rules for different media in the same style sheet.
The style in the example below tells the browser to display the Verdana font at 14 pixels on the monitor. But if the page needs to be printed, a 10-pixel Times font will be used. Note: font-weight is set to bold, regardless of display or paper media:

Copy the code The code is as follows:

... .

Different media types
Note: Media type names are not case-sensitive.

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。