working jqGrid Export to CSV Example

export selected jqgrid rows to a downloadable csv text file

by Juan Muñoz

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>
<div id="pager0"></div>

JavaScript

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    width: '100%',
		pager: '#pager0', //set your pager div id
		search:true,
	    multiselect: true,
	    multiboxonly: true,    
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',

        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',

        sorttype: "float"},
    {
        name: 'status',
        index: 'status',

        sorttype: "float"}
    ],
    caption: "Stack Overflow Example + Export to CSV",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});
$("#grid").jqGrid('navGrid','#pager0',
                  {add:false,edit:false,del:false,search:true,refresh:true},
                  {},
                  {},
                  {},
                  {multipleSearch:true, multipleGroup:true,  showQuery: true}
                 );

$("#grid").jqGrid('navGrid', '#pager0', 
                  { edit: false, add: false, del: false, search: false, pdf: true, }, 
                  {}, 
                  {}, 
                  {}, 
                  {});
$("#grid").jqGrid('navButtonAdd','#pager0',{
    id:'ExportToExcel',
    caption:'Export Selected Rows To CSV',
    title:'Export Selected Rows To CSV',
    onClickButton : function(e)
    {
        exportData(e, '#grid');
    },
    buttonicon: 'ui-icon ui-icon-document',
});	

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
   ...