【问题标题】:export to excel in jquery or jqGrid在 jquery 或 jqGrid 中导出到 excel
【发布时间】:2011-07-19 05:15:18
【问题描述】:

我有一个jqGrid,我可以立即从服务器(java)以 JSON 格式获取数据。我希望将 jqGrid 中的数据导出为 Excel 格式。

到目前为止,我看到了这个page,它在IE 'o.url is null or not an object' grid.import.js 中给我一个错误

我还看到this demo,在导出按钮的工具提示上显示Export To Excel,但保存的文件是xml格式。

所以我想要任何可以使用 javascript 或 jquery 插件或使用 jqgrid 的内置功能将我的 JSON 字符串转换为 excel 的建议。

我的 jqGrid

我的 jqGrid 代码

grid = jQuery("#list2");
                grid.jqGrid({
                    datastr : comparePatchData,
                    datatype: 'jsonstring',
                    colNames:['Name',starheader, header1, header2],
                    colModel:[
                        {name:'elementName',index:'elementName', width:90},
                        {name:'isPrasentinXml1',index:'isPrasentinXml1', width:100, align:'center', formatter: patchPresent},
                        {name:'isPrasentinXml2',index:'isPrasentinXml2', width:100, align:'center', formatter: patchPresent},
                        {name:'isPrasentinXml3',index:'isPrasentinXml3', width:100, align:'center', formatter: patchPresent}
                    ],
                    pager : '#gridpager2',
                    rowNum:12,
                    scrollOffset:0,
                    height: 320,
                    autowidth:true,
                    viewrecords: true,
                    gridview: true,
                    loadonce:true,
                    jsonReader: {
                        repeatitems: false,
                        page: function() { return 1; },
                        root: "response"
                    },
                    subGrid: true,
                    // define the icons in subgrid
                    subGridOptions: {
                        "plusicon"  : "ui-icon-triangle-1-e",
                        "minusicon" : "ui-icon-triangle-1-s",
                        "openicon"  : "ui-icon-arrowreturn-1-e",
                        //expand all rows on load
                        "expandOnLoad" : false
                    },

                    subGridRowExpanded: function(subgrid_id, row_id) {
                        //console.info(subgrid_id+", "+row_id);
                        var subgrid_table_id, pager_id, iData = -1;
                        subgrid_table_id = subgrid_id+"_t";
                        //pager_id = "p_"+subgrid_table_id;
                        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' style='overflow-y:auto' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");

                        $.each(comparePatchData.response,function(i,item){
                            if(item.id === row_id) {
                                iData = i;
                                return false;
                            }

                        });
                        if (iData == -1) {
                            return; // no data for the subgrid
                        }

                        jQuery("#"+subgrid_table_id).jqGrid({
                            datastr : comparePatchData.response[iData],
                            datatype: 'jsonstring',
                            colNames: ['Name','Value1','Value2','Value3'],
                            colModel: [
                                {name:"name",index:"name",width:90},
                                {name:"firstValue",index:"firstValue",width:100},
                                {name:"secondValue",index:"secondValue",width:100},
                                {name:"thirdValue",index:"thirdValue",width:100}
                            ],
                            rowNum:10,
                            //pager: pager_id,
                            sortname: 'name',
                            sortorder: "asc",
                            height: 'auto',
                            autowidth:true,
                            jsonReader: {
                                repeatitems: false,
                                //page: function() { return 1; },
                                root: "attribute"
                            }
                        });

                        jQuery("#"+subgrid_table_id).jqGrid('navGrid',{edit:false,add:false,del:false});
                    }
                });
                grid.jqGrid('navGrid','#gridpager2',{add:false,edit:false,del:false});
                grid.jqGrid('navButtonAdd','#gridpager2',{
                    caption:"Export to Excel", 
                    onClickButton : function () { 
                        jQuery("#list2").excelExport();
                    } 
                });

我的 Json 的一部分

{
"response": [
    {
        "id": "1",
        "elementName": "libgtop2-devel-2.14.4-3.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "libgtop2-devel-2.14.4-3.el5"
            }
        ]
    },
    {
        "id": "2",
        "elementName": "ifd-egate-0.05-15",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "ifd-egate-0.05-15"
            }
        ]
    },
    {
        "id": "3",
        "elementName": "libXScrnSaver-devel-1.1.0-3.1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "libXScrnSaver-devel-1.1.0-3.1"
            }
        ]
    },
    {
        "id": "4",
        "elementName": "kde-i18n-Chinese-Big5-3.5.4-1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "kde-i18n-Chinese-Big5-3.5.4-1",
                "secondValue": "kde-i18n-Chinese-Big5-3.5.4-1"
            }
        ]
    },
    {
        "id": "5",
        "elementName": "cpio-2.6-20",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "cpio-2.6-20",
                "secondValue": "cpio-2.6-20",
                "thirdValue": "cpio-2.6-20"
            }
        ]
    },
    {
        "id": "6",
        "elementName": "grep-2.5.1-54.2.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "grep-2.5.1-54.2.el5",
                "secondValue": "grep-2.5.1-54.2.el5",
                "thirdValue": "grep-2.5.1-54.2.el5"
            }
        ]
    },
    {
        "id": "7",
        "elementName": "avahi-compat-libdns_sd-0.6.16-1.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "avahi-compat-libdns_sd-0.6.16-1.el5",
                "secondValue": "avahi-compat-libdns_sd-0.6.16-1.el5",
                "thirdValue": "avahi-compat-libdns_sd-0.6.16-1.el5"
            }
        ]
    },
    {
        "id": "8",
        "elementName": "gpm-devel-1.20.1-74.1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "gpm-devel-1.20.1-74.1",
                "secondValue": "gpm-devel-1.20.1-74.1",
                "thirdValue": "gpm-devel-1.20.1-74.1"
            }
        ]
    },
    {
        "id": "9",
        "elementName": "esc-1.0.0-39.el5",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": false,
        "isPrasentinXml2": false,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "thirdValue": "esc-1.0.0-39.el5"
            }
        ]
    },
    {
        "id": "10",
        "elementName": "kde-i18n-Spanish-3.5.4-1",
        "subCategory": "patch",
        "isEqual": false,
        "isPrasentinXml1": true,
        "isPrasentinXml2": true,
        "isPrasentinXml3": true,
        "attribute": [
            {
                "name": "name",
                "firstValue": "kde-i18n-Spanish-3.5.4-1",
                "secondValue": "kde-i18n-Spanish-3.5.4-1"
            }
        ]
    }
]
}

