2012-10-19 30 views
1

Hello! 我有一个jqgrid显示记录。现在根据我的要求,我必须将其导出为ex​​cel格式。我试图做到这一点,但它没有发生任何how.Export excel按钮不工作。在这里我张贴我的代码...将jqgrid导出为ex​​cel不能在jsp中工作

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>JQgrid</title> 
<img src="images/header.png" alt="Logo" height="130" width="1270"/> 
<hr noshade size="3" align="left"> 
<script language="javaScript" 
type="text/javascript" src="calender.js"></script> 
<link href="calender.css" rel="stylesheet" type="text/css"> 
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> 
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<link href="plugins/ui.multiselect.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script> 
<script src="plugins/ui.multiselect.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="js/custom.js" type="text/javascript"></script> 




<script type="text/javascript"> 
    $(document).ready(function() { 
     //var windowWidth = (document.documentElement.clientWidth - 100) /0.9; 
     var i=1; 
     $('#go').click(function(evt){ 
      //alert('hi'); 
      evt.preventDefault(); 
      var todate=$('#todate').val(); 
      var fromdate=$('#todate').val(); 
      if(todate && fromdate) 
      { 

       var URL='getGriddahico.jsp?todate='+$('#todate').val()+'&fromdate='+$('#fromdate').val(); 

       //jQuery("#gridUsuarios").jqGrid('reload'); 
       if(i==1){gridcall(URL);} 
       else{jQuery("#gridUsuarios").jqGrid('GridUnload');gridcall(URL);} 
       i++; 

      } 

     }); 


    }); 

    function gridcall(path) 
    { 
     jQuery("#gridUsuarios").jqGrid({ 
      url:path, 
      datatype: "json", 
      colNames:['ID','Call Date','src','dst','dstchannel','Lastapp','Duration','Disposition','Amaflags','cdrcost'], 
      colModel:[ 
       {name:'id',index:'id', width:90,align: 'center',editable:true, hidden:true,closed:true}, 
       {name:'calldate',index:'calldate',editable:false, width:170,align: 'center'}, 
       {name:'src',index:'src',editable:false, width:170,align: 'center'}, 
       {name:'dst',index:'dst',editable:false, width:170,align: 'center'},  
       {name:'dstchannel',index:'dstchannel',editable:false, width:170,align: 'center'}, 
       {name:'Lastapp',index:'lastapp',editable:false, width:170,align: 'center'}, 
       {name:'duration',index:'duration',editable:false, width:170,align: 'center'}, 

       {name:'disposition',index:'disposition',editable:false, width:170,align: 'center'}, 

       {name:'amaflags',index:'amaflags',editable:false, width:170,align: 'center'}, 
       {name:'cdrcost',index:'cdrcost',editable:false, width:170,align: 'center'}, 
      ], 
      rowNum:50, 
      rowList:[50,100,150], 
      scrollrows : true, 
      // multiselect: true, 
      pager: '#pagGrid', 
      sortname: 'id', 
      viewrecords: true, 
      sortorder: "asc", 
      autowidth:true, 
      //width: windowWidth, 
      height:360, 
      editurl:'edit.jsp' 

     }); 
     $("#gridUsuarios").jqGrid('navGrid', '#pagGrid',{excel:true}) 
     .navButtonAdd('#pagGrid',{ 
      caption:"Export to Excel", 
      buttonicon:"ui-icon-save", 
      onClickButton: function(){ 
       exportExcel(); 
      }, 
      position:"last" 
     }); 

     function exportExcel() 
     { 
      var mya=new Array(); 
      mya=$("#gridUsuarios").getDataIDs(); // Get All IDs 
      var data=$("#gridUsuarios").getRowData(mya[0]);  // Get First row to get the labels 
      var colNames=new Array(); 
      var ii=0; 
      for (var i in data){colNames[ii++]=i;} // capture col names 
      var html=""; 
      for(i=0;i<mya.length;i++) 
      { 
       data=$("#gridUsuarios").getRowData(mya[i]); // get each row 
       for(j=0;j<colNames.length;j++) 
       { 
        html=html+data[colNames[j]]+"\t"; // output each column as tab delimited 
       } 
       html=html+"\n"; // output each row with end of line 

      } 
      html=html+"\n"; // end of line at the end 
      document.forms[0].csvBuffer.value=html; 
      document.forms[0].method='POST'; 
      document.forms[0].action='csvExport.jsp'; // send it to server which will open this contents in excel file 
      document.forms[0].target='_blank'; 
      document.forms[0].submit(); 
     } 


     jQuery("#gridUsuarios").jqGrid('bindKeys', {"onEnter":function(rowid) { alert("You enter a row with id:"+rowid)} }); 
    } 

</script> 

+0

我希望你在''之前使用'<!DOCTYPE html>'语句,你只是没有发布它。如果你没有'<!DOCTYPE html ...>'我强烈建议包含它。请参阅[这里](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid#html_file)和示例。 – Oleg

回答

0

我看到你的解决方案的一些设计上的问题。我只会试着描述你的工作:

  1. 你有数据保存在服务器上。可能将数据保存在数据库中。
  2. 您可以使用每个Ajax请求从服务器返回的数据填充jqGrid。
  3. 如果用户点击“导出到Excel”按钮,您尝试从网格当前页面的单元格中读取数据,并通过HTTP POST将数据发送到服务器。您希望服务器(csvExport.jsp)将生成一些Excel文件并将数据返回给客户端。

您能解释一下为什么您需要将数据从jqGrid发送到服务器?服务器已经有了所有的数据,并且服务器已经为你准备好了数据。仅仅使用网格的参数($('#todate').val()$('#fromdate').val())向服务器发送请求并且服务器将直接从数据库获取所有数据并不容易?

顺便说一句,你在你的代码中输入错误:var fromdate=$('#todate').val();。你的意思可能是var fromdate=$('#fromdate').val()

关于服务器端代码的实现请参阅here。我不确定它是否会对您有所帮助,但在another answer之前,我发布了代码,该代码展示了如何使用Open XML SDK 2.0在服务器代码中生成真实的Excel文件(.XLSX文件)。