本文转自：https://stackoverflow.com/questions/23396398/ng-grid-auto-dynamic-height

I think I solved this problem perfectly after 48 hours,

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.autoResize']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', function($scope, $http, $interval) {

  var paginationOptions = {

    pageNumber: 1,

    pageSize: 20,

  };

  $scope.currentPage = 1;

  $scope.pageSize = paginationOptions.pageSize;

  $scope.gridOptions = {

    rowHeight: 30,

    enableSorting: true,

    paginationPageSizes: [$scope.pageSize, $scope.pageSize * 2, $scope.pageSize * 3],

    paginationPageSize: paginationOptions.pageSize,

    columnDefs: [{

      name: 'name'

    }, {

      name: 'gender',

      enableSorting: false

    }, {

      name: 'company',

      enableSorting: false

    }],

    onRegisterApi: function(gridApi) {

      $scope.gridApi = gridApi;

      gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) {

        paginationOptions.pageNumber = newPage;

        paginationOptions.pageSize = pageSize;

        $scope.pageSize = pageSize;

        $scope.currentPage = newPage;

        $scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);

      });

    }

  };

  var loadData = function() {

    var url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';

    $http.get(url)

      .success(function(data) {

        $scope.gridOptions.totalItems = data.length;

        $scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);

        $scope.gridOptions.data = data;

      });

  };

  loadData();

  // for resize grid's height

  $scope.tableHeight = 'height: 600px';

  function getTableHeight(totalPage, currentPage, pageSize, dataLen) {

    var rowHeight = 30; // row height

    var headerHeight = 50; // header height

    var footerHeight = 60; // bottom scroll bar height

    var totalH = 0;

    if (totalPage > 1) {

      // console.log('hehehehe');

      if (currentPage < totalPage) {

        totalH = pageSize * rowHeight + headerHeight + footerHeight;

      } else {

        var lastPageSize = dataLen % pageSize;

        // console.log(lastPageSize);

        if (lastPageSize === 0) {

          totalH = pageSize * rowHeight + headerHeight + footerHeight;

        } else {

          totalH = lastPageSize * rowHeight + headerHeight + footerHeight;

        }

      }

      console.log(totalH);

    } else {

      totalH = dataLen * rowHeight + headerHeight + footerHeight;

    }

    return 'height: ' + (totalH) + 'px';

  }

  $interval(function() {

    $scope.tableHeight = getTableHeight($scope.totalPage,

      $scope.currentPage, $scope.pageSize,

      $scope.gridOptions.data.length);

    console.log($scope.tableHeight);

    $scope.gridApi.grid.handleWindowResize();

    $scope.gridApi.core.refresh();

  }, 200);

}]);
.grid {

  width: 600px;

}
<!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>

  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

  <link rel="stylesheet" href="main.css" type="text/css">

</head>

<body>

  <div ng-controller="MainCtrl">

    <div ui-grid="gridOptions" ui-grid-pagination id="grid" style="{{tableHeight}}"></div>

    <div>

      <p>Current Page: {{ currentPage }}</p>

      <p>Total Page: {{ totalPage }}</p>

      <p>Page Size: {{ pageSize }}</p>

      <p>Table Height: {{tableHeight}}</p>

    </div>

  </div>

  <script src="app.js"></script>

</body>

</html>

Also see Plunker: http://plnkr.co/edit/np6y6rgN1ThnT0ZqyJeo?p=preview

其他类似尝试的参考地址：

https://stackoverflow.com/questions/27837335/angular-ui-grid-dynamically-calculate-height-of-the-grid

https://stackoverflow.com/questions/28678582/angularjs-ui-grid-dynamic-expandablerowheight

[转]ng-grid Auto / Dynamic Height的更多相关文章

  1. CSS，height:auto和height:100%有什么区别？

    auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...

  2. div+css中height:auto !important; height:663px; min-height:663px !important;区别

    height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...

  3. WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

  4. WPF中Grid布局

    WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...

  5. SILVERLIGHT 应急卫生模拟演练项目之GRID布局

    上篇文章 我介绍了LOADING界面 loading加载完成后 会进入主界面 效果图如下 这里我要给大家说一下我在布局方面的应用  说起布局 做过SL开发的一定都知道 Grid,StackPanel和 ...

  6. WPF入门教程系列八——布局之Grid与UniformGrid（三）

    五. Grid Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列. Grid和其他各个Panel比较起来,功能最多也最为复杂.要使用Grid,首先要向RowDef ...

  7. WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel

    回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...

  8. 实现控件WPF(4)----Grid控件实现六方格

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 利用Grid控件能很轻松帮助我们实现各种布局.上面就是一个通过Grid单元格 ...

  9. ItemsControl 使用Grid布局

    ItemsControl控件经常用到,在ItemsPanel里大多是StackPanel,WrapPanel,以下项目演示如何使用Grid用于ItemsControl布局 1.先看运行效果 2.xam ...

随机推荐

  1. PYQT5实现文件目录浏览

    def setBrowerPath(self): download_path = QtWidgets.QFileDialog.getExistingDirectory(self, "浏览&q ...

  2. .netcore部署centos

    前言:最近公司有个项目用 .netcore开发的项目,然后闲的没事就研究如果发布到Linux系统上 需要安装的插件以及支撑架构 1.dotnetSDK 2.jexus Jexus 是Linux平台上 ...

  3. Interesting JavaScript

    作者:ManfredHu 链接:http://www.manfredhu.com/2016/07/07/20-interestingJavascript 声明:版权所有,转载请保留本段信息,否则请不要 ...

  4. 第三章 CopyOnWriteArrayList源码解析

    注:在看这篇文章之前,如果对ArrayList底层不清楚的话,建议先去看看ArrayList源码解析. http://www.cnblogs.com/java-zhao/p/5102342.html ...

  5. react.js 点击事件传递参数的方法

    <button onClick={this.handleClick.bind(this, props0, props1, ...}></button> handleClick( ...

  6. 在Ubuntu中增加root用户登录

    一:增加root用户登录 1.打开终端,输入:sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.在弹出的编辑框里输入:gree ...

  7. spring cloud ribbon源码解析（二）

    在上一篇文章中主要梳理了ribbon的执行过程,这篇主要讲讲ribbon的负载均衡,ribbon的负载均衡是通过ILoadBalancer来实现的,对ILoadBalancer有以下几个类 1.Abs ...

  8. 使用泛型SwingWorker与EDT事件分发线程保持通讯

    为什么要使用SwingWorker 在swing开发中,如果一个应用程序,执行一些任务,需要大量的时间来完成,比如下载一个大文件或执行一个复杂的数据库查询. 我们假设这些任务是由用户使用一个按钮触发的 ...

  9. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  10. vector.clear()不能用来清零

    vector.clear()函数并不会把所有元素清零,笔者就曾经这样幻想过这个函数的作用,然而事实证明并不是. vector有两个参数,一个是size,表示当前vector容器内存储的元素个数,一个是 ...