2017-06-21 82 views
0

我想显示我从其他API访问的表中的数据。我的代码来实现其计算方法如下:ui网格不会呈现数据

<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? 目前,所有我得到的是: enter image description here

+0

确定的响应返回一个数组的一个临时对象? vm.gridOptions.data = responseData; 响应被推入上面的变量,但你想要迭代HTML中的同一个变量? – CrazyMac

+0

是的,我正在遍历responseData.objects.length。对于(i = 0; i user2128

+0

我没有看到你的文章中的那段代码。如果服务器响应是一个数组,那么你必须迭代angular.forEach(response.data,function(element,index){vm.gridOptions.push(element)}。然后你可以在你的html中使用vm.gridOptions来迭代。你也应该声明vm.gridOptions为array []而不是object {} – CrazyMac

回答

0

我所要做的就是在populateGrid定义vm.gridOptions()函数,其中i定义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; 
     }