Dynamic grid row height — различия между версиями
Материал из YourcmcWiki
(Новая страница: «https://www.ag-grid.com/javascript-grid-row-height/ "By default, the grid will display rows at 25px. You can change this for each row individually to give each r…») |
м |
||
| Строка 1: | Строка 1: | ||
https://www.ag-grid.com/javascript-grid-row-height/ | https://www.ag-grid.com/javascript-grid-row-height/ | ||
| − | + | «By default, the grid will display rows at 25px. You can change this for each row individually to give each row a different height.» | |
| + | |||
| + | * Use reasonable fixed minimum row height | ||
| + | * Always render (screen/minHeight) last rows | ||
| + | * Find maximum possible viewport start (in units of item number + % of item) | ||
| + | * Measure average height of last rows | ||
| + | * avgHeight = max(minHeight, lastRowAvgHeight) | ||
| + | * targetHeight = avgHeight*rowCount + headerHeight | ||
| + | * Set sizer to targetHeight | ||
| + | * scrollPos = targetHeight > offsetHeight ? min(1, scrollTop / (targetHeight — offsetHeight)) : 0 | ||
| + | * First visible item will be Math.floor(scrollPos*maxPossibleViewportStart) | ||
| + | * Additional scroll offset will be itemOffset = scrollPos*maxPossibleViewportStart-Math.floor(scrollPos*maxPossibleViewportStart)*firstVisibleItemHeight | ||
| + | * First (top) placeholder height will be scrollTop-firstVisibleItemHeight+itemOffset | ||
| + | * Second (middle) placeholder height will be avgHeight*nodeCount — sum(heights of all rendered rows) — (first placeholder height) | ||
Версия 13:54, 8 октября 2018
https://www.ag-grid.com/javascript-grid-row-height/
«By default, the grid will display rows at 25px. You can change this for each row individually to give each row a different height.»
- Use reasonable fixed minimum row height
- Always render (screen/minHeight) last rows
- Find maximum possible viewport start (in units of item number + % of item)
- Measure average height of last rows
- avgHeight = max(minHeight, lastRowAvgHeight)
- targetHeight = avgHeight*rowCount + headerHeight
- Set sizer to targetHeight
- scrollPos = targetHeight > offsetHeight ? min(1, scrollTop / (targetHeight — offsetHeight)) : 0
- First visible item will be Math.floor(scrollPos*maxPossibleViewportStart)
- Additional scroll offset will be itemOffset = scrollPos*maxPossibleViewportStart-Math.floor(scrollPos*maxPossibleViewportStart)*firstVisibleItemHeight
- First (top) placeholder height will be scrollTop-firstVisibleItemHeight+itemOffset
- Second (middle) placeholder height will be avgHeight*nodeCount — sum(heights of all rendered rows) — (first placeholder height)
