如何在导航栏上使用onclick打印function打印jqgrid?

我正在使用http://www.trirand.com/blog/?page_id=393/help/improved-print-grid-function/#p28903解决方案在我的导航栏上包含打印function。 我得到的只是来自jquery.printElement.js的警告请问我哪里出错了?:

TypeError: $.browser is undefined [Break On This Error] if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase()))) 

这是我的网格代码:

      $(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'); });       

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('.prt-hide {display:none;}'); $('body').append('
'); // 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(); } }

你使用jQuery 1.9.0,但jquery.printelement.js似乎使用$.browser ,它从jQuery开始从1.9版本中删除(见这里 )。 您可以使用jQuery 1.8.3或使用jQuery Migrate插件(请参阅此处和此处 )以及jQuery 1.9.x.