Question

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

脚本：

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
"

Answer 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); 
}

Answer 2

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

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

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

Define a fileread attribute for file input by a directive

<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"/>

如何从CSV文件中填充Ng-Grid？

2 个答案: