jqGrid

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。我使用此脚本将 table 数据下载到 CSV 文件中，效果很好。您可能需要更改一些内容，以便 Id 和类与您的 table 相匹配，但请尝试一下。

    // 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 服务器导出到 Excel

jqGrid - Export to Excel with PHP server

php

excel

jquery

free-jqgrid