阿里云新用户优惠

八、UI-Grid Multiple Grids per Page 单页上的多个表格

· 97 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：109 Multiple Grids per Page 在单页上使用多个表格

  • index.html
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div class="row">
        <div class="span4">
          <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
        </div>

        <div class="span4">
          <div id="grid2" ui-grid="gridOptions2" class="grid"></div>
        </div>
      </div>
    </div>
  </body>
</html>
  • main.css
.grid {
  width: 500px;
  height: 150px;
}
  • app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions1 = {};
  $scope.gridOptions2 = {};

  $http.get('http://ui-grid.info/data/100.json')
  .success(function(data) {
    $scope.gridOptions1.data = data;
  });

  $http.get('http://ui-grid.info/data/500.json')
  .success(function(data) {
    $scope.gridOptions2.data = data;
  });
}]);

关注微信公众号，与我交流吧~

分享