angularjs ui-grid如何动态设置行高

本身开发的公众号，能够领取淘宝内部优惠券

在用ui-grid的时候咱们能够用rowHeight设置行高，但是每一行的高度都是同样的，没法根据行内的内容进行自适应。以下图

为了解决这个问题，google了几天时间找不到动态设置行高的方法。经过查看元素的结构发现这么点线索

 

能够发现每个row都是经过这样的template进行循环输出的，这样子就能够在这个模板上进行添加点样式，经过ui-grid的源代码咱们找到了下面两个模板

$templateCache.put('ui-grid/uiGridViewport',
            "<div role=\"rowgroup\" class=\"ui-grid-viewport\" ng-style=\"colContainer.getViewportStyle()\"><!-- tbody --><div class=\"ui-grid-canvas\" ><div style=\"height:{{grid.appScope.fixHeight(row)}}px\" ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\" class=\"ui-grid-row\" ng-style=\"Viewport.rowStyle(rowRenderIndex)\"><div role=\"row\" ui-grid-row=\"row\" row-render-index=\"rowRenderIndex\"></div></div></div></div>" ); $templateCache.put('ui-grid/ui-grid-row', "<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" style=\"height:{{grid.appScope.fixHeight(row)}}px\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>" );

这两个模板是ui-grid/uiGridViewport和ui-grid/ui-grid-row，为了实现效果不得不进行覆盖原有的模板。我加了style属性并调用当前controller的fixHeight方法，传入当前的row参数。

在fixHeight方法里面就能够获取row.entity属性获得当前行的实体进行相应的逻辑处理

 最终效果