十九、UI-Grid 水平滚动

最新推荐文章于 2023-01-03 16:37:02 发布

西柚叨叨

最新推荐文章于 2023-01-03 16:37:02 发布

阅读量2k

点赞数

分类专栏： angularjs ui-grid中文api 文章标签： angularjs ui-grid ui-grid中文 ui-gird中文版

原文链接：https://xiyoudaodao.gitee.io/ui-grid/ui-grid-horizontal-scrolling/

版权

angularjs ui-grid中文api 专栏收录该内容

35 篇文章 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

收藏

觉得还不错? 一键收藏
2
评论
十九、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 sr
复制链接

扫一扫

专栏目录