我们如何读取csv文件并在dojo中显示相同的文件?

时间:2014-01-21 12:02:56

标签: dojo

我想编写一个dojo代码,在按钮单击时我想要读取.csv文件并使用Dojo在数据网格中显示.csv文件。有人可以帮我这个吗?

4 个答案:

答案 0 :(得分:0)

您最好的尝试是使用dojo/request/xhr模块检索数据,您可以使用它检索外部CSV文件。例如:

require(["dojo/request/xhr"], function(xhr) {
    xhr.get("myfile.csv", {
        handleAs: "text"
    }).then(function(data) {
        // Use data
    });
});

好了,现在您在data参数中将数据作为字符串,您现在需要做的就是解析该字符串。最简单的方法是在每个输入上拆分字符串,例如:

var lines = data.split(/\r?\n/);

\ r \ n是可选的(取决于您正在使用的系统),但现在您将每一行分隔在lines的数组元素中。下一步是检索每个单独的值,例如:

require(["dojo/_base/array"], function(array) {
    /** Rest of code */
    array.forEach(lines, function(line) {
        var cells = line.split(',');
    });
});

然后您将每个逗号分开数据。下一步是您必须将其更改为dojox/grid/DataGrid可以读取的格式。这意味着您可能会将CSV内容的第一行转换为标题(如果它们包含标题),将其余数据转换为对象(而不是字符串数组)。

你可以获得第一行:

var headers = lines[0].split(',');

其余数据包括:

var otherData = lines.splice(1);

现在你应该仔细阅读@MiBrock给你的文档,用它可以将简单的字符串数组转换为正确的格式。

标题应该成为这样的对象数组:

[{ name: "display name", field: "field name" }, { /** other objects */ }]

我这样做了:

array.map(headers, function(header) {
    return {
        field: header,
        name: header
    };
});

这实际上会将[ "a", "b" ]转换为:

[{ field: "a", name: "a" }, { field: "b", name: "b" }]

现在您需要将所有其他行转换为包含名称为a的字段和名称为b的字段的对象,您可以使用以下方法执行此操作:

array.map(otherData, function(line) {
    var cells = line.split(','), obj = {};
    array.forEach(cells, function(cell, idx) {
        obj[headers[idx]] = cell;
    });
    return obj:
});

这实际上将通过检索相应的标头值并将其作为单个对象输出来检索字段名。

现在你可以把它放在一个网格中,看看@ MiBrock的答案,了解如何做到这一点的更多细节。最终结果看起来有点像JSFiddle


注意:下次遇到无法解决的问题时,请先处理 先解决的部分,然后再询问有关其他部分的问题。我的意思是,很难相信你自己实际上无法解决任何问题。你应该先尝试自己学习。

答案 1 :(得分:0)

dojo-smore项目包括CSV object store,它将CSV中的数据加载到内存存储中,然后可以与支持对象存储的任何组件一起使用,例如dgrid。您不应该像Dimitri M建议的那样自己尝试,并且不应该使用不推荐使用的dojox网格。

答案 2 :(得分:0)

您可以使用dojox.data.CsvStore读取CSV商店并在数据网格中使用它。

答案 3 :(得分:-1)

看看这里:http://dojotoolkit.org/reference-guide/1.8/dojox/grid/index.html#dojox-grid-index

在这里:http://dojotoolkit.org/documentation/tutorials/1.9/populating_datagrid/

这应该可以帮助您开始编程。 如果您需要进一步的帮助,请通过发布您的代码向我们展示您尝试解决问题的方法,我们很乐意为您提供帮助。

此致,Miriam