2012-07-16 25 views
5

Dentro de una aplicación Django, estoy usando SlickGrid para unir algunos datos XHR a una hoja de cálculo del lado del cliente:Funciones de SlickGrid para la exportación de CSV?

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

También me gustaría dar al usuario la opción de descargar los datos como un archivo CSV . ¿Cuál es el mejor enfoque para hacer esto?

  1. Simplemente enlace a un archivo CSV que realizo yo mismo (con Piston, que ya estoy usando para la API).
  2. Haz algo inteligente usando SlickGrid para generar datos CSV en el lado del cliente.
  3. Algo más.

SlickGrid se siente con todas las funciones lo suficiente como para que pueda tener algo incorporado para dar salida a CSV, pero no puedo encontrar nada en una búsqueda rápida.

Respuesta

2

SlickGrid es puramente un componente para la visualización. Alimentar los datos, y se convertirá en una cuadrícula para el usuario. Diablos, ni siquiera es lo suficientemente inteligente como para ordenar los datos.

Como tal, no tiene ninguna funcionalidad para transformar datos de ninguna manera. Por lo tanto, si desea obtener los datos de la cuadrícula en formato CSV, tiene dos opciones:

Opción 1. Renderizar el lado CSV del cliente generándolo directamente desde la matriz subyacente data. Como ya está devolviendo los datos en formato json, debería poder hacer esto fácilmente con something like this.

-o-

Opción 2. Render del lado del servidor CSV y que sea accesible a través de URL, es posible mediante la adición de un parámetro de formato a su review_url.

No conozco ninguna funcionalidad en la grilla que te ayude aquí, pero tal vez alguien me corrija.

0

En mi opinión, si solo quieres CSV, renderízalo en el servidor.
También puede encontrar this railscasts episode interesante - solo encuentre las herramientas adecuadas para que Django haga esto.

2

Para la exportación a CSV se puede utilizar esta función:

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

esto está funcionando bastante bien para mí. Un cambio que realicé fue en la línea # 5 del código anterior: 'var innerValue = row [j] === null || typeof fila [j] == 'undefined'? '': fila [j] .toString(); ' – phirschybar

Cuestiones relacionadas