阿里云新用户优惠

三十一、UI-Grid Auto-Resizing 自动调整大小

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

原文：Tutorial: 213 Auto-Resizing

自动调整大小功能允许表格在页面大小更改时自行调整大小。 请在module中引入“ui.grid.autoResize”模块，并将ui-grid-auto-resize指令添加到html页面的grid中。

注意：开启后，系统会间隔250ms检查表格元素的大小是否发生更改。它可能会对网站或应用程序的性能产生负面影响。

为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件：

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.auto-resize.min.js"></script>
  • index.html
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.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/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.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">
      <button type="button" class="btn btn-success" ng-click="randomSize()">Change to Random Size</button>
      <br>
      <br>
      <div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>
    </div>
  </body>
</html>
  • main.css
.grid {
    width: 500px;
    height: 400px;
}
  • app.js
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.autoResize']);

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

  $scope.gridOptions.columnDefs = [
    { name:'id', width:50 },
    { name:'name', width:100, pinnedLeft:true },
    { name:'age', width:100, pinnedRight:true  },
    { name:'address.street', width:150  },
    { name:'address.city', width:150 },
    { name:'address.state', width:50 },
    { name:'address.zip', width:50 },
    { name:'company', width:100 },
    { name:'email', width:100 },
    { name:'phone', width:200 },
    { name:'about', width:300 },
    { name:'friends[0].name', displayName:'1st friend', width:150 },
    { name:'friends[1].name', displayName:'2nd friend', width:150 },
    { name:'friends[2].name', displayName:'3rd friend', width:150 },
  ];

  $http.get('/data/500_complex.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });

  $scope.randomSize = function () {
    var newHeight = Math.floor(Math.random() * (300 - 100 + 1) + 300);
    var newWidth = Math.floor(Math.random() * (600 - 200 + 1) + 200);

    angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');
    angular.element(document.getElementsByClassName('grid')[0]).css('width', newWidth + 'px');
  };
}]);

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

分享