Chức năng SlickGrid cho xuất CSV?

Question

Trong một ứng dụng Django, tôi đang sử dụng SlickGrid để ràng buộc một số dữ liệu XHR vào một bảng tính client-side:

var grid; 
var review_url = '/api/reviews/?t=' + current_tcode; 
$.getJSON(review_url, function(data) { 
    grid = new Slick.Grid("#myGrid", data, columns, options); 
}); 

Tôi cũng muốn cung cấp cho người dùng tùy chọn để tải về các dữ liệu dưới dạng tệp CSV . Cách tiếp cận tốt nhất để làm điều này là gì?

1. Chỉ cần liên kết đến tệp CSV mà tôi tự hiển thị (với Piston, mà tôi đã sử dụng cho API).
2. Làm điều gì đó thông minh bằng cách sử dụng SlickGrid để xuất dữ liệu CSV ở phía máy khách.
3. Điều gì đó khác.

SlickGrid cảm thấy đầy đủ tính năng đủ để có thể có thứ gì đó được xây dựng để xuất CSV, nhưng tôi không thể tìm thấy bất kỳ thứ gì trong tìm kiếm nhanh.

Answer 1

SlickGrid hoàn toàn là một thành phần để hiển thị. Cho nó ăn dữ liệu và nó sẽ hiển thị nó dưới dạng lưới cho người dùng. Heck, nó thậm chí không đủ thông minh để sắp xếp dữ liệu.

Vì vậy, nó không có chức năng chuyển đổi dữ liệu theo bất kỳ cách nào. Vì vậy, nếu bạn muốn nhận dữ liệu lưới ở định dạng CSV, bạn có hai tùy chọn:

Tùy chọn 1. Hiển thị phía máy khách CSV bằng cách tạo trực tiếp phía dưới mẫu data. Vì bạn đã trả lại dữ liệu ở định dạng json, bạn sẽ có thể thực hiện việc này khá dễ dàng với something like this.

-hoặc-

Lựa chọn 2. Render CSV server-side và làm cho nó truy cập qua url, có thể bằng cách thêm một tham số định dạng để review_url của bạn.

Tôi không biết chức năng nào trong lưới sẽ giúp bạn ở đây, nhưng có thể ai đó sẽ sửa tôi.

Answer 2

Theo ý kiến ​​của tôi nếu bạn chỉ muốn CSV - hiển thị trên máy chủ.
Bạn cũng có thể tìm thấy this railscasts episode thú vị - chỉ tìm các công cụ phù hợp với Django để thực hiện việc này.

Answer 3

Bạn có thể muốn xem xét điều này: CellExternalCopyManager is a SlickGrid plugin to copy/paste data from/to MS Excel (or compatible)

Answer 4

Đối với xuất khẩu sang CSV bạn có thể sử dụng chức năng này:

$("#exporticon").click(function() { 
    var processRow = function (row) { 
     var finalVal = ''; 
     for (var j = 0; j < row.length; j++) { 
      var innerValue = row[j] === null ? '' : row[j].toString(); 
      if (row[j] instanceof Date) { 
       innerValue = row[j].toLocaleString(); 
      }; 
      var result = innerValue.replace(/"/g, '""'); 
      if (result.search(/("|,|;|\n)/g) >= 0) 
       result = '"' + result + '"'; 
      if (j > 0) 
       finalVal += ','; 
       finalVal += result; 
     } 
     return finalVal + '\n'; 
    }; 

    var csvFile = ''; 
    var rows = []; 
    var colname = []; 
    for (var j = 0, len = grid.getColumns().length; j < len; j++) { 
     colname.push(grid.getColumns()[j].name); 
    } 
    rows.push(colname); 
    var singlerow = []; 
    for (var i = 0, l = dataView.getLength(); i < l; i++) { 
     for (var j = 0, len = grid.getColumns().length; j < len; j++) { 
      singlerow.push(grid.getDataItem(i)[grid.getColumns()[j].field]); 
     } 
     rows.push(singlerow); 
     singlerow = []; 
    } 

    for (var i = 0; i < rows.length; i++) { 
     csvFile += processRow(rows[i]); 
    } 

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' }); 
    if (navigator.msSaveBlob) { // IE 10+ 
     navigator.msSaveBlob(blob, "filename.csv"); 
    } else { 
     var link = document.createElement("a"); 
     if (link.download !== undefined) { // feature detection 
      // Browsers that support HTML5 download attribute 
      var url = URL.createObjectURL(blob); 
      link.setAttribute("href", url); 
      link.setAttribute("download", "filename.csv"); 
      link.style.visibility = 'hidden'; 
      document.body.appendChild(link); 
      link.click(); 
      document.body.removeChild(link); 
     } 
    } 
});