在Angular UI ng-grid中關閉滾動？

我們想使用Angular UI ng-grid，但似乎無法找到一個選項來告訴網格內的視口不要將溢出設置爲auto並且不能滾動。在Angular UI ng-grid中關閉滾動？

我們想要做的是根據我們網格中行數的大小，將表格/網格高度設爲動態。我們有固定的最大行數，所以不用擔心DOM中的行數過多。

任何建議去哪裏？

2013-08-16 RullDawg

我最近遇到了同樣的問題，並找到了解決辦法，在https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY

你想有數據後要初始化ng-grid。

以下解決方案需要採用了棱角分明的UI：

<div ui-if="dataForGrid.length>0" ng-grid="gridOptions" ng-style="getTableStyle()" /> 

$scope.getTableStyle= function() { 
    var rowHeight=30; 
    var headerHeight=45; 
    return { 
     height: ($scope.dataForGrid.length * rowHeight + headerHeight) + "px" 
    }; 
};

來源

2013-12-19 18:11:06 Dharmesh

我試過了，我寫道：ng-style =「height：{{formData.watchCountData.length * 30}} px」>但它不起作用:( – Dejell

是有一個插件，它提供這樣的設施及其ng-grid-flexible-height.js

你可以看到plunker如何其使用

來源

2013-08-17 12:39:34

維諾德 - 謝謝你，但你的plunker沒有解決什麼我請求。我希望網格根據行數調整其高度。最終我不希望網格中有任何滾動條。我想使用整個文檔滾動條代替。 – RullDawg

除非我誤解了你的要求，你不想在網格中滾動條，但是在網格中也沒有滾動條，並根據行數調整高度 –

我已經將更多行添加到分支你的重擊[更新的重擊]（http://plnkr.co/edit/ghrGd1X9XO8wb6E8YUs7?p=preview）。我看到的是一張高約10行的桌子，但網格中有50多個。我在網格中看到一個滾動條。 – RullDawg

在你的CSS，你可以嘗試重寫包含行div的height，所以行不溢出容器：

.ngViewport { 
    height: auto !important; 
}

您還可以使用行背景顏色填充滾動條的ng-grid葉子的空白區域（儘管不幸的是數據最後一個單元格不會擴展以填補空白）：

.ngCanvas { 
    width: 100% !important; 
} 
.ngRow { 
    width: 100% !important; 
}

根據您的表格佈局，您可能還需要更改一些其他樣式，但這些是主要樣式。還要注意不要爲整個ngGrid設置一個高度。

來源

2014-02-27 07:13:09

該方法當然可行...但它看起來不正確，因爲這些行沒有將全角擴展到不再可見的滾動條列。 – CalvinDale

是的，我之前沒有注意到，我希望CSS更容易實現但不幸的是它似乎並不如此:(我已經更新了我的答案，但在滾動條的末端仍然存在死空間 - 我還沒有弄清楚如何使最後一個單元格適合剩餘寬度 –

這些似乎對我有用。刪除了滾動條所在的空白空間，只是在最後一列的單元格邊框處有一些空格，但我可以忍受 - 比以前更好。 –

添加這對你的CSS將解決你的問題：

.ngViewport{ 
    height:auto !important; 
} 
.ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel { 
    width: 100% !important; 
} 
.ngRow { 
    border-bottom:none !important; 
}

來源

2014-05-20 08:56:54 suf

我將把'.ngViewport'離開第二個列表，並用'.ngHeaderContainer'替代'.ngTopPanel'。 'ngViewport'應該從'ngCanvas'獲得它的大小，就像'ngTopPanel'應該和'ngHeaderContainer'一起工作。 – jwg

在Angular UI ng-grid中關閉滾動？

回答

相關問題