【问题讨论】:

标签: javascript jquery excel jquery-plugins jqgrid


【解决方案1】:

您不必使用 Excel 格式导出文件即可将数据导入 Excel。导出到CSV 通常要容易得多。 CSV 文件默认应该与 Excel 关联,所以它应该有 Excel 图标和一切。我认为XML 会以同样的方式工作,但CSV 格式要轻得多,并且在这种情况下做同样的工作。将JSON 转换为CSV 很简单:

var response = JSON.parse(responseJSON).response;
var csv = arrayToCSV(response);

function arrayToCSV(arr) {
    var columnNames = [];
    var rows = [];
    for (var i=0, len=arr.length; i<len; i++) {
        // Each obj represents a row in the table
        var obj = arr[i];
        // row will collect data from obj
        var row = [];
        for (var key in obj) {
            // Don't iterate through prototype stuff
            if (!obj.hasOwnProperty(key)) continue;
            // Collect the column names only once
            if (i === 0) columnNames.push(prepareValueForCSV(key));
            // Collect the data
            row.push(prepareValueForCSV(obj[key]));
        }
        // Push each row to the main collection as csv string
        rows.push(row.join(','));
    }
    // Put the columnNames at the beginning of all the rows
    rows.unshift(columnNames.join(','));
    // Return the csv string
    return rows.join('\n');
}

// This function allows us to have commas, line breaks, and double 
// quotes in our value without breaking CSV format.
function prepareValueForCSV(val) {
    val = '' + val;
    // Escape quotes to avoid ending the value prematurely.
    val = val.replace(/"/g, '""');
    return '"' + val + '"';
}

【讨论】:

  • 我拥有csv之后会发生什么?如何将其放入文件中?
  • 客户端无法做到这一点。您需要制作一个服务器端脚本来执行此操作。你在服务器上用什么?
  • 啊。可悲的是,我对 java 的了解还不够,无法快速回答如何将 csv 制作成文件。这个 javascript 函数应该以字符串形式为您提供 csv 文件的内容,然后您可以将其发送到您的服务器端代码以在服务器上从中创建一个文件。
  • 迟到的评论,但我不完全同意你的评论同样有价值。使用 CSV,由于小数和日期格式,您必须注意区域设置。使用 Excel 可以以类型安全的方式工作。
  • @GertArnold 是的。删除了上面的“同等价值”声明。
【解决方案2】:

我有一个 jqGrid,我可以在其中一次从服务器 (java) 以 JSON 格式获取数据 格式。我希望将 jqGrid 中的数据导出到 Excel 格式。

这是一篇不错的文章,向您展示如何从 jqGrid 导出到 Excel...

http://www.codeproject.com/Articles/784342/Export-data-from-jqGrid-into-a-real-Excel-file

【讨论】:

    【解决方案3】:

    我是这样解决的:

    1. 阅读

    https://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/#Installation

    1. 这里是 github

    https://github.com/kayalshri/tableExport.jquery.plugin

    1. 这是一个演示

    http://demos.w3lessons.info/jquery-table-export#

    效果很好,我尝试了 Export Excel。 在我的例子中,我只是使用了 jqgrid 表的 id 选择器。

    顺便说一句这将只导​​出可见部分,所以如果你有 100 个页面,它需要服务器端,因为信息不存在!。

    【讨论】:

      【解决方案4】:

      我正在使用 MOSS 2007 将一些列表(比如 5 个列表)导出到 excel。我的要求是我需要将多个列表导出到 excel。我在页面中添加了一个带有按钮的 CEWP,以便通过单击,我可以将多个列表数据导出到 excel.nw 使用 jquery 时出现运行时错误 if( $('#WebPartWPQ3').is(':visible') )--->对象预期错误。 我没有找到任何 div id 来追踪..所以有人知道答案吗,请出来.. 与此问题相关的ans真的非常感谢..我的代码如下。 <br>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-03-18
        • 2012-10-09
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多