13 496
правок
Изменения
м
"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
Нет описания правки
…Impossible in almost all JS grids with virtual scrolling.
https://www.ag-grid.com/javascript-grid-row-height/