Question

我已经将jqGrid设置为DataTables的替代品，但我遗漏的一个重要部分是导出到Excel的能力。 DataTables使用html5处理这个问题，并使用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>

用于导出到Excel功能的JAVASCRIPT

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();
}

用于下载XLS文件的PHP

$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文件，效果很好。您可能需要更改一些内容，以便ID和类与您的表匹配，但请尝试一下。

    // 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

jqGrid - 使用PHP服务器

2 个答案: