本文转自：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. 国内云计算的缺失环节: GPU并行计算（转）

    [IT时代周刊编者按]云计算特有的优点和巨大的商业前景,让其成为了近年来的IT界最热门词汇之一.当然,这也与中国移动互联网的繁荣紧密相关,它们需要有相应的云计算服务作为支撑.但本文作者祁海江结合自身的 ...

  2. .net图表之ECharts随笔09-pie环形图表

    这是最后的效果图 1. 这里title属性用到了富文本标签 官方文档是用的label属性,看得我一开始格外的懵逼.后面我尝试着在text中写入格式,没想到竟然成功了. rich中定义样式,在text中 ...

  3. MySQL使用 IN 查询取出数据排序问题（与in排序相同、不排序）

    MySQL使用 IN 查询取出数据排序问题(与in排序相同) 今天在项目中遇到一个问题,就是做一个最近浏览的功能,但是功能做出来了,取出数据时候要用到类似这么一条带in查询的sql语句, select ...

  4. ASP.NET webform多次提交表单问题

    最近几天遇到一个头疼的问题,项目采用的是webform开发,每个界面都有个提交按钮,点击多次提交按钮导致提交按钮的OnClick事件执行了多次, 每次OnClick里面都有一些逻辑处理,执行了多次导致 ...

  5. Jmeter——参数化的9种方法

    本文由作者张迎贞授权网易云社区发布. 一.用户定义的变量 1.右键快捷菜单中选择 添加-配置元件-用户自定义变量. 用户自定义变量中的定义的所有参数的值在测试计划的执行过程中不能发生取值的改变,因此一 ...

  6. Java中的split和join

    Javascript中的用于字符串和数组之间转换的split和join函数使用起来非常方便,在Java中也有这两个函数,只不过join是在apache commons的lang库里实现的. impor ...

  7. 检查网卡是否支持 SR-IOV

    [root@node1 ~]# lspci -nn | grep Eth 08:00.0 Ethernet controller [0200]: Intel Corporation I350 Giga ...

  8. Axure学习了解

    我这次介绍的原型设计工具为Axure 一.区域介绍 这是主界面: 左上区域显示原型的各个界面,可以添加新界面: 左中包含各种原型设计所包含的组件,例如文本框,图片等: 左下是各种模板,模板由自己设计, ...

  9. ifconfig-dropped

    drop的包是因为网卡的buffer满了 查看当前网卡的buffer size情况 ethtool -g eth0 Ring parameters for eth0: Pre-set maximums ...

  10. 聚类系数可变无标度网络模型Holme-Kim HK模型

    # -*- coding: cp936 -*- import random import networkx as nx from networkx.generators.classic import ...