Question

嗨，我是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响应有一个Objects列表，我只需要使用列表中每个元素的几个值。

{
"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"
  }
]}

Answer 1

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

在ui-grid angular js中支付Json响应

1 个答案: