grid生成(簡單範例):

<script>
   var app = angular.module('myApp', ['ngGrid']);
   app.controller('MyCtrl', function($scope) {
      $scope.myData = [{name: "Moroni", age: 50},
      {name: "Tiancum", age: 43},
      {name: "Jacob", age: 27},
      {name: "Nephi", age: 29},
      {name: "Enos", age: 34}];
      $scope.gridOptions = { data: 'myData' };
});

</script>

   <body ng-controller="MyCtrl">
      <div ng-grid="gridOptions"></div>
   </body>

 

 

進階版:

 

main.js

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

 

largeLoad.json:

[{"name": "Moroni", "allowance": 505050505050505050, "paid": true},
{"name": "Tiancum", "allowance": 53, "paid": false},
{"name": "Jacob", "allowance": 27, "paid": false},
{"name": "Nephi", "allowance": 29, "paid": false},
{"name": "Enos", "allowance": 34, "paid": false},
{"name": "Ether", "allowance": 42, "paid": false},
{"name": "Alma", "allowance": 43, "paid": true},
{"name": "Jared", "allowance": 21, "paid": true},
{"name": "Moroni", "allowance": 50, "paid": true},
{"name": "Tiancum", "allowance": 53, "paid": false},
{"name": "Jacob", "allowance": 27, "paid": false},
{"name": "Nephi", "allowance": 29, "paid": false},
{"name": "Enos", "allowance": 34, "paid": false},
{"name": "Ether", "allowance": 42, "paid": false},
{"name": "Alma", "allowance": 43, "paid": true},
{"name": "Jared", "allowance": 21, "paid": true},
{"name": "Moroni", "allowance": 50, "paid": true},

style.css

.gridStyle {
  border: 1px solid rgb(212,212,212);
  width: 600px;
  height: 300px;

}

 

index_testGrid.jsp:

<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
 
    </head>
    
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
 
</html>

 

已上官網範例:http://angular-ui.github.io/ng-grid/

 

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 JoshS 的頭像
    JoshS

    JoshS的部落格

    JoshS 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