SlickGrid用于CSV导出?

时间:2012-07-16 11:08:23

标签: javascript csv slickgrid

在Django应用程序中,我使用SlickGrid将一些XHR数据绑定到客户端电子表格:

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

我还想让用户选择将数据下载为CSV文件。这样做的最佳方法是什么?

  1. 只需链接到我自己渲染的CSV文件(使用Piston,我已经在使用API​​)。
  2. 使用SlickGrid做一些聪明的事情来在客户端输出CSV数据。
  3. 别的。
  4. SlickGrid感觉功能齐全,可能会内置输出CSV,但我无法在快速搜索中找到任何内容。

4 个答案:

答案 0 :(得分:3)

答案 1 :(得分:2)

SlickGrid纯粹是可视化的组件。将数据输入,并将其作为网格呈现给用户。哎呀,它甚至不够聪明,无法对数据进行排序。

因此,它没有以任何方式转换数据的功能。因此,如果您想以CSV格式获取网格数据,您有两种选择:

选项1.通过直接从底层data数组生成CSV客户端来渲染它。由于您已经以json格式返回数据,因此您应该可以使用something like this轻松完成此操作。

-OR -

选项2.渲染CSV服务器端并通过url访问它,可以通过向review_url添加格式参数来实现。

我不知道网格中的任何功能可以帮助你,但也许有人会纠正我。

答案 2 :(得分:2)

要导出为CSV,您可以使用此功能:

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

答案 3 :(得分:0)

在我看来,如果你只想要CSV - 在服务器上渲染它 您也可能会发现this railscasts episode有趣 - 只能找到适合Django的工具来执行此操作。