このhttp://www.trirand.com/blog/?page_id=393/help/improved-print-grid-function/#p28903ソリューションを使用して、ナビゲーション バーに印刷機能を含めています。私が得るのは、 jquery.printElement.js Please where I'm going wrong?からの警告だけです。
TypeError: $.browser is undefined
[Break On This Error]
if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase())))
ここに私のグリッドコードがあります:
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'request.php',
editurl: "jqGridCrud.php",
datatype: 'xml',
mtype: 'GET',
multiselect:true,
multiboxonly:true,
height: 530,
width: 850,
colNames:['id','Project', 'Assigned To','Assign Date','Check Date','Due Date','Attachments'],
colModel :[
{name:'id', index:'id', width:25},
{name:'name', index:'name', width:250, align:'left',editable:true, editoptions:{
size:60} },
{name:'id_continent', index:'id_continent', width:55, align:'right',editable:true,edittype:'select',
editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST' },
{name:'lastvisit', index:'lastvisit', width:70, align:'right',formatter: 'date',srcformat:'mm-dd-yyyy',newformat: 'mm-dd-yyyy',editable:true, edittype: 'text',mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'mm-dd-yyyy'});}}} ,
{name:'cdate', index:'cdate', width:70, align:'right',formatter: 'date',srcformat:'mm-dd-yyyy',newformat: 'mm-dd-yyyy', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'mm-dd-yyyy'});}}} ,
{name:'ddate', index:'ddate', width:70, align:'right',formatter: 'date',srcformat:'mm-dd-yyyy',newformat: 'mm-dd-yyyy',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'mm-dd-yyyy'});}}} ,
{name:'email', index:'email', width:70,align:'center',sortable:false,mtype:'POST', formatter: 'link' }
],
pager: '#pager',
rowNum:20,
rowList:[20,40,80],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Pending Assignments',
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid,
{width:450,Height:400,recreateForm:true,closeAfterEdit:true,
closeOnEscape:true,reloadAfterSubmit:false, modal:true,mtype:'post'});}
});
$("#list").jqGrid("navGrid", "#pager", { add: false, search: false });
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('list','pager','Print');
});
</script>
</head>
<body>
<script src="js/jquery.printelement.js" type="text/javascript"></script>
<script src="js/printgrid.js" type="text/javascript"></script>
<div id="wrapper">
<div id="header"><img src="amada-logo-black.png" width='400px'alt="logo"><br><ul><li><a href='/media-management/newproject.html' class='minibutton'>Add Project</a></li> <li></li></ul></div>
<div ="content-div">
<div id="content-left">
<table id="list"><tr><td/></tr></table><div id="pager"></div></div>
</div>
</div>
</div>
</body>
printgrid.js は、呼び出される関数です。
// setup grid print capability. Add print button to navigation bar and bind to click.
function setPrintGrid(gid,pid,pgTitle){
// print button title.
var btnTitle = 'Print Grid';
// setup print button in the grid top navigation bar.
$('#'+gid).jqGrid('navSeparatorAdd','#'+gid+'_toppager_left', {sepclass :'ui-separator'});
$('#'+gid).jqGrid('navButtonAdd','#'+gid+'_toppager_left', {caption: '', title: btnTitle, position: 'last', buttonicon: 'ui-icon-print', onClickButton: function() { PrintGrid(); } });
// setup print button in the grid bottom navigation bar.
$('#'+gid).jqGrid('navSeparatorAdd','#'+pid, {sepclass : "ui-separator"});
$('#'+gid).jqGrid('navButtonAdd','#'+pid, {caption: '', title: btnTitle, position: 'last', buttonicon: 'ui-icon-print', onClickButton: function() { PrintGrid(); } });
function PrintGrid(){
// attach print container style and div to DOM.
$('head').append('<style type="text/css">.prt-hide {display:none;}</style>');
$('body').append('<div id="prt-container" class="prt-hide"></div>');
// copy and append grid view to print div container.
$('#gview_'+gid).clone().appendTo('#prt-container').css({'page-break-after':'auto'});
// remove navigation divs.
$('#prt-container div').remove('.ui-jqgrid-toppager,.ui-jqgrid-titlebar,.ui-jqgrid-pager');
// print the contents of the print container.
$('#prt-container').printElement({pageTitle:pgTitle, overrideElementCSS:[{href:'css/print-container.css',media:'print'}]});
// remove print container style and div from DOM after printing is done.
$('head style').remove();
$('body #prt-container').remove();
}
}