本文转自：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. linux常用命令大全（linux基础命令入门到精通+命令备忘录+面试复习+实例）

    作者:蓝藻(罗蓝国度) 创建时间:2018.7.3 编辑时间:2019.4.29 前言 本文特点 授之以渔:了解命令学习方法.用途:不再死记硬背,拒绝漫无目的: 准确无误:所有命令执行通过(环境为ce ...

  2. sql语句应考虑哪些安全性？

    (1)少使用root账户,应该为不同的动作分配不同的账户: (2)sql执行出错后,不能把数据库中显示的出错信息,直接展示给用户.防止泄露服务器和数据库相关信息: (3)防止sql注入,对特殊字符进行 ...

  3. centos6.2 下安装并配置hadoop1.0.4（32位安装）

      一,环境准备 1.  集群内所有电脑需要设置防火墙,下面以master为例说明: 切换到root用户下,执行setup指令:

  4. js面试题——找到数组中的重复元素并判断重复次数且输出重复元素

    var countArr = [1,2,3,4,5,6,3,4,3,3,7,8,9,32,1,11,2,3,3,3]; var res = {}; var maxnum=0; var max; fun ...

  5. jvm内存结构(一)(结构总览)

    jvm内存结构:<Java虚拟机原理图解>3.JVM运行时数据区 程序计数器: ,是执行的字节码的行号指示器,记录的是正在执行的虚拟机字节码指令的地址. ,每个线程都有独立计数器,互不干扰 ...

  6. android 代码实现back键功能

    方案一,简单但响应慢: doExec("input keyevent 4"); public String doExec(String cmd) { String s = &quo ...

  7. 手把手教你如何安装和使用Karma-Jasmine

    注意:本文中出现的资料链接.karma的插件安装等,均可能需要翻$墙后才能正确执行. Jasmine是一个Javascript的测试工具,在Karma上运行Jasmine可完成Javascript的自 ...

  8. 线程安全单例最佳实践，C#中的Lazy是如何保证线程安全的

    在.NET 4.0之后,.NET Framework中提供了一种安全的延迟加载类型LazyLazy能够在多线程环境下,保证GetValue函数只执行一次,从而实现单例模式 在过去,实现单例模式我们通常 ...

  9. 为Linux集群创建新账户，并配置hadoop集群

    转自:http://blog.csdn.net/bluesky8640/article/details/6945776 之前装python.jdk.hadoop都是用的root账户,这是一个绝对的失策 ...

  10. python实现二叉树的建立以及遍历（递归前序、中序、后序遍历，队栈前序、中序、后序、层次遍历）

    #-*- coding:utf-8 -*- class Node: def __init__(self,data): self.data=data self.lchild=None self.rchi ...