Question

在角度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;

//设置分页监视方法范围。$ watch（＆＃39; pagingOptions＆＃39;，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;

  }
  );

Answer 1

'use strict'; 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

＆LT; div grid-data-pager ng-grid =“gridOptions”＆gt; ＆LT; / DIV＆GT;

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

1 个答案: