在ui-grid angular js中支付Json响应(Dispay Json response in ui-grid angular js)

嗨，我是Angular Js的新手，试图在ui网格中显示json响应，网格只显示响应的一些元素，请你指出正确的方向，我应该操纵json响应得到json输出看起来与我的网格完全一样，或者有没有办法选择json的特定字段显示在网格中。谢谢

var app = angular.module('app', ['ui.grid', 'ui.grid.selection', 'ui.grid.grouping', 'ui.grid.autoResize', 'ui.grid.pagination']); app.controller('MainCtrl', ['$scope', '$http', '$interval',function($scope, $http, $interval) { $scope.gridOptions = { rowHeight: 32, enableRowSelection: true, enableRowHeaderSelection: false }; $scope.gridOptions.columnDefs = [{ name: 'host', width: 300 }, { name: 'Service', width: 500 }, { name: 'Status', width: 100 }, { name: 'Last Check', width: 150 }, { name: 'Status Information', width: 200 }]; $scope.gridOptions.paginationPageSizes = [10, 25, 50, 100, 500]; $scope.gridOptions.paginationPageSize = 10; $scope.gridOptions.showGridFooter = true; $scope.gridOptions.enablePaginationControls = true; $scope.gridOptions.enableFiltering = true, $scope.gridOptions.multiSelect = true; $scope.gridOptions.modifierKeysToMultiSelect = true; $scope.gridOptions.noUnselect = true; $scope.gridOptions.onRegisterApi = function(gridApi) { $scope.gridApi = gridApi; $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); $scope.gridApi.treeBase.on.rowExpanded(null, function(row) { updatePagination(row.treeNode.children.length); }); $scope.gridApi.treeBase.on.rowCollapsed(null, function(row) { updatePagination(-row.treeNode.children.length); }); }; function updatePagination(rowsDifference) { //updating pagination will trigger singleFilter where the height is being reset $scope.gridOptions.paginationPageSizes = [$scope.gridOptions.paginationPageSize + rowsDifference, 25, 50, 100, 500]; $scope.gridOptions.paginationPageSize = $scope.gridOptions.paginationPageSize + rowsDifference; } var username='rest_auto_downtime'; var password='r3st_d0wn'; var token; var login = { method: 'POST', url: 'http://wlhost:50000/nagios/rest/login', withCredentials: true, headers: { 'Content-Type': 'application/json' }, params:{username: username,password: password} } $http(login).then(function (response) { console.log("success"); token = response.data; console.log(token); getData(token); }, function errorCallback (response) { // Failure Function console.log("Failure"); }); function getData (token){ $http({ method: 'GET', url: ' http://wlhost:50000/nagios/rest/status/service', headers: { 'Content-Type': 'application/json', 'X-Opsview-Username' :username , 'X-Opsview-Token' : token.token }, params:{filter:'unhandled'} }).then(function successCallback(response) { /////////////////////////////////////////////////////////////// //////I need to map the json response to my table here //// $scope.gridOptions.data = response.data; console.log("success"); // this callback will be called asynchronously // when the response is available }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. console.log("Failure"); }); }]);

这是我在这里使用的代码，json响应有一个对象列表，我只需要使用列表中每个元素的几个值。

{ "summary" : { "handled" : "27", "unhandled" : "37", "service" : { "ok" : "4", "critical" : "3", "handled" : "10", "unhandled" : "35", "unknown" : "38", "total" : "45" }, "total" : "64", "totalhgs" : "4", "host" : { "handled" : "17", "unhandled" : "2", "up" : "15", "down" : "4", "total" : "19" } }, "list" : [ { "hosts" : { "handled" : "7", "unhandled" : "1", "up" : { "handled" : "6" }, "down" : { "handled" : "1", "unhandled" : "1" }, "total" : "8" }, "hostgroupid" : "4", "services" : { "ok" : { "handled" : "1" }, "handled" : "4", "computed_state" : "unknown", "unhandled" : "15", "unknown" : { "handled" : "3", "unhandled" : "15" }, "total" : "19" }, "matpath" : [ { "name" : "Opsview", "id" : "1" }, { "name" : "UK", "id" : "3" } ], "computed_state" : "critical", "downtime" : "2", "name" : "Leaf", "leaf" : "0" }, { "hosts" : { "handled" : "10", "unhandled" : "1", "up" : { "handled" : "9" }, "down" : { "handled" : "1", "unhandled" : "1" }, "total" : "11" }, "hostgroupid" : "1", "services" : { "ok" : { "handled" : "3" }, "critical" : { "unhandled" : "3" }, "handled" : "6", "computed_state" : "critical", "unhandled" : "20", "unknown" : { "handled" : "3", "unhandled" : "17" }, "total" : "26" }, "computed_state" : "critical", "matpath" : [], "downtime" : "2", "name" : "Opsview", "leaf" : "0" } ]}

Hi Am new to Angular Js am trying to display a json response in a ui-grid , the grid will display just some elements of the response , can you please point me to the right direction , should i manipulate the json response to get json output that looks exactly like my grid or is there a way to select specific fields of the json to display in the grid .Thanks

var app = angular.module('app', ['ui.grid', 'ui.grid.selection', 'ui.grid.grouping', 'ui.grid.autoResize', 'ui.grid.pagination']); app.controller('MainCtrl', ['$scope', '$http', '$interval',function($scope, $http, $interval) { $scope.gridOptions = { rowHeight: 32, enableRowSelection: true, enableRowHeaderSelection: false }; $scope.gridOptions.columnDefs = [{ name: 'host', width: 300 }, { name: 'Service', width: 500 }, { name: 'Status', width: 100 }, { name: 'Last Check', width: 150 }, { name: 'Status Information', width: 200 }]; $scope.gridOptions.paginationPageSizes = [10, 25, 50, 100, 500]; $scope.gridOptions.paginationPageSize = 10; $scope.gridOptions.showGridFooter = true; $scope.gridOptions.enablePaginationControls = true; $scope.gridOptions.enableFiltering = true, $scope.gridOptions.multiSelect = true; $scope.gridOptions.modifierKeysToMultiSelect = true; $scope.gridOptions.noUnselect = true; $scope.gridOptions.onRegisterApi = function(gridApi) { $scope.gridApi = gridApi; $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); $scope.gridApi.treeBase.on.rowExpanded(null, function(row) { updatePagination(row.treeNode.children.length); }); $scope.gridApi.treeBase.on.rowCollapsed(null, function(row) { updatePagination(-row.treeNode.children.length); }); }; function updatePagination(rowsDifference) { //updating pagination will trigger singleFilter where the height is being reset $scope.gridOptions.paginationPageSizes = [$scope.gridOptions.paginationPageSize + rowsDifference, 25, 50, 100, 500]; $scope.gridOptions.paginationPageSize = $scope.gridOptions.paginationPageSize + rowsDifference; } var username='rest_auto_downtime'; var password='r3st_d0wn'; var token; var login = { method: 'POST', url: 'http://wlhost:50000/nagios/rest/login', withCredentials: true, headers: { 'Content-Type': 'application/json' }, params:{username: username,password: password} } $http(login).then(function (response) { console.log("success"); token = response.data; console.log(token); getData(token); }, function errorCallback (response) { // Failure Function console.log("Failure"); }); function getData (token){ $http({ method: 'GET', url: ' http://wlhost:50000/nagios/rest/status/service', headers: { 'Content-Type': 'application/json', 'X-Opsview-Username' :username , 'X-Opsview-Token' : token.token }, params:{filter:'unhandled'} }).then(function successCallback(response) { /////////////////////////////////////////////////////////////// //////I need to map the json response to my table here //// $scope.gridOptions.data = response.data; console.log("success"); // this callback will be called asynchronously // when the response is available }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. console.log("Failure"); }); }]);

That's the code am using here the json response has a list of Objects and i need to use just a couple of values from each element in the list .

{ "summary" : { "handled" : "27", "unhandled" : "37", "service" : { "ok" : "4", "critical" : "3", "handled" : "10", "unhandled" : "35", "unknown" : "38", "total" : "45" }, "total" : "64", "totalhgs" : "4", "host" : { "handled" : "17", "unhandled" : "2", "up" : "15", "down" : "4", "total" : "19" } }, "list" : [ { "hosts" : { "handled" : "7", "unhandled" : "1", "up" : { "handled" : "6" }, "down" : { "handled" : "1", "unhandled" : "1" }, "total" : "8" }, "hostgroupid" : "4", "services" : { "ok" : { "handled" : "1" }, "handled" : "4", "computed_state" : "unknown", "unhandled" : "15", "unknown" : { "handled" : "3", "unhandled" : "15" }, "total" : "19" }, "matpath" : [ { "name" : "Opsview", "id" : "1" }, { "name" : "UK", "id" : "3" } ], "computed_state" : "critical", "downtime" : "2", "name" : "Leaf", "leaf" : "0" }, { "hosts" : { "handled" : "10", "unhandled" : "1", "up" : { "handled" : "9" }, "down" : { "handled" : "1", "unhandled" : "1" }, "total" : "11" }, "hostgroupid" : "1", "services" : { "ok" : { "handled" : "3" }, "critical" : { "unhandled" : "3" }, "handled" : "6", "computed_state" : "critical", "unhandled" : "20", "unknown" : { "handled" : "3", "unhandled" : "17" }, "total" : "26" }, "computed_state" : "critical", "matpath" : [], "downtime" : "2", "name" : "Opsview", "leaf" : "0" } ]}

最满意答案

这几乎取决于。 如果您有不同的属性名称，则只需使用columnDefs的属性field 。 否则，如果属性是需要从中检索特定值的对象，则可能需要使用cellTemplate属性，并从此处操作内容。 您将可以访问将在范围中关联的变量row 。 更确切地说， row.entity将对应于您发送到$scope.gridOptions.data的response.data[$index] 。

It pretty much depends. If you have different attribute names, you can just use the attribute field in the columnDefs. Otherwise, if your attributes are objects which you need to retrieve a particular value from, you might want to use the cellTemplate attribute, and manipulate the content from here. You will have access to the variable row which will be associated in the scope. More exactly, row.entity will correspond to the response.data[$index] that you sent to the $scope.gridOptions.data.

更多推荐