我在这里想念什么?网格呈现无错误,空白行...我检查了JSON到现在为止都很好了$scope.gridOptions.data = response['data'];
好像它呈现了空数组并且从没有到达实际数据...
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.myData = [];
$scope.loading = true;
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'Id', field: 'PK_Inspection' },
{ name: 'Employee Id', field: 'EmployeeId' },
{ name: 'Employee Name', field: 'EmployeeName' },
{ name: 'Equipment Id', field: 'EquipmentId' },
{ name: 'Equipment Name', field: 'EquipmentName' },
{ name: 'Sequence', field: 'SequenceName' },
{ name: 'Details', field: 'SequenceDetails' },
{ name: 'Type', field: 'SequenceTypeName' },
{ name: 'Shift', field: 'ShiftName' },
{ name: 'Status', field: 'StatusName' }
],
data:[]
};
$http.get('/Home/GetAllData')
.then(function (response) {
$scope.gridOptions.data = response['data'];
})
.catch(function (err) {
$scope.loading = false;
console.log("Error Receiving Data.");
})
.finally(function () {
$scope.loading = false;
console.log($scope.gridOptions.data);
});
}]);
数据传递到$scope.gridOptions.data
:
[
{
"PK_Inspection": 1,
"EmployeeId": "4433112",
"EmployeeName": "",
"EquipmentId": "1122113",
"EquipmentName": "",
"SequenceName": "UNIT 1",
"SequenceDetails": "Bent, Dented, Broken, Torn or Deformed Parts.",
"SequenceTypeName": "Visual Inspection",
"ShiftName": "Day",
"StatusName": "OK"
},
{
"PK_Inspection": 2,
"EmployeeId": "4433112",
"EmployeeName": "",
"EquipmentId": "1122113",
"EquipmentName": "",
"SequenceName": "UNIT 2",
"SequenceDetails": "Charge, Water Levels, Vent Caps in place, Power Disconnect works.",
"SequenceTypeName": "Visual Inspection",
"ShiftName": "Day",
"StatusName": "OK"
}
]
这是HTML:
<div ng-controller="MainCtrl">
<i class="fa fa-spinner fa-spin text-center" ng-show="loading"></i>
<div id="mainGrid" ui-grid="gridOptions" ui-grid-edit class="myGrid"></div>
</div>
屏幕截图
我想通了,看来我的问题是两件事的结合。
JSON.parse
然后将其传递给,$scope.gridOptions.data
但这可能是我在上述原始问题中发布的代码的问题。经过更多研究,我在Angular UI Grid官方文档中找到了一个很好的深入示例。遵循这种技术,我能够正确呈现数据。
var rowCount = 0;
var i = 0;
$scope.refreshData = function () {
$scope.loading = true;
$scope.myData = [];
$http.get('/Home/GetAllData')
.success(function (response) {
var jsonObj = JSON.parse(response);
rowCount = jsonObj.length;
jsonObj.forEach(function (row) {
row.id = i; i++;
$scope.myData.push(row);
});
$scope.loading = false;
})
.error(function() {
$scope.loading = false;
console.log("Error retrieving data.");
});
};
在该示例中,它利用gridOptions.data中的一个字符串值调用myData
,该字符串值引用您的观察范围内的对象。因此,我正在做的就是在GET请求完成后立即推送每一行。
完整的示例在此处通过Punklr。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句