如何打印jqgrid与导航栏上的onclick打印功能

How to print jqgrid with onclick print function on navbar?

本文关键字：打印 功能 onclick 导航 jqgrid 何打印      更新时间：2023-09-26

我使用这个http://www.trirand.com/blog/?page_id=393/help/improved-print-grid-function/#p28903解决方案，包括在我的导航栏打印功能。所有我得到的是一个警告从jquery. printelelement .js请我在哪里我错了?: 

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

您使用的是jQuery 1.9.0，但jquery.printelement.js似乎使用了从1.9版本开始从jQuery中删除的$.browser(见这里)。你可以只使用jQuery 1.8.3或使用jQuery Migrate插件(见这里和这里)与jQuery 1.9.x。

相关文章：