通过自定义指令进行 ng-grid 分页

Posted 2023-05-09

【中文标题】通过自定义指令进行 ng-grid 分页

【英文标题】：ng-grid pagination by custom directives

【发布时间】：2014-09-06 04:42:46

【问题描述】：

在 Angular js 中，我使用了 ng-grid。我想通过使用自定义指令来管理ng-grid 分页。即我想删除每一页中的代码（下面的代码）重复。那么如何编写自定义指令来管理ng-grid 分页。

//Configure Page Option
scope.pagingOptions = 
    pageSizes: [10, 20, 30, 500, 1000, 5000], //page Sizes
    pageSize: 10, //Size of Paging data
    currentPage: 1 //what page they are currently on
;
scope.gridOptions.pagingOptions = scope.pagingOptions;
scope.gridOptions.showFooter = true;
scope.gridOptions.enablePaging = true;
scope.gridOptions.totalServerItems = 'totalServerItems'; 

var data = scope.tableData;

//设置分页监视方法 scope.$watch('pagingOptions', function () getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);, true);

 var getPagedDataAsync = function (pageSize, page) 

 setTimeout(function () 

 var pagedData = data.slice((page - 1) * pageSize, page * pageSize);

 scope.gridData = pagedData;

 scope.totalServerItems = data.length;

 if (!scope.$$phase) 

  scope.$apply();

);

;

 getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);

 //update layout of ng-grid
    scope.$watchCollection( "tableData",

    function (newValue, oldValue) 

  getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);

  scope.gridData = newValue;

  
  );

【问题讨论】：

是否有不能将gridOptions 添加到服务的原因（例如value 或constant）？

不，我也想实现pager相关的操作。那是不可能实现值或常量的。谢谢

您能否将尝试重构的其他代码添加到您的问题中？

【参考方案1】：

'使用严格'; var demoApp = angular.module("DemoApp");

demoApp.controller('simpleController', function ($scope)

$scope.persons = [ name: "Moroni", age: 50 ,
                     name: "Tiancum", age: 43 ,
                     name: "Jacob2", age: 27 ,
                     name: "Jacob3", age: 27 ,
                     name: "Jacob4", age: 27 ,
                     name: "Jacob5", age: 27 ,
                     name: "Jaewrcob6", age: 27 ,
                     name: "Jerwacob", age: 27 ,
                     name: "Jewrewacob", age: 27 ,
                     name: "Tiancum", age: 43 ,
                     name: "Jacob2", age: 27 ,
                     name: "Jacob3", age: 27 ,
                     name: "Jacob4", age: 27 ,
                     name: "Jacob5", age: 27 ,
                     name: "Jaewrcob6", age: 27 ,
                     name: "Jerwacob", age: 27 ,
                     name: "Jewrewacob", age: 27 ,
                     name: "Tiancum", age: 43 ,
                     name: "Jacob2", age: 27 ,
                     name: "Jacob3", age: 27 ,
                     name: "Jacob4", age: 27 ,
                     name: "Jacob5", age: 27 ,
                     name: "Jaewrcob6", age: 27 ,
                     name: "Jerwacob", age: 27 ,
                     name: "Jewrewacob", age: 27 ,
                     name: "Tiancum", age: 43 ,
                     name: "Jacob2", age: 27 ,
                     name: "Jacob3", age: 27 ,
                     name: "Jacob4", age: 27 ,
                     name: "Jacob5", age: 27 ,
                     name: "Jaewrcob6", age: 27 ,
                     name: "Jerwacob", age: 27 ,
                     name: "Jewrewacob", age: 27 ,
                     name: "Tiancum", age: 43 ,
                     name: "Jacob2", age: 27 ,
                     name: "Jacob3", age: 27 ,
                     name: "Jacob4", age: 27 ,
                     name: "Jacob5", age: 27 ,
                     name: "Jaewrcob6", age: 27 ,
                     name: "Jerwacob", age: 27 ,
                     name: "Jewrewacob", age: 27 ,

                     name: "Jacob", age: 27 ,
                     name: "Jacob", age: 27 ,
                     name: "Nephi", age: 29 ,
                     name: "Enos", age: 34 ];

$scope.columnDefs = [ field: 'name', displayName: 'Name', width: '40%' 
               ,  field: 'age', displayName: 'Age', width: '40%' 
               ,  field: '', displayName: 'Edit', width: '10%' 
               ,  field: '', displayName: 'Delete', width: '10%' 
];

$scope.gridOptions = 
    data: 'persons',
    plugins: [new ngGridFlexibleHeightPlugin()],
    showFooter: false,
    columnDefs: 'columnDefs'
;

);

//指令

demoApp.directive('gridDataPager', function ()

return 
    restrict: 'A',
    priority: 1002,
    scope: true,
    //scope:  tableData: '=griddata' ,
    compile:
        function (tElement, tAttrs) 
            return 
                pre: function (scope, element, attrs, controller) 

                    scope.options = scope.$eval(attrs.ngGrid);
                    scope.options.gridData = [];

                    //get basic data source name
                    scope.BaseSource = scope.options.data;
                    //get data
                    scope.data = scope.$eval(scope.options.data);
                    scope.options.gridData = scope.data;
                    //Configure Page Option
                    scope.pagingOptions = 
                        pageSizes: [10, 20, 30, 500, 1000, 5000], //page Sizes
                        pageSize: 10, //Size of Paging data
                        currentPage: 1 //what page they are currently on
                    ;
                    scope.options.pagingOptions = scope.pagingOptions;
                    scope.options.showFooter = true;
                    scope.options.enablePaging = true;
                    scope.options.totalServerItems = 'totalServerItems';
                    scope.options.data = 'gridData';



                ,
                post: function (scope, iElement, iAttrs, controller, transcludeFn) 



                    //set paging watch method
                    scope.$watch('pagingOptions', function () 
                        getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);
                    , true);
                    var getPagedDataAsync = function (pageSize, page) 
                        setTimeout(function () 
                            var pagedData = scope.data.slice((page - 1) * pageSize, page * pageSize);
                            scope.$parent.gridData = pagedData;
                            scope.$parent.totalServerItems = scope.data.length;
                            if (!scope.$$phase) 
                                scope.$apply();
                            
                        );
                    ;
                    getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);


                    //update layout of ng-grid
                    scope.$watchCollection(
                         scope.BaseSource,
                        function (newValue, oldValue) 
                            scope.data = newValue;
                            getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);
                        
                    );


                

            ;
        

);

//html