2

我想创建客户端 javascript，它读取 Web 服务器上的 csv 文件并使用该数据填充使用 Ng-Grid 创建的网格。我正在尝试使用jQuery-CSV将 CSV 转换为网格可以使用的东西。我是使用这些 js 库的新手……我错过了什么？

Plunker 代码

脚本：

var app = angular.module('myApp', ['ngGrid']);

var csvData = $.get('X65.csv'); //read the csv file
var objectData = $.csv.toObjects(csvData); //convert to object data, this link breaks the script

app.controller('MyCtrl', function($scope) {
  $scope.myData = objectData; //load the grid with data
  $scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{ field: "app", width: '***' },
            { field: "farm", width: '*' },
            { field: "silo", width: '*' },
            { field: "server", width: '**' },
            { field: "user", width: '***' }],
    showGroupPanel: true
  };
});

来自 FireFox 调试器控制台的错误消息：

"Error: Argument 'MyCtrl' is not a function, got undefined
qa@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16
ra@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16
@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:50
B/j/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42
m@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:6
j@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42
e@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38
e@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38
w/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:37
qb/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
e.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86
e.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86
qb/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:26
qb@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
kc@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:15
@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:158
p.Callbacks/k@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
p.Callbacks/l.fireWith@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
.ready@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
D@https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2
"
4

2 回答 2

1

var csvData = $.get('X65.csv');不会自动返回数据，它会返回一个 jqXHR (jQuery XMLHttpRequest) 对象。

您正在尝试转换 jqXHR 对象，而不是 csv 的内容。

阅读这里的$.get工作原理：http: //api.jquery.com/jquery.get/

无论如何，您可能应该使用 Angular 的实用程序 

$http.get('X65.csv').success(function (data) { 
    objectData = $.csv.toObjects(data); 
}
于 2014-01-08T19:29:15.207 回答
0

使用文件输入和自定义（请参阅链接）fileread 属性对我来说效果更好！

您可以通过 jQuery 的插件来控制按钮文本。

$("#fileImport").inputFileText({ text: "Import sheet" });

通过指令为文件输入定义 fileread 属性

<script src="_assets/JS-Main/jquery-input-file-text.js"></script>
<input type="file" id="fileImport" accept=".xls,.xlsx,.ods" fileread="" opts="uiGrid306" multiple="false"/>
于 2016-12-06T20:39:46.503 回答