0

我正在使用这个http://www.trirand.com/blog/?page_id=393/help/improved-print-grid-function/#p28903解决方案在我的导航栏上包含打印功能。我得到的只是来自 jquery.printElement.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();
        }
    }
4

1 回答 1

1

您使用 jQuery 1.9.0，但jquery.printelement.js似乎使用$.browser从 1.9 版开始的 jQuery 中删除的版本（请参阅此处）。您可以只使用jQuery 1.8.3或将 jQuery Migrate 插件（参见此处和此处）与 jQuery 1.9.x 一起使用。

于 2013-05-29T05:33:09.753 回答