十九、UI-Grid 水平滚动

来源：互联网发布：软件著作权怎么申请编辑：程序博客网时间：2024/05/16 11:11

原文：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="/release/ui-grid.js"></script>    <script src="/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: 400px;}

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();}]);

Demo
这里写图片描述

水平有限，不当之处敬请指正。

0 0