export to excel in jquery or jqGrid
Question
I have a jqGrid where I get data at once from server (java) in JSON format. I want the data in the jqGrid to be exported into Excel format.
Till now I saw this page which gives me an error in IE 'o.url is null or not an object' grid.import.js
Also I saw this demo where on the tool tip of export button it says Export To Excel but the file saved is in xml format.
So I would like any suggestions that can either transform my JSON string into excel using javascript or jquery plugin or using jqgrid's inbuilt feature.
My jqGrid
My jqGrid Code
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();
}
});
Part of my 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"
}
]
}
]
}
4 answers
solution1
6 ACCPTED 2011-07-19 07:37:07
You don't have to export a file using the Excel format in order to get the data into Excel. It is generally much easier to export to CSV . CSV files should be associated with Excel by default, so it should have the Excel icon by it and everything. XML would work the same way, I think, but the CSV format is much lighter, and does the same job in this case. Converting JSON to CSV is simple:
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 + '"';
}
solution2
0 2014-06-10 13:11:43
I have a jqGrid where I get data at once from server (java) in JSON format. I want the data in the jqGrid to be exported into Excel format.
Here's a nice article, showing you how to export from jqGrid to Excel...
http://www.codeproject.com/Articles/784342/Export-data-from-jqGrid-into-a-real-Excel-file
solution3
0 2018-05-02 12:59:48
I solved this like this:
- Read
- Here is github
https://github.com/kayalshri/tableExport.jquery.plugin
- Here is a demo
http://demos.w3lessons.info/jquery-table-export#
It works perfectly i tried the Export Excel . In my case i just used the id selector for the jqgrid table.
BTW This will export only visible part so if you 100 pages it need server side because info is just not there..
solution4
-2 2013-02-06 06:00:38
I'm working with MOSS 2007 to export some lists(say 5 lists) to excel.My requirement is i need more than one lists to be exported to excel.I have added a CEWP in my page with a button so that by one click i can export more than one list datas to excel.nw i get a run time error when i use jquery if( $('#WebPartWPQ3').is(':visible') )--->object expected error. I dont find any div id to trace..so is anybody know the answer,pls be come out of it.. ans related to this issue is really really really appreciated..my code is as follows.
<button type="button"
onclick=exportToExcel();>Click<br>
</button><br>
<script type="text/javascript"><br>
function exportToExcel() <br>
{ <br>
alert('Hi');<br>
//alert($("#WebPartWPQ3").attr("visibility"));<br>
if( $('#WebPartWPQ3').is(':visible') )<br>
{ <br>
contentType = "application/vnd.ms-excel";<br>
var oExcel = new ActiveXObject("Excel.Application");<br>
var oBook = oExcel.Workbooks.Add;<br>
var oSheet = oBook.Worksheets(1);<br>
var VESSApplications =document.getElementById<br>('ctl00_m_g_e3f5d791_5651_40ca_a03a_1c511c7f2b28_ctl00_ctl00_toolBarTbl');<br>
alert(document.getElementById('WebPartWPQ3'));<br>
var OtherApplications =document.getElementById('tblOtherApplications');<br>
// var MFGApplications =document.getElementById('tblMFGApplications');<br>
var row=3;<br>
var col=1;<br>
//Define criteria - start<br>
oSheet.Cells(row, col)="Business Function";<br>
oSheet.Cells(row, col+1)="VESS";<br>
oSheet.Cells(row, col+2)=selectedVESSBusinessFunction;<br>
// oSheet.Cells(row, col+3)="Manufacturing";<br>
// if(selectedMFGBusinessFunction != "-Select-")<br>
// oSheet.Cells(row, col+4)=selectedMFGBusinessFunction;<br>
row +=2;<br>
oSheet.Cells(row, col)="Operating System";<br>
oSheet.Cells(row, col+1)="First Choice";<br>
if(selectedOperatingSystemFirstChoice != "-Select-")<br>
oSheet.Cells(row, col+2)=selectedOperatingSystemFirstChoice;<br>
oSheet.Cells(row, col+3)="Second Choice";<br>
if(selectedOperatingSystemSecondChoice != "-Select-")<br>
oSheet.Cells(row, col+4)=selectedOperatingSystemSecondChoice;<br>
row +=2;<br>
oSheet.Cells(row, col)="Platform";<br>
oSheet.Cells(row, col+1)="First Choice";<br>
oSheet.Cells(row, col+2)=selectedPlatformFirstChoice;<br>
oSheet.Cells(row, col+3)="Second Choice";<br>
if(selectedPlatformSecondChoice != "-Select-")<br>
oSheet.Cells(row, col+4)=selectedPlatformSecondChoice;<br>
row +=2;<br>
oSheet.Cells(row, col)="Delivery Method";<br>
oSheet.Cells(row, col+1)="First Choice";<br>
oSheet.Cells(row, col+2)=selectedDeliveryFirstChoice;<br>
oSheet.Cells(row, col+3)="Second Choice";<br>
if(selectedDeliverySecondChoice != "-Select-")<br>
oSheet.Cells(row, col+4)=selectedDeliverySecondChoice;<br>
row +=2;<br>
//alert(VESSApplications.rows.length);<br>
if(VESSApplications.rows.length>0)<br>
{<br>
for (var y = 0; y < VESSApplications.rows.length; y++) <br>
{<br>
for (var x = 0; x < VESSApplications .rows(y).cells.length; x++) <br>
{<br>
// oSheet.Cells(y + 1, x + 1) = VESSApplications .rows(y).cells(x).innerText;<br>
oSheet.Cells(row, x + 1) = VESSApplications .rows(y).cells(x).innerText;<br>
}<br>
row++;<br>
}<br>
// oExcel.Visible = true;<br>
// oExcel.UserControl = true;<br>
}<br>
else<br>
{<br>
alert("There is no VESS/Other Applications to Export!");<br>
}<br>
row +=2;<br>
//Other Applications<br>
/* for (var y = 0; y < OtherApplications.rows.length; y++) <br>
{<br>
for (var x = 0; x < OtherApplications.rows(y).cells.length; x++) <br>
{<br>
oSheet.Cells(row, x + 1) = OtherApplications.rows(y).cells(x).innerText;<br>
}<br>
row++;<br>
}<br>
row +=2;<br>
//MFG Applications<br>
for (var y = 0; y < MFGApplications.rows.length; y++) <br>
{<br>
for (var x = 0; x < MFGApplications.rows(y).cells.length; x++) <br>
{<br>
// oSheet.Cells(y + 1, x + 1) = VESSApplications .rows(y).cells(x).innerText;<br>
oSheet.Cells(row, x + 1) = MFGApplications.rows(y).cells(x).innerText;<br>
}<br>
row++;<br>
}<br>
*/
oSheet.columns.autofit;<br>
oExcel.Visible = true;<br>
oExcel.UserControl = true;<br>
}<br>
else<br>
{<br>
alert('No VESS/Other applications available to export');<br>
}<br>
}<br>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
export jqgrid data into excel on checkbox selection
Export JQGrid data to Excel using javascript
Jquery FullCalendar export to excel
How To Export Excel In Jquery?
jQuery DataTable Excel Export
Export list to excel using jquery
jquery export asp table to excel
JQuery export to excel is not working correctly
export Html table to excel using javascript/jquery
how to use jQuery to export table with pagination to excel
Related Tags