Funkcje SlickGrid dla eksportu CSV?

Question

w aplikacji Django używam SlickGrid powiązać niektóre dane do arkusza kalkulacyjnego XHR po stronie klienta:

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

Chciałbym również, aby dać możliwość pobrania danych w postaci pliku CSV użytkownikowi . Jakie jest najlepsze podejście do tego?

1. Po prostu połącz się z plikiem CSV, który renderuję (za pomocą Tłoków, które już używam dla API).
2. Zrób coś sprytnie, używając SlickGrid do wyprowadzania danych CSV po stronie klienta.
3. Coś jeszcze.

W grze SlickGrid mamy wystarczająco dużo funkcji, aby mieć wbudowaną wersję CSV, ale nie mogę znaleźć niczego na szybkim wyszukiwaniu.

Answer 1

SlickGrid jest wyłącznie komponentem do wizualizacji. Podaj dane, a następnie wyrenderuje je jako kratkę dla użytkownika. Heck, to nie jest wystarczająco inteligentne, żeby posortować dane.

W związku z tym nie ma żadnej możliwości przekształcania danych w jakikolwiek sposób. Jeśli więc chcesz uzyskać dane siatki w formacie CSV, masz dwie opcje:

Opcja 1. Renderuj stronę klienta CSV, generując ją bezpośrednio z podstawowej tablicy data. Ponieważ już zwracasz dane w formacie json, powinieneś być w stanie to zrobić całkiem łatwo z something like this.

-lub-

Wariant 2. Render CSV po stronie serwera i udostępnić go za pośrednictwem adresu URL, możliwe dodając parametr formatowania do review_url.

Nie znam żadnej funkcjonalności w sieci, która może ci w tym pomóc, ale może ktoś mnie poprawi.

Answer 2

Moim zdaniem, jeśli chcesz tylko plik CSV - wyrenderuj go na serwerze.
Może się też okazać, że interesująca jest this railscasts episode - wystarczy znaleźć w tym celu narzędzia odpowiednie dla Django.

Answer 3

Możesz spojrzeć na to: CellExternalCopyManager is a SlickGrid plugin to copy/paste data from/to MS Excel (or compatible)

Answer 4

Dla eksportu do CSV można użyć tej funkcji:

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