Изменения

Перейти к: навигация, поиск

Dynamic grid row height

2163 байта добавлено, 11:19, 8 октября 2018
м
Нет описания правки
…Impossible in almost all JS grids with virtual scrolling.
 
https://www.ag-grid.com/javascript-grid-row-height/
"By «By default, the grid will display rows at 25px. You can change this for each row individually to give each row a different height."» «Grid, fixed row height (no word wrap, no multi line) — Grid — Kendo UI …» But we have a solution :) * 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* {{cmd|1=avgHeight = max(minHeight, lastRowAvgHeight)}}* {{cmd|1=targetHeight = avgHeight*rowCount + headerHeight}}* Set sizer to targetHeight* {{cmd|1=scrollPos = targetHeight > offsetHeight ? min(1, scrollTop / (targetHeight - offsetHeight)) : 0}}* First visible item will be {{cmd|1=Math.floor(scrollPos*maxPossibleViewportStart)}}* Additional scroll offset will be {{cmd|1=itemOffset = scrollPos*maxPossibleViewportStart - Math.floor(scrollPos*maxPossibleViewportStart)*firstVisibleItemHeight}}* First (top) placeholder height will be {{cmd|1=scrollTop-firstVisibleItemHeight+itemOffset}}* Second (middle) placeholder height will be {{cmd|1=avgHeight*nodeCount - sum(heights of all rendered rows) - (first placeholder height)}} I.e. it’s like: <pre>state = { avgRowHeight, topPlaceholderHeight, firstVisibleItem, middleItemCount, middlePlaceholderHeight, lastItemCount, itemScrollTop, viewportHeight } <top placeholder>middleItemCount ? <middle items> : nullmiddlePlaceholderHeight ? <middle placeholder> : null<last items></pre> * Initial render: 0 / 0 / 0 / 0* Render 1: set viewportHeight, set lastItemCount => 0 / 0 / 0 / set* Render 2: set itemScrollHeight (scroll height in items+%), set avgRowHeight, set sizer targetHeight, set firstVisibleItem => set / set / 0 / set* Render 3: set middlePlaceholderHeight, (for a table with fixed column: sync fixed column row heights) => set / set / set / set* After that each scroll takes 2 renders to complete (re-render items, re-set placeholder height)* If it’s not a table then it’s possible to do absolute positioning instead of placeholders and only do a single render by positioning last items at the bottom of scroll container, because we already know targetHeight before the first render of two

Навигация