Question

Hello Guys !! 我有一个显示记录的jqgrid。现在根据我的要求我必须将它导出为excel格式。我正在尝试这样做，但它没有发生任何how.Export to 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>

Answer 1

我在您的解决方案中看到了一些设计问题。我将试着描述你的所作所为：

您已在服务器上保存数据。您可能将数据保存在数据库中。
使用Ajax请求从服务器返回的数据填充jqGrid。
如果用户单击“导出到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文件）。

将Jqgrid导出到excel在jsp中不起作用

1 个答案: