Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

AngularJS Grid

サーバーデータをページ化して表示

<%= stylesheet_link_tag "ng-grid.min" %>
<%= stylesheet_link_tag "grid1" %>
<%= javascript_include_tag "ng-grid-2.0.13" %>
<%= javascript_include_tag "grid" %>
<div ng-controller="Grid1">
  <div class="row">
    <div class="col-sm-12">
      <div class="gridStyle" ng-grid="gridOptions">
      </div>
    </div>
  </div>
</div>

(config/environments/production.rb)
config.assets.compile = false
config.assets.precompile += ['ng-grid-2.0.13.min.js','grid1.js','ng-grid.min.css','grid1.css']
var mymodule = angular.module('myModule', ['ui.bootstrap','ngGrid']);

var Grid1 = function($scope,$http) {
  $scope.pagingOptions = {
    pageSizes: [3, 5, 8],
    pageSize: 3,
    currentPage: 1
  };
  $scope.totalServerItems = 0;
  $scope.setPagingData = function(data,page,pageSize){
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.myData = pagedData;
    $scope.totalServerItems = data.length;
    if (!$scope.$$phase) {
      $scope.$apply();
    }
  };
  $scope.getPagedDataAsync = function (pageSize, page) {
    setTimeout(function () {
      $http.get('/angular_pages/gglchrt2.json').success(function(largeLoad) {
        $scope.setPagingData(largeLoad,page,pageSize);
      });
    }, 100);
  };
  $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

  $scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
    }
  }, true);

  $scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions
  };
};

Grid1.$inject = ['$scope','$http'];
mymodule.controller('Grid1', Grid1);

  def gglchrt2
    @data2 = Sale.all
    respond_to do |format|
      format.html { render html: @data2 }
      format.json { render json: @data2 }
    end
  end
.gridStyle {
    border: 1px solid rgb(212,212,212);
    height: 300px
}

ヘッダーのスタイルを設定

<%= stylesheet_link_tag "ng-grid.min" %>
<%= stylesheet_link_tag "grid1" %>
<%= javascript_include_tag "ng-grid-2.0.13.min" %>
<%= javascript_include_tag "grid" %>
<div ng-controller="Grid2">
  <div class="row">
    <div class="col-sm-12">
      <div class="gridStyle2" ng-grid="gridOptions">
      </div>
    </div>
  </div>
</div>

(config/environments/production.rb)
config.assets.compile = false
config.assets.precompile += ['ng-grid-2.0.13.min.js','grid.js','ng-grid.min.css','grid1.css']
var mymodule = angular.module('myModule', ['ui.bootstrap','ngGrid']);

var Grid2 = function($scope,$http) {
  $scope.pagingOptions = {
    pageSizes: [3, 5, 8],
    pageSize: 3,
    currentPage: 1
  };
  $scope.totalServerItems = 0;
  $scope.setPagingData = function(data,page,pageSize){
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.myData = pagedData;
    $scope.totalServerItems = data.length;
    if (!$scope.$$phase) {
      $scope.$apply();
    }
  };
  $scope.getPagedDataAsync = function (pageSize, page) {
    setTimeout(function () {
      $http.get('/angular_pages/gglchrt2.json').success(function(largeLoad) {
        $scope.setPagingData(largeLoad,page,pageSize);
      });
    }, 100);
  };
  $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

  $scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
    }
  }, true);

  $scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    columnDefs: [
      {field: 'id', displayName: 'day (update)'},
      {field: 'updateday', displayName: 'day (update)'},
      {field: 'avg', displayName: 'avg (update)'},
      {field: 'count', displayName: 'count (update)'}
    ],
    headerRowHeight: 64
  };
};

Grid2.$inject = ['$scope','$http'];
mymodule.controller('Grid2', Grid2);

  def gglchrt2
    @data2 = Sale.select(:id,:updateday,:avg,:count)
    respond_to do |format|
      format.html { render html: @data2 }
      format.json { render json: @data2 }
    end
  end
.gridStyle2 {
    border: 1px solid rgb(212,212,212);
    height: 300px;
    width: 300px;
}
.ngHeaderText {
  white-space: normal !important;
}

ページ化したGridデータをフィルター

フィルター:
<%= stylesheet_link_tag "ng-grid.min" %>
<%= stylesheet_link_tag "grid1" %>
<%= javascript_include_tag "ng-grid-2.0.13.min" %>
<%= javascript_include_tag "grid" %>
<div ng-controller="Grid3">
  <div class="row">
    <div class="col-sm-12">
      <strong>フィルター:</strong><input type="text" ng-model="filterOptions.filterText" />
      <div class="gridStyle" ng-grid="gridOptions">
      </div>
    </div>
  </div>
</div>

(config/environments/production.rb)
config.assets.compile = false
config.assets.precompile += ['ng-grid-2.0.13.min.js','grid.js','ng-grid.min.css','grid1.css']
var mymodule = angular.module('myModule', ['ui.bootstrap','ngGrid']);

var Grid3 = function($scope,$http) {
  $scope.pagingOptions = {
    pageSizes: [3, 5, 8],
    pageSize: 3,
    currentPage: 1
  };
  $scope.totalServerItems = 0;
  $scope.setPagingData = function(data,page,pageSize){
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.myData = pagedData;
    $scope.totalServerItems = data.length;
    if (!$scope.$$phase) {
      $scope.$apply();
    }
  };
  $scope.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
      var data;
      if (searchText) {
        var ft = searchText.toLowerCase();
        $http.get('/angular_pages/gglchrt3.json').success(function (largeLoad) {
          data = largeLoad.filter(function(item) {
            return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
          });
          $scope.setPagingData(data,page,pageSize);
        });
      } else {
        $http.get('/angular_pages/gglchrt3.json').success(function (largeLoad) {
          $scope.setPagingData(largeLoad,page,pageSize);
        });
      }
    }, 100);
  };

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

  $scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
  }, true);

  $scope.$watch('filterOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
  }, true);

  $scope.filterOptions = {
      filterText: "",
      useExternalFilter: true
  };
  $scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions
  };
};

Grid3.$inject = ['$scope','$http'];
mymodule.controller('Grid3', Grid3);

  def gglchrt3
    @data3 = Sale.select(:id,:name,:grp,:updateday,:avg,:count)
    respond_to do |format|
      format.html { render html: @data3 }
      format.json { render json: @data3 }
    end
  end
.gridStyle {
    border: 1px solid rgb(212,212,212);
    height: 300px;
}