1

大家好!!我有一个显示记录的 jqgrid。现在根据我的要求,我必须将其导出为 excel 格式。我正在尝试这样做,但它没有发生任何事情。导出到 excel 按钮不起作用。我在这里发布我的代码...

<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>

4

1 回答 1

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

关于服务器端代码的实现见这里。我不确定它是否会对您有所帮助,但我在代码之前发布的另一个答案中显示了如何使用Open XML SDK 2.0在服务器代码中生成真正的 Excel 文件(.XLSX 文件)。

于 2012-10-19T11:16:41.703 回答