grid.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. app.controller('GridDemoCtrl', ['$scope', '$http', function($scope, $http) {
  2. $scope.filterOptions = {
  3. filterText: "",
  4. useExternalFilter: true
  5. };
  6. $scope.totalServerItems = 0;
  7. $scope.pagingOptions = {
  8. pageSizes: [250, 500, 1000],
  9. pageSize: 250,
  10. currentPage: 1
  11. };
  12. $scope.setPagingData = function(data, page, pageSize){
  13. var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
  14. $scope.myData = pagedData;
  15. $scope.totalServerItems = data.length;
  16. if (!$scope.$$phase) {
  17. $scope.$apply();
  18. }
  19. };
  20. $scope.getPagedDataAsync = function (pageSize, page, searchText) {
  21. setTimeout(function () {
  22. var data;
  23. if (searchText) {
  24. var ft = searchText.toLowerCase();
  25. $http.get('js/controllers/largeLoad.json').success(function (largeLoad) {
  26. data = largeLoad.filter(function(item) {
  27. return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
  28. });
  29. $scope.setPagingData(data,page,pageSize);
  30. });
  31. } else {
  32. $http.get('js/controllers/largeLoad.json').success(function (largeLoad) {
  33. $scope.setPagingData(largeLoad,page,pageSize);
  34. });
  35. }
  36. }, 100);
  37. };
  38. $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
  39. $scope.$watch('pagingOptions', function (newVal, oldVal) {
  40. if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
  41. $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
  42. }
  43. }, true);
  44. $scope.$watch('filterOptions', function (newVal, oldVal) {
  45. if (newVal !== oldVal) {
  46. $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
  47. }
  48. }, true);
  49. $scope.gridOptions = {
  50. data: 'myData',
  51. enablePaging: true,
  52. showFooter: true,
  53. totalServerItems: 'totalServerItems',
  54. pagingOptions: $scope.pagingOptions,
  55. filterOptions: $scope.filterOptions
  56. };
  57. }]);