Question

我想借助角度ui.grid向我投去帮助。发生在我身上的是我不能进行外部分页，因为当我进行分页时，没有任何反应。

这是我的代码app.js：

 angular.module('ventasFeApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngMessages',
'angular-loading-bar',
'toastr',
'ui.grid',
'ui.grid.pagination',
]);

控制器：

         angular.module('ventasFeApp').controller('UsuarioCtrl', function ($scope, $http, httpPeticion) {
        $scope.gridOptions = {};
        $scope.getList = function(){
            var controller = 'usuario';
            var action = 'getlist';
            httpPeticion.post(controller, action, '').then(
                function(respData){             
                    $scope.gridOptions.paginationPageSizes = [1, 2, 3];
                    $scope.gridOptions.paginationPageSize= 1;
                    $scope.gridOptions.useExternalPagination = true,    
                    $scope.gridOptions.onRegisterApi = function(gridApi){
                        $scope.gridApi = gridApi;
                        $scope.gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                            console.log("HI!!!!");
                            console.log(newPage, pageSize);
                            var data = {'pagina' : newPage, 'maxresult' : pageSize, 'consulta': ''};
                            httpPeticion.post(controller, action, $.param(data)).then(
                                function(respData){
                                    $scope.gridOptions.data = respData.data;
                                    $scope.gridOptions.totalItems = 100;
                                    var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
                                    $scope.gridOptions.data = respData.data.slice(firstRow, firstRow + paginationOptions.pageSize);

                                }, function(error){
                                    console.log(error);
                                });                     
                        });

                    };
                    console.log($scope.gridOptions)
                    $scope.gridOptions= {
                        data: respData.data,
                        columnDefs: [
                        {field: 'nombre', displayName: 'Nombre'},
                        {field: 'documento', displayName: 'Documento'},
                        {field: 'correo', displayName: 'Correo'},
                        {field: 'telefono', displayName: 'Telefono'},
                        {field: 'tipocuenta', displayName: 'Tipo Cuenta'},
                        {
                            field: 'action',
                            width: 100,
                            displayName: 'Acción',
                            cellTemplate: '<button id="editBtn" type="button" class="btn btn-xs btn-default glyphicon glyphicon-pencil" ng-click="grid.appScope.editUsuario(row.entity.id)" ></button>' 
                        }]

                    };      
                },function(error){
                    console.log(error);
                });
    }
});

所有选项UI.grid都适用于我，减去$ scope.gridOptions.onRegisterApi。如果有人知道为什么这不起作用，我将非常感激。

Answer 1

// this creates an empty object.  Basically, you now have *no* set options
$scope.gridOptions = {}; 

$scope.getList = function(){
// none of the code in this function is called until 
// someone invokes "getList" either from the DOM or 
// someplace else in the controller

// this makes an async http request and the "then" function won't
// run until the server responds with a 200 response code
httpPeticion.post(controller, action, '').then(function(){
    // by the time this code runs, your grid is already rendered
    // (incorrectly) on the page
}

ui.grid分页外部不起作用AngularJS

1 个答案: