vDOM optimized

lib/ui/grid/grid.js

@@ -317,7 +317,7 @@ class Grid {
         this.#refs.body.scrollLeft = 0;
         this.#refs.bodyContent.style.top = '0px';
         this.#refs.bodyContainer.style.height = `${this.#containerHeight}px`;
-        this.#adjustRows(this.#refs.bodyContent);
+        // this.#adjustRows(this.#refs.bodyContent);
         this.refresh();
     }
 
@@ -325,9 +325,8 @@ class Grid {
         if (this.#refs.bodyContent == null) {
             throw new Error('body has not been created.');
         }
-        const rows = this.#refs.bodyContent.children;
         const widths = {};
-        this.#fillRows(rows, this.columns, widths);
+        this.#fillRows(widths);
         if (this.#needResize && widths.flag) {
             this.#needResize = false;
             this.columns.forEach((col, i) => {
@@ -644,19 +643,103 @@ class Grid {
         }
     }
 
-    #fillRows(rows, cols, widths) {
+    #fillRows(widths) {
+        let count = this.#rowCount;
+        if (isNaN(count) || count < 0 || !this.virtual) {
+            count = this.#currentSource.length;
+        }
+        const content = this.#refs.bodyContent;
+        // content.replaceChildren();
+        const cols = this.columns;
+        const vtable = this.#vtable;
+        const vnew = [];
         const startIndex = this.#startIndex;
+        // reuse
+        for (let i = 0; i < count; i++) {
+            const index = startIndex + i;
+            const e = vtable.findIndex(v => v.index === index);
+            if (e >= 0) {
+                vnew[i] = vtable.splice(e, 1)[0];
+            }
+        }
+        // move or create
+        for (let i = 0; i < count; i++) {
+            if (vnew[i] != null) {
+                continue;
+            }
+            const index = startIndex + i;
+            const e = vtable.splice(0, 1);
+            let vdom;
+            if (e.length > 0) {
+                vdom = {
+                    ...e[0],
+                    index,
+                    mode: 'move'
+                };
+                vdom.el.remove();
+            } else {
+                const row = createElement('tr', 'ui-grid-row');
+                cols.forEach((col, j) => {
+                    const cell = createElement('td');
+                    if (col.visible !== false) {
+                        cell.dataset.col = String(j);
+                        const style = this.#get(col.key, 'style');
+                        if (style != null) {
+                            for (let css of Object.entries(style)) {
+                                cell.style.setProperty(css[0], css[1]);
+                            }
+                        }
+                        if (col.css != null) {
+                            for (let css of Object.entries(col.css)) {
+                                cell.style.setProperty(css[0], css[1]);
+                            }
+                        }
+                        if (Grid.ColumnTypes.isCheckbox(col.type)) {
+                            cell.appendChild(GridCheckboxColumn.createEdit(e => this.#onRowChanged(e, exists + i, col, e.target.checked)));
+                            // this.#colTypes[col.key] = GridCheckboxColumn;
+                        } else {
+                            let type = this.#colTypes[col.key];
+                            if (type == null) {
+                                if (isNaN(col.type)) {
+                                    if (this.allowHtml && col.type != null) {
+                                        type = col.type;
+                                    }
+                                } else {
+                                    type = ColumnTypes[col.type];
+                                }
+                                type ??= GridColumn;
+                                this.#colTypes[col.key] = type;
+                            }
+                            cell.appendChild(type.create(col));
+                        }
+                    }
+                    row.appendChild(cell);
+                });
+                row.appendChild(createElement('td'));
+                vdom = {
+                    index,
+                    mode: 'create',
+                    el: row
+                };
+            }
+            vnew[i] = vdom;
+        }
+        this.#vtable = vnew;
+
         const selectedIndexes = this.#selectedIndexes;
-        [...rows].forEach((row, i) => {
-            const vals = this.#currentSource[startIndex + i];
+        vnew.filter(vdom => vdom.mode != null).forEach(vdom => {
+            const row = vdom.el;
+            const index = vdom.index;
+            const vals = this.#currentSource[index];
             if (vals == null) {
                 return;
             }
             if (!isPositive(row.children.length)) {
                 return;
             }
+            row.dataset.row = String(index);
             const item = vals.values;
-            const selected = selectedIndexes.indexOf(startIndex + i) >= 0;
+            const selected = selectedIndexes.indexOf(index) >= 0;
             if (selected) {
                 row.classList.add('selected');
             } else if (row.classList.contains('selected')) {
@@ -687,6 +770,7 @@ class Grid {
                 val ??= '';
                 // fill
                 const cell = row.children[j];
+                cell.dataset.row = String(index);
                 if (typeof col.bgFilter === 'function') {
                     const bgColor = col.bgFilter(item);
                     cell.style.backgroundColor = bgColor ?? '';
@@ -697,10 +781,10 @@ class Grid {
                 if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
                     if (vals.__editing?.[col.key] && type.editing) {
                         val = type.getValue({ target: cell.children[0] });
-                        this.#onRowChanged(null, startIndex + i, col, val, true);
+                        this.#onRowChanged(null, index, col, val, true);
                     }
                     element = selected ?
-                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), col, this.#refs.bodyContent, vals) :
+                        type.createEdit(e => this.#onRowChanged(e, index, col, type.getValue(e)), col, this.#refs.bodyContent, vals) :
                         type.create(col);
                     cell.replaceChildren(element);
                 } else {
@@ -754,6 +838,8 @@ class Grid {
                 delete vals.__editing;
             }
         });
+
+        content.replaceChildren(...vnew.map(vdom => vdom.el));
     }
 
     #changeColumnWidth(index, width) {