How to print jqgrid with onclick print function on navbar?

问题

I am using this http://www.trirand.com/blog/?page_id=393/help/improved-print-grid-function/#p28903 solution to include a print function on my navbar. All I get is a warning from the jquery.printElement.js Please where I'm I going wrong?:

TypeError: $.browser is undefined
[Break On This Error]   

if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase())))

Here is my grid code:

<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 is the function being called:

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

回答1:

You use jQuery 1.9.0, but jquery.printelement.js seems to use $.browser which is removed from jQuery starting with version 1.9 (see here). You can just use jQuery 1.8.3 or use jQuery Migrate plugin (see here and here) together with jQuery 1.9.x.

来源：https://stackoverflow.com/questions/16803329/how-to-print-jqgrid-with-onclick-print-function-on-navbar

标签

javascript

jquery

jqgrid