javascript Angular ng-grid 行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19094723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular ng-grid row height
提问by Poonam Gokani
is there any way to apply the height of the row in ng-grid according to its content. there is one option rowHeight which is changed the height of all row. But I want dynamic row height according to its content.
有什么方法可以根据其内容在 ng-grid 中应用行的高度。有一个选项 rowHeight 可以更改所有行的高度。但我想要根据其内容动态行高。
Following is the Plunker I have made, in this I have used cellTemplate to insert Education field, But I want to increase the row height according to education field detail.
以下是我制作的Plunker，在此我使用cellTemplate 插入Education 字段，但我想根据education 字段详细信息增加行高。
http://plnkr.co/edit/tQJNpB?p=preview
http://plnkr.co/edit/tQJNpB?p=preview
According to this link it is not possible: [1]https://github.com/angular-ui/ng-grid/issues/157
根据此链接，这是不可能的：[1] https://github.com/angular-ui/ng-grid/issues/157
But if anyone find the solution.....
但如果有人找到解决方案......
回答by Yair Tavor
These classes will make the table act as actual table, using display table-row and table-cell.
这些类将使表格充当实际表格，使用显示表格行和表格单元格。
.ngCell {
display : table-cell;
height: auto !important;
overflow:visible;
position: static;
}
.ngRow {
display : table-row;
height: auto !important;
position: static;
}
.ngCellText{
height: auto !important;
white-space: normal;
overflow:visible;
}
Please note that this is supported by IE8 and up. It's also overriding the entire ng grid classes so it will be wise to use on a "need to" base:
请注意，IE8 及更高版本支持此功能。它还覆盖了整个 ng 网格类，因此在“需要”基础上使用是明智的：
#myTableId .ngCell {...}
#myTableId .ngRow {...}
...
回答by user3250966
Researching this discovered that in my fix should call anonymous function $scope.resizeViewPortwhenever it makes change to ngGrid data or should be called whenever the viewport rows are updated.
对此进行研究后发现，在我的修复程序中，$scope.resizeViewPort每当更改 ngGrid 数据时都应调用匿名函数，或者在视口行更新时应调用匿名函数。
Examples are after angular performs updates to the rows via data from the ng-grid module. I've found these steps useful in my anonymous function for height only:
示例是在 angular 通过来自 ng-grid 模块的数据对行执行更新之后。我发现这些步骤在我的匿名函数中仅对高度有用：
$scope.resizeViewPort = function { // and the two steps below
// retrieve viewPortHeight
var viewportHeight = $('ngViewPort').height();
var gridHeight = $('ngGrid').height();
// set the .ngGridStyle or the first parent of my ngViewPort in current scope
var viewportHeight = $('.ngViewport').height();
var canvasHeight = $('.ngCanvas').height();
var gridHeight = $('.ngGrid').height();
alert("vp:" + viewportHeight + " cv:" + canvasHeight + " gh:" + gridHeight);
var finalHeight = canvasHeight;
var minHeight = 150;
var maxHeight = 300;
// if the grid height less than 150 set to 150, same for > 300 set to 300
if (finalHeight < minHeight) {
finalHeight = minHeight;
} else if (finalHeight > viewportHeight) {
finalHeight = maxHeight;
}
$(".ngViewport").height(finalHeight);
}
回答by jeffreynolte
I wanted to chime in on this question. I have followed up on this example and have used the solution provided by getuliojr. This solution seems to work pretty well, note that you will have to clone the fork and build the source in order to use in your app. I have a plunker live of it working: http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview
我想插话说这个问题。我已经跟进了这个例子，并使用了 getuliojr 提供的解决方案。这个解决方案似乎工作得很好，请注意，您必须克隆 fork 并构建源代码才能在您的应用程序中使用。我有一个 plunker 现场直播：http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview
Note you will also need to add 2 css rules:
请注意，您还需要添加 2 条 css 规则：
.ngCellText{
white-space:normal !important;
}
.ngVerticalBarVisible{
height: 100% !important;
}
I have yet to test this under significant load or cross-browser but will update with more once I do.
我还没有在大量负载或跨浏览器下测试过这个，但一旦我这样做就会更新更多。
GH Repo for ng-grid with flexible height by getuliojr: https://github.com/getuliojr/ng-grid/commits/master
getuliojr 用于具有灵活高度的 ng-grid 的 GH 回购：https: //github.com/getuliojr/ng-grid/commits/master
回答by Chris Stephens
None of these solutions will work completely. The height being fixed is assumed all through out the code. It is typical with row virtualization to assume this because you aren't loading up all the rows at once so its very difficult to tell the ultimate height of the grid. NGrid 3.0 is supposed to support dynamic row height but I'm not sure when it is expected to be ready.
这些解决方案都不会完全奏效。整个代码都假定高度是固定的。行虚拟化通常会假设这一点，因为您不会一次加载所有行，因此很难判断网格的最终高度。NGrid 3.0 应该支持动态行高，但我不确定它何时准备就绪。
回答by kashyaphp
Adapt-Strap. Here is the fiddle.
It is extremely lightweight and has dynamic row heights.
它非常轻巧，并具有动态行高。
<ad-table-lite table-name="carsForSale"
column-definition="carsTableColumnDefinition"
local-data-source="models.carsForSale"
page-sizes="[7, 20]">
</ad-table-lite>
回答by btm1
it's not the sexiest thing in the world and I doubt it's that performant but this does the trick:
这不是世界上最性感的东西，我怀疑它的性能，但这确实有效：
function flexRowHeight() {
var self = this;
self.grid = null;
self.scope = null;
self.init = function (scope, grid, services) {
self.domUtilityService = services.DomUtilityService;
self.grid = grid;
self.scope = scope;
var adjust = function() {
setTimeout(function(){
var row = $(self.grid.$canvas).find('.ngRow'),
offs;
row.each(function(){
var mh = 0,
s = angular.element(this).scope();
$(this).find('> div').each(function(){
var h = $(this)[0].scrollHeight;
if(h > mh)
mh = h
$(this).css('height','100%');
});
$(this).height(mh)
if(offs)
$(this).css('top',offs + 'px');
offs = $(this).position().top + mh;
self.scope.$apply(function(){
s.rowHeight = mh;
});
});
},1);
}
self.scope.$watch(self.grid.config.data, adjust, true);
}
}
execute using plugins in options:
在选项中使用插件执行：
plugins: [new flexRowHeight()]
