阿里云新用户优惠

十九、UI-Grid Horizontal Scrolling 水平滚动

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

原文：191 Horizontal Scrolling

显示大量列的滚动

  • 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">
      <strong>{{ gridOptions.columnDefs.length | number }} Columns with Random Widths</strong>
      <br>
      <br>
      <div id="grid1" ui-grid="gridOptions" class="grid" ng-if="gridOptions"></div>
    </div>
  </body>
</html>
  • main.css
.grid {
  width: 500px;
  height: 450px;
}
  • app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {
  var colCount = 500;
  var rowCount = 500;
  var gridOptions = {};

  function generateColumns() {
    for (var colIndex = 0; colIndex < colCount; colIndex++) {
      gridOptions.columnDefs.push({
        name: 'col' + colIndex,
        width: Math.floor(Math.random() * (120 - 50 + 1)) + 50
      });
    }
  }

  function generateData() {
    for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
      var row = {};

      for (var colIndex = 0; colIndex < colCount; colIndex++) {
        row['col' + colIndex] = 'r' + rowIndex + 'c' + colIndex;
      }

      gridOptions.data.push(row);
    }
  }

  function initialize() {
    gridOptions = {
      enableSorting: true,
      fastWatch: true,
      columnDefs: [],
      data: []
    };
    generateColumns();
    generateData();

    $scope.gridOptions = gridOptions;
  }

  initialize();
}]);

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

分享