jqGrid - Экспорт в Excel с сервером PHP

Question

У меня есть настройка jqGrid в качестве замены для DataTables, но одна важная часть, которую мне не хватает, - это возможность экспорта в Excel. DataTables обрабатывает это с помощью html5 и использует Flash в качестве резервного метода (я вообще не хочу использовать flash).

При поиске способа сделать это с помощью jqGrid я вижу несколько сообщений, которые довольно стары, но ничего нового. Я использую сервер php-сервера с данными, полученными из файлов JSON. Я вижу, что платная версия jqGrid имеет версию php. Есть ли способ, совместимый со свободной версией jqGrid, который я могу использовать для экспорта реального файла Excel (а не csv)?

Answer 1

Кнопка jqGrid

$grid.jqGrid("navButtonAdd", { 
      caption: "Export<br />To Excel", 
      buttonicon: "ui-pg-button-text ui-pg-button-icon-over-text fa-file-excel-o", 
      title: "Export to Excel", 
      onClickButton: function() { 
       exportExcel(); 
      } 
     }); 

HTML для формы ввода

 <form id='_export' method="post" action="jqGrid/export_excel.php"> 
        <input type="hidden" name="csvBuffer" id="csvBuffer" value="" /> 
     </form> 

JAVASCRIPT для экспорта в функции Excel

function exportExcel() 
{ 
     var keys=[], ii=0, rows=""; 
        var ids=$("#list").getDataIDs(); 
        var row=$("#list").getRowData(ids[0]);  
        var p = $("#list").jqGrid("getGridParam"); 
        var rows="<table><thead><tr>"; 
        for (var k in row) { 
        keys[ii++]=k; 
        rows=rows+'<th>'+p.colNames[ii+1]+'</th>';  
        } 
        rows=rows+"</tr></thead><tbody>"; 
        for(i=0;i<ids.length;i++) { 
        row=$("#list").getRowData(ids[i]); 
        rows=rows+"<tr>"; 
        for(j=0;j<keys.length;j++){ 
         rows=rows+'<td>'+row[keys[j]]+'</td>'; 
        } 
        rows=rows+"</tr></tbody>"; 
        } 
        rows=rows+"</table>"; 
    document.getElementById('csvBuffer').value=rows; 
    document.getElementById('_export').submit(); 
} 

PHP для Скачивание файла XLS

$buffer = $_POST['csvBuffer']; 

    // file name for download 
    $filename = "baplie_" . date('Ymd') . ".xls"; 

    header("Content-Disposition: attachment; filename=\"$filename\""); 
    header("Content-Type: application/vnd.ms-excel"); 

try{ 
    echo $buffer; 
}catch(Exception $e){ 

} 

Answer 2

Я использую DataTables также для внутреннего сайта, который я создал. Я использую этот скрипт для загрузки данных таблицы в файл CSV, и он отлично работает. Возможно, вам придется изменить несколько вещей, чтобы идентификаторы и классы соответствовали вашей таблице, но попробуйте.

// export data function  
$('#exportDataTable').click(function() { 
    var titles = []; 
    var data = []; 
/* * Get the table headers, this will be CSV headers 
    * The count of headers will be CSV string separator */ 
    $('.dataTable th').each(function() { 
    titles.push($(this).text()); 
    }); 
/* * Get the actual data, this will contain all the data, in 1 array */ 
    $('.dataTable td').each(function() { 
    data.push($(this).text()); 
    }); 
/* * Convert our data to CSV string */ 
    var CSVString = prepCSVRow(titles, titles.length, ''); 
    CSVString = prepCSVRow(data, titles.length, CSVString); 
/* * Make CSV downloadable*/ 
    var downloadLink = document.createElement("a"); 
    var blob = new Blob(["\ufeff", CSVString]); 
    var url = URL.createObjectURL(blob); 
    downloadLink.href = url; 
    downloadLink.download = "data.csv"; 
/** Actually download CSV */ 
    document.body.appendChild(downloadLink); 
    downloadLink.click(); 
    document.body.removeChild(downloadLink); 
}); 
/** Convert data array to CSV string 
* @param arr {Array} - the actual data 
* @param columnCount {Number} - the amount to split the data into columns 
* @param initial {String} - initial string to append to CSV string 
* return {String} - ready CSV string */ 
function prepCSVRow(arr, columnCount, initial) { 
    var row = ''; // this will hold data 
    var delimeter = ','; // data slice separator, in excel it's `;`, in usual CSv it's `,` 
    var newLine = '\r\n'; // newline separator for CSV row 
/* * Convert [1,2,3,4] into [[1,2], [3,4]] while count is 2 
    * @param _arr {Array} - the actual array to split 
    * @param _count {Number} - the amount to split 
    * return {Array} - splitted array */ 
    function splitArray(_arr, _count) { 
    var splitted = []; 
    var result = []; 
    _arr.forEach(function(item, idx) { 
     if ((idx + 1) % _count === 0) { 
     splitted.push('"' + item + '"'); 
     result.push(splitted); 
     splitted = []; 
     } else { 
     splitted.push('"' + item + '"'); 
     } 
    }); 
    return result; 
    } 
    var plainArr = splitArray(arr, columnCount); 
    // don't know how to explain this 
    // you just have to like follow the code 
    // and you understand, it's pretty simple 
    // it converts `['a', 'b', 'c']` to `a,b,c` string 
    plainArr.forEach(function(arrItem) { 
    arrItem.forEach(function(item, idx) { 
     row += item + ((idx + 1) === arrItem.length ? '' : delimeter); 
    }); 
    row += newLine; 
    }); 
    return initial + row; 
} 
// end export to CSV file