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屬性獲得當前行的實體進行相應的邏輯處理

 最終效果