本文转自：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. 如何使用T-SQL备份还原数据库及c#如何调用执行？

    准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup database 数据库名 to disk='保存路径 ...

  2. 一般处理程序获取Layui上传的图片

    asp.net利用一般处理程序获取用户上传的图片,上传图片利用的layui 前台页面 <%@ Page Language="C#" AutoEventWireup=" ...

  3. 基于vs2012的C# winform抽奖小程序的总结

    哈希表的使用 Hashtable hashtable = new Hashtable(); hashtable.ContainsValue(tmp);//判断哈希表中有没有tmp hashtable. ...

  4. c# is 和 as 的区别和使用

    1:is 是判断类型,用于检查对象是否与给定类型兼容,不成功则不会抛出异常,如果兼容则返回true,如果不兼容则返回false.在进行类型转换之前用 f (P_obj is System.String ...

  5. LayaAir从入门到放弃

    我是一个小白程序员,准备开发小程序找了很久小程序开发引擎,看到白鹭和LayaAir .经过一番资料查找后被LayaAir高性能.接口简洁及社区活跃所吸引,然后选择了LayaAir. 开发过程中一般小问 ...

  6. Caliburn.Micro（MVVM框架）

    一.首启窗体设置 1. 创建一个新的WPF应用程序并添加NuGet包:Caliburn.Micro 2. 删除项目自带的主窗口文件MainWindow.xaml 3. 在App.xaml项目文件中,删 ...

  7. Kotlin 初体验

    本文由作者邹丽萍授权网易云社区发布. 背景 Kotlin 是 JetBrains 公司(著名的 IntelliJ IDEA 正是由这家公司开发的,Android Studio 也是基于 IDEA 的) ...

  8. .NET Core中使用Dapper操作Oracle存储过程最佳实践

    为什么说是最佳实践呢?因为在实际开发中踩坑了,而且发现网上大多数文章给出的解决方法都不能很好地解决问题.尤其是在获取类型为OracleDbType.RefCursor,输出为:ParameterDir ...

  9. A - Subsequence （算法 二分 ）

    点击打开链接 A sequence of N positive integers (10 < N < 100 000), each of them less than or equal 1 ...

  10. LCS2 - Longest Common Substring II(spoj1812)(sam(后缀自动机)+多串LCS)

    A string is finite sequence of characters over a non-empty finite set \(\sum\). In this problem, \(\ ...