Question

我在这里缺少什么？网格呈现没有错误，空白行...我检查了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>

截图

enter image description here

Answer 1

我明白了，似乎我的问题是两件事的混合。

传入的JSON是一个字符串，我不是100％确定是否需要使用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.");
        });
 };

在示例中，它使用了名为myData的gridOptions.data中的字符串值，该值引用了要观看的作用域上的对象。所以我正在做的只是在GET请求完成后推送每一行。

完整示例是通过Punklr Here。

Answer 2

对于我来说，以下代码有效，一旦我更改了数据，便在代码下方调用

if ($scope.gridApi ) {
       $scope.$timeout(() => {
          $scope.gridApi.core.handleWindowResize();
          $scope.gridApi.grid.refresh();
       }, 10);
}

Answer 3

您从响应中访问了错误的JSON数据（从您的respone示例中获取，数组不在＆＃39;数据名称中）。您的代码中包含数据的无名称数组：

$scope.gridOptions.data = response['data'];

应该是：

$scope.gridOptions.data = response;

Answer 4

您可以像这样更改fieldId：

$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:[]
};

UI网格角度，网格渲染但不显示数据

4 个答案: