本文转自：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. 巧用XML配置校验导入Excel的列数据格式

    <?xml version="1.0"?> <ColumnsSeting xmlns:xsd="http://www.w3.org/2001/XMLSc ...

  2. SQL学习笔记2

    2018.10.16:周二 --进阶   --别名 SELECT StuName,StuNum+','+StuClass+','+StuGender+','+StuPhone AS 信息 FROM S ...

  3. 查看.net frameword版本

    官方答案. 具体步骤如下: 1.打开注册表(Win+R,输入regedit): 2.输入注册表路径:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\NET Framewor ...

  4. jzoj3027

    根據打表找規律可得ans=c(k−n,n)∗an∗bk−nans=c(k-n,n)*a^n*b^{k-n}ans=c(k−n,n)∗an∗bk−n #include<bits/stdc++.h& ...

  5. GPS欺骗（一）—无人机的劫持

    本文作者:唯念那抹瑞利蓝 今天我们所讲的是GPS欺骗的方式和简单的定义.让大家对GPS欺骗这个方面有所了解.GPS是全世界地一个卫星定位系统,由美国制造. 0×01 例子2011年伊朗劫持美国无人机 ...

  6. Android安全防护防护———Android 端常见的安全问题

    Android安全防护防护——加密算法:传送门https://www.cnblogs.com/huangjialin/p/9694488.html 组件安全 activity劫持 简单来说就是正常的a ...

  7. HttpServletRequest和ServletRequest的区别以及HttpServletRequest对象方法的用法

    HttpServletRequest和ServletRequest都是接口 HttpServletRequest继承自ServletRequest HttpServletRequest比Servlet ...

  8. 更换SSL证书

    1.申请证书,需要提供完整域名(例如:xxx.aaa.com),会和证书完全匹配. 2.将证书上传到web服务器,例如我的nginx,在server中指定证书路径. 3.重启web服务器.(这个证书和 ...

  9. jsp文件和HTML互相引入的乱码问题

    1.在jsp中用include指令引入HTML文件时遇到的问题: jsp.html都可以正确的显示,当jsp引入html时访问jsp页面HTML出现乱码,jsp原有的输出无乱码,解决方法: 在HTML ...

  10. pods报错修复方法

    ### Error ``` RuntimeError - [!] Xcodeproj doesn't know about the following attributes {"inputF ...