【问题标题】:SlickGrid functions for CSV export?用于 CSV 导出的 SlickGrid 函数?
【发布时间】:2023-03-30 07:52:01
【问题描述】:

在 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. 别的东西。

SlickGrid 感觉功能齐全,它可能有内置的东西来输出 CSV,但我在快速搜索中找不到任何东西。

【问题讨论】:

    标签: javascript csv slickgrid


    【解决方案1】:

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

    【讨论】:

      【解决方案2】:

      SlickGrid 纯粹是一个可视化组件。向它提供数据,它会将其作为网格呈现给用户。哎呀,它甚至还不够聪明,无法对数据进行排序。

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

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

      -或-

      选项 2. 呈现 CSV 服务器端并使其可以通过 url 访问,可以通过向您的 review_url 添加格式参数来实现。

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

      【讨论】:

        【解决方案3】:
        【解决方案4】:

        要导出为 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);
                }
            }
        });
        

        【讨论】:

        • 这对我来说效果很好。我所做的一项更改是对上述代码的第 5 行:var innerValue = row[j] === null || typeof row[j] == 'undefined' ? '' : row[j].toString();
        猜你喜欢
        • 1970-01-01
        • 2021-02-13
        • 2021-12-31
        • 1970-01-01
        • 1970-01-01
        • 2019-12-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多