如何在 Webix 数据表中读取带有 headers 的 CSV 文件？

Question

我想读取一个包含 headers 的 CSV 文件以填充此 documentation 之后的 datatable 小部件。但是，当我执行以下代码时出现 uncaught exception: [object XMLHttpRequest] 错误：

<!DOCTYPE HTML>
<html>
    <head>
    <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css"> 
    <script src="http://cdn.webix.com/edge/webix_debug.js" type="text/javascript"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//cdn.opencpu.org/opencpu-0.4.js"></script>
    </head>
    <body>
      <script type="text/javascript" charset="utf-8">
webix.ui({
    rows:[
        { view:"template", 
          type:"header", template:"Read in a CSV" },
        { view:"datatable", 
          columns:[
              { id:"#x#", header:"x" },
              { id:"#y#", header:"y" },
              { id:"#z#", header:"z" }],
          datatype:"csv",
          autoheight:true,
          autowidth:true,
          url:"data/basic.csv"
        }
    ]
});
      </script>
    </body>
</html>

此外，我在浏览器的 right-hand 上角看到以下通知。

日志中的错误详细信息是：

"XHTTP:" XMLHttpRequest { onreadystatechange: webix.ajax.prototype._send/x.onreadystatechange(), readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, status: 0, statusText: "", responseType: "", response: "x,y,z
1,1,23.3
1,2,15.8
2,1,88.3
2,2,83.5
", responseText: "x,y,z
1,1,23.3
1,2,15.8
2,1,88.3
2,2,83.5
" } webix_debug.js:3240
uncaught exception: [object XMLHttpRequest]

似乎可以很好地读取 CSV 文件。为什么不显示？我不得不承认，我发现文档令人困惑，因为它根本没有提到 CSV headers。

Answer 1

您运行示例页面是通过 http（使用某种网络服务器）打开的，还是直接从文件系统打开的？

由于安全限制，ajax 请求可能不适用于直接从文件系统加载的页面。

此外，要正确映射数据，您需要像接下来那样使用数据表列配置

      columns:[
          { id:"data0", header:"x" },
          { id:"data1", header:"y" },
          { id:"data2", header:"z" }],

DataTable 将无法识别 header 并将 CSV 数据映射到抽象的 data0..dataN 属性。

如何在 Webix 数据表中读取带有 headers 的 CSV 文件？

How can I read a CSV file with headers in Webix datatable?

csv

webix