There is no problem printing in IE9, but IE6, 7, 8 will appear in the first few pages of white space (only display column header information), found for a long time, only to find that the Ui-jqgrid-bdiv style class (within the UI.JQGRID.CSS) of the overflow caused by, before printing it deleted, After printing, you can restore it.
The CSS styles when printed are as follows:
Copy Code code 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;}
</style>
Print Code:
Copy Code code as follows:
$ ("#btnPrint"). Live ("Click", Function () {
Window.focus ();
Window.print ();
return false;
});
var gridheight;
function Window.onbeforeprint () {
Pre-Print event var jqgridobj=jquery ("#jqgridlist");
Gridheight = Jqgridobj.jqgrid (' getgridparam ', ' height ');//Get Height Jqgridobj.jqgrid (' setgridheight ', ' 100% '); The height is set to 100%, mainly in order to be able to scroll the contents of the scroll bar when the Jqgrid is printed out $ ("#gview_jqgridlist. Ui-jqgrid-bdiv"). Removeclass (). AddClass ("ui-jqgrid-bdiv_self");//Go get rid of overflow properties}
function Window.onafterprint () {//post-Print events//release hidden elements
$ ("#gview_jqgridlist. Ui-jqgrid-bdiv_self"). Removeclass (). addclass ("Ui-jqgrid-bdiv");//restore Overflow property, Otherwise, the scroll strip in Jqgrid disappears JQuery ("#jqgridlist"). Jqgrid (' Setgridheight ', gridheight);/set to the height before printing}
CSS Media Properties Introduction:
Media type (media Types) allows you to define the media in which to submit documents. Documents can be displayed in a display, a paper medium, or an auditory browser, and so on.
Type of media
Some CSS properties are only designed to target certain media. For example, the "voice-family" attribute is designed to target auditory user terminals. Other properties can be used in different media. For example, the "Font-size" attribute can be used for display and print media, but may have different values. The displayed document on the monitor usually requires a larger font size than the paper media document, while the Sans-serif font is easier to read on the display, while the serif font is easier to read on the paper medium.
@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 following example tells the browser to display a 14-pixel Verdana font on the monitor. But if the page needs to be printed, the 10-pixel times font will be used. Note: The font-weight is set to bold, whether the monitor or the paper media:
Copy Code code as follows:
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media Print
{
p.test {font-family:times,serif; font-size:10px}
}
@media Screen,print
{
p.test {Font-weight:bold}
}
</style>
<body>....</body>
Different types of media
Note: The media type name is not case sensitive.
| Media type |
description |
| all | The
is used for all media devices. The |
| aural |
is used for speech and audio synthesizers. The |
| Braille |
is used in braille tactile feedback devices for the blind. The Braille printer used by the |
| embossed |
for paging. The |
| handheld |
is used for small handheld devices. |
| print |
is used for printers. The |
| projection |
is used for scenario presentations, such as slides. The |
| screen |
is used for computer monitors. The |
| TTY |
is used for media that use fixed density letter grids, such as typewriters and terminals. |
| TV |
A device that is used for a TV type. |
