当前位置: 首页 > 知识库问答 >
问题:

角度ui栅格动态计算栅格的高度

缪朝
2023-03-14

我正在使用 : https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18

<div ui-grid="gridOptions" style="height:765px"></div>

当我硬编码该值时,如上所示,网格展开,一切都按预期工作。

但是,如果我执行以下操作...

$scope.gridStyle = 'height:'+numRows*rowHeight+'px' //(765px);
<div ui-grid="gridOptions" style="{{gridStyle}}"></div>

高度在div中打印,div会变宽,但内容本身只会变宽到340px左右。剩下的空间是空白的,所以我看到的不是25行,而是8行。我必须向下滚动,而网格中有400像素的空间。ui网格视口和ui网格画布都不使用此空间。。。

为什么 ui-grid-viewport 不能使用该空间?

共有3个答案

邵轶
2023-03-14

.ui网格、.ui网格视口、,。ui网格内容包装器,.ui网格画布{height:auto!important;}

陶朝明
2023-03-14

一种更简单的方法是使用css设置并动态设置minRowsToShow虚拟化阈值值。

在样式表中:

.ui-grid, .ui-grid-viewport {
    height: auto !important;
}

在代码中,每次更改< code>gridOptions中的< code>data时,调用下面的函数。< code>maxRowToShow是您预定义的值,对于我的用例,我将其设置为25。

ES5:

setMinRowsToShow(){
    //if data length is smaller, we shrink. otherwise we can do pagination.
    $scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow);
    $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;
}
马阳曦
2023-03-14

我使用 ui-grid - v3.0.0-rc.20,因为当您进入容器的全高时,滚动问题已修复。使用 ui.grid.autoResize 模块将动态自动调整网格大小以适合您的数据。要计算网格的高度,请使用以下函数。ui-if 是可选的,用于在渲染之前等待数据设置完毕。

angular.module('app',['ui.grid','ui.grid.autoResize']).controller('AppController', ['uiGridConstants', function(uiGridConstants) {
    ...
    
    $scope.gridData = {
      rowHeight: 30, // set row height, this is default size
      ...
    };
  
    ...

    $scope.getTableHeight = function() {
       var rowHeight = 30; // your row height
       var headerHeight = 30; // your header height
       return {
          height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
       };
    };
      
    ...
<div ui-if="gridData.data.length>0" id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize ng-style="getTableHeight()"></div>
 类似资料:
  • 问题内容: 我正在使用:https : //github.com/angular-ui/ui-grid.info/tree/gh- pages/release/3.0.0-RC.18 当我对值进行硬编码时,如上所示,网格扩展了,一切都按预期工作。 但是,如果我执行以下操作… 高度打印在div中,并且div变宽,但是内容本身仅扩大到340px左右。剩下的空间是空白的,所以我只看到8行,而不是25行。

  • Framework7 有灵活的布局网格,允许你按需求放置内容: <!-- Each "cells" row should be wrapped with div class="row" --> <div class="row"> <!-- Each "cell" has col-[widht in percents] class --> <div class="col-50">50

  • 栅格系统简介: MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row,在列上添加 .mui-col-[sm|xs]-[1-12],即可 栅格参数: 尺寸 超小屏幕(<400px)(Extrasmall) 小屏幕(≥400px) Small 类前缀 .mui-col-xs-[1-12] .mui-col-sm-[1-12] 列(column)数 12 可嵌套

  • 定义 栅格布局组件。 图片展示 代码演示 import Grid from 'pile/dist/components/grid' <Grid flexCells> <div></div> <div></div> </Grid> 属性 参数 描述 数据类型 默认值 flexCells 是否flex布局 true

  • 在计算皮尔逊相关性时,下面的脚本对我来说也适用于相同的数据。我最近对其进行了调整,创建了一个协方差矩阵,以输入到pca中。我在论坛上读到,输入预先创建的协方差矩阵可能会避免记忆问题,但我的情况并非如此。运行协方差矩阵时,我会出现以下错误: 有人能提出一个更有效的方法来做到这一点,这样我就不会遇到内存问题了吗?如果我在计算协方差方面完全偏离了基础,那很好。PCA是我最终唯一需要的东西。我的数据是12

  • 栅格代数运算是运用代数学的观点对地理特征和现象进行空间分析,即对一个或多个栅格数据进行数学运算和函数运算。同时,运算得出的结果栅格数据的像元值是由一个或多个输入栅格数据的同一位置的像元值通过代数运算得到的。 为了更好的实现栅格代数运算功能,SuperMap 提供了丰富的运算符、函数和运算表达式,除了常用的算术运算(如加、减、乘、除和取整等)方法,还支持通过用户自定义的表达式,来进行栅格的算术运算、