Question

我正在尝试显示我从rest API访问的表中的数据。我实现它的代码如下：

<div ng-controller="AuditorReportController as vm">

    <div ui-grid="vm.gridOptions" style="padding-top: 10%;">
    </div>

</div>

控制器：

var vm = this;
        var i;
        // activate();
        var dataitems;
        vm.gridOptions = {};
        var gridData;

function userEventData (resp) {
            $http({
                method: "GET",
                url: resp.results["@href"]
            }).success(function (responseData) {
                logger.info("userEventData responseData", responseData);
                vm.gridOptions.data = responseData;
                logger.info("gridOptions", vm.gridOptions.data);
                filterEventField(responseData);
                //return responseData;
            });
        }

function populateGrid (responseData) {
            logger.info("populateGrid function activated");
            vm.dateFormat = "medium";
            vm.gridOptions = {
                enableColumnMenus: false,
                enableColumnResizing: true,
                enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
                enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
                enableRowSelection: true,
                enableSelectAll: true,
                paginationPageSizes: [10, 20, 30, 40, 50], // Using the same options as old UI
                paginationPageSize: 20, // Use 20 as the default page size everywhere until user changes it
                paginationTemplate: "core/templates/ui-grid-pagination-template.html",
                rowTemplate: gridService.getRowTemplate(),
                useExternalPagination: true,
                useExternalSorting: true,
                columnDefs: [
                    {
                        field: "sun",
                        displayName: "Init User",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "dun",
                        displayName: "Target User",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "evt",
                        displayName: "Name",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "dip",
                        displayName: "What is affected",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "det",
                        displayName: "Time created",
                        enableHiding: false,
                        allowCellFocus: false
                    }
                ],
                /**
                 * @ngdoc function
                 * @name gridApi
                 * @memberof app.alerts.grid.AlertViewsController.populateGrid
                 * @summary
                 * ui grid call back functions
                 */
                onRegisterApi: function (gridApi) {
                    vm.gridApi = gridApi;
                }

            }
                vm.gridOptions.totalItems = vm.totalCount;
        }

使用此代码，我得到的只是一个包含列字段的空表。没有数据显示。从API返回的数据采用以下格式：

{
  "next": {
    "@href": "https://objects/event?page=2&pagesize=25&field=evt&field=det&field=spt&field=dip&field=dun&field=sun&query=_jobid_.efa2ebf67d479e39d49385D60384E1035B880000C29194FA7"
  },
  "objects": [
    {
      "meta": {
        "type": "event",
        "@href": "https://objects/event/1498008581468/49385D60-384E-1035-B44E-000C29194FA7"
      },
      "det": "2017-06-21T01:29:41.468Z",
      "dip": "12.16.12.18",
      "spt": "2017-06-21T01:29:41.468Z",
      "evt": "LoginUser",
      "dun": "admin",
      "sun": "admin"
    },
    {
      "meta": {
        "type": "event",
        "@href": "https://objects/event/1498008581439/49385D60-384E-1035-B44C-000C29194FA7"
      },
      "det": "2017-06-21T01:29:41.439Z",
      "dip": "12.16.12.18",
      "spt": "2017-06-21T01:29:41.439Z",
      "evt": "IssueSAMLToken",
      "dun": "admin",
      "sun": "admin"
    },
    {
      "meta": {
        "type": "event",
        "@href": "https:/1DEF74E0-376D-1035-AF66-000C29194FA7"
      },
      "det": "2017-06-20T02:16:55.799Z",
      "dip": "12.16.12.18",
      "spt": "2017-06-20T02:16:55.799Z",
      "evt": "LogOffUser",
      "dun": "admin",
      "sun": "admin"
    }
  ]
}

我是否需要格式化数据，使其可由vm.gridOptions.data读取？目前，我所得到的只是：

Answer 1

我所要做的就是在populateGrid（）函数中定义vm.gridOptions，我在其中定义vm.gridOptions对象。我创建了一个临时对象，我在其中存储responseData，然后将其分配给vm.gridOptions.data

function populateGrid () {
            vm.dateFormat = "medium";
            var temp = vm.gridOptions.data;
            vm.gridOptions = {
                enableColumnMenus: false,
                enableColumnResizing: true,
                enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
                enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
                enableRowSelection: true,
                enableSelectAll: true,
                paginationPageSizes: [10, 20, 30, 40, 50], // Using the same options as old UI
                paginationPageSize: 20, // Use 20 as the default page size everywhere until user changes it
                paginationTemplate: "core/templates/ui-grid-pagination-template.html",
                rowTemplate: gridService.getRowTemplate(),
                useExternalPagination: true,
                useExternalSorting: true,
                columnDefs: [
                    {
                        field: "sun",
                        displayName: "Init User",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "dun",
                        displayName: "Target User",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "evt",
                        displayName: "Name",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "dip",
                        displayName: "What is affected",
                        enableHiding: false,
                        allowCellFocus: false
                    },
                    {
                        field: "det",
                        displayName: "Time created",
                        enableHiding: false,
                        allowCellFocus: false
                    }
                ],
                /**
                 * @ngdoc function
                 * @name gridApi
                 * @memberof app.alerts.grid.AlertViewsController.populateGrid
                 * @summary
                 * ui grid call back functions
                 */
                onRegisterApi: function (gridApi) {
                    vm.gridApi = gridApi;
                }

            }
                vm.gridOptions.totalItems = vm.totalCount;
                vm.gridOptions.data = temp.objects;
        }

ui-grid不会呈现数据

1 个答案: