add support to resize or reorder.

css/grid.scss

@@ -13,6 +13,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    overflow-x: hidden;
 
     & {
         --hover-bg-color: lightyellow;
@@ -24,6 +25,7 @@
         --dark-border-color: #666;
         --split-border-color: #b3b3b3;
         --dragger-bg-color: #fff;
+        --dragger-cursor-color: #333;
         --row-bg-color: #fff;
         --row-active-bg-color: #fafafa;
         --row-selected-bg-color: #e6f2fb;
@@ -42,9 +44,10 @@
         --arrow-size: 4px;
         --split-width: 8px;
         --dragger-size: 20px;
-        --dragger-opacity: .4;
+        --dragger-opacity: .6;
         --dragger-cursor-size: 4px;
-        --dragger-cursor-opacity: .6;
+        --dragger-cursor-pos: -4px;
+        --dragger-cursor-opacity: .3;
 
         --header-padding: 4px 12px 4px 8px;
         --spacing-s: 4px;
@@ -83,65 +86,112 @@
         table-layout: fixed;
         position: relative;
 
-        th {
+        tr {
-            padding: 0;
-            margin: 0;
-            word-wrap: break-word;
-            white-space: normal;
             position: relative;
 
-            >div {
+            >th {
-                line-height: var(--header-line-height);
+                padding: 0;
-                min-height: var(--line-height);
+                margin: 0;
-                display: flex;
+                word-wrap: break-word;
-                align-items: center;
+                white-space: normal;
-                padding: var(--header-padding);
+                position: relative;
-                box-sizing: border-box;
-            }
 
-            >.arrow {
+                >div {
-                width: 0;
+                    line-height: var(--header-line-height);
-                height: 0;
+                    min-height: var(--line-height);
-                top: 50%;
+                    display: flex;
-                margin-top: calc(0px - var(--arrow-size) / 2);
+                    align-items: center;
-                right: calc(var(--arrow-size) / 2);
+                    padding: var(--header-padding);
-                position: absolute;
+                    box-sizing: border-box;
-
+                    overflow-x: hidden;
-                &.asc {
-                    border-bottom: var(--arrow-size) solid var(--dark-border-color);
                 }
 
-                &.desc {
+                >.arrow {
-                    border-top: var(--arrow-size) solid var(--dark-border-color);
+                    width: 0;
+                    height: 0;
+                    top: 50%;
+                    margin-top: calc(0px - var(--arrow-size) / 2);
+                    right: calc(var(--arrow-size) / 2);
+                    position: absolute;
+
+                    &.asc {
+                        border-bottom: var(--arrow-size) solid var(--dark-border-color);
+                    }
+
+                    &.desc {
+                        border-top: var(--arrow-size) solid var(--dark-border-color);
+                    }
+
+                    &.asc,
+                    &.desc {
+                        border-left: var(--arrow-size) solid transparent;
+                        border-right: var(--arrow-size) solid transparent;
+                    }
                 }
 
-                &.asc,
+                >.spliter {
-                &.desc {
+                    position: absolute;
-                    border-left: var(--arrow-size) solid transparent;
-                    border-right: var(--arrow-size) solid transparent;
-                }
-            }
-
-            >.spliter {
-                position: absolute;
-                height: 100%;
-                top: 0;
-                right: calc(0px - var(--split-width) /2);
-                width: var(--split-width);
-                cursor: ew-resize;
-                z-index: 1;
-
-                &::after {
-                    content: '';
                     height: 100%;
-                    width: 1px;
+                    top: 0;
-                    display: block;
+                    right: calc(0px - var(--split-width) /2);
-                    margin: 0 auto;
+                    width: var(--split-width);
-                    transition: background-color .12s ease;
+                    cursor: ew-resize;
+                    z-index: 1;
+
+                    &::after {
+                        content: '';
+                        height: 100%;
+                        width: 1px;
+                        display: block;
+                        margin: 0 auto;
+                        transition: background-color .12s ease;
+                    }
+
+                    &:hover::after {
+                        background-color: var(--split-border-color);
+                    }
                 }
 
-                &:hover::after {
+                >.dragger {
-                    background-color: var(--split-border-color);
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    min-width: var(--dragger-size);
+                    height: 100%;
+                    background-color: var(--dragger-bg-color);
+                    opacity: var(--dragger-opacity);
+                    display: none;
+                }
+
+                >.dragger-cursor {
+                    position: absolute;
+                    top: 0;
+                    height: 100%;
+                    border: 1px solid var(--dragger-cursor-color);
+                    box-sizing: border-box;
+                    margin-left: 0;
+                    opacity: var(--dragger-cursor-opacity);
+                    display: none;
+                    transition: left .12s ease;
+
+                    &::before {
+                        top: -1px;
+                        border-top: var(--dragger-cursor-size) solid;
+                    }
+
+                    &::after {
+                        bottom: -1px;
+                        border-bottom: var(--dragger-cursor-size) solid;
+                    }
+
+                    &::before,
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: var(--dragger-cursor-pos);
+                        border-left: var(--dragger-cursor-size) solid transparent;
+                        border-right: var(--dragger-cursor-size) solid transparent;
+                    }
                 }
             }
         }

lib/ui/grid.html

@@ -38,10 +38,10 @@
       grid.height = 0;
       grid.columns = [
         { key: 'c1', caption: 'column 1' },
-        { key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
+        { key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
         {
           key: 'c2a',
-          caption: 'column 2 a',
+          caption: '下拉',
           type: Grid.ColumnTypes.Dropdown,
           source: [
             { value: 'off', text: 'Off' },
@@ -53,7 +53,7 @@
         },
         {
           key: 'c2b',
-          caption: 'column 2 b',
+          caption: '自定义',
           type: statusCol,
           enabled: 'enabled'
         },
@@ -62,7 +62,6 @@
       ];
       grid.cellClicked = (rId, cId) => {
         console.log(`row (${rId}), column (${cId}) clicked.`);
-        return false;
       };
       grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`);
       grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`);

lib/ui/grid.js

@@ -17,6 +17,28 @@ const RedumCount = 4;
 const MiniDragOffset = 4;
 const MiniColumnWidth = 50;
 
+function getClientX(e) {
+    if (e == null) {
+        return null;
+    }
+    const cx = e.touches && e.touches[0]?.clientX;
+    return cx ?? e.clientX;
+}
+
+function getOffsetLeftFromWindow(element) {
+    let left = 0;
+    while (element != null) {
+        left += element.offsetLeft;
+        element = element.offsetParent;
+    }
+    return left;
+}
+
+function indexOfParent(target) {
+    // return [...target.parentElement.children].indexOf(target);
+    return Array.prototype.indexOf.call(target.parentElement.children, target);
+}
+
 class GridColumn {
     static create() { return document.createElement('span') }
 
@@ -430,7 +452,7 @@ class Grid {
         }
         const direction = this.sortDirection;
         [...this.#refs.header.children].forEach((th, i) => {
-            const arrow = th.children[1]; // th.querySelector('layer.arrow');
+            const arrow = th.querySelector('.arrow');
             if (arrow == null) {
                 return;
             }
@@ -497,9 +519,9 @@ class Grid {
             if (col.visible === false) {
                 const hidden = document.createElement('th');
                 hidden.style.display = 'none';
-                if (col.sortable === true) {
+                if (col.sortable !== false) {
                     hidden.dataset.key = col.key;
-                    hidden.addEventListener('click', e => this.#onHeaderClicked(col, e, true));
+                    hidden.addEventListener('click', e => this.#onHeaderClicked(e, col, true));
                 }
                 header.appendChild(hidden);
                 continue;
@@ -538,13 +560,19 @@ class Grid {
             }
             // element
             const th = document.createElement('th');
+            th.className = 'column';
             th.dataset.key = col.key;
             for (let css of Object.entries(col.style)) {
                 th.style.setProperty(css[0], css[1]);
             }
-            th.style.cursor = col.sortable ? 'pointer' : 'auto';
+            if (col.sortable) {
-            th.addEventListener('click', e => this.#onHeaderClicked(col, e));
+                th.style.cursor = 'pointer';
-            th.addEventListener('mousedown', e => this.#onDragStart(col, e));
+                th.addEventListener('click', e => this.#onHeaderClicked(e, col));
+            }
+            if (col.orderable !== false) {
+                col.orderable = true;
+                th.addEventListener('mousedown', e => this.#onDragStart(e, col));
+            }
             const wrapper = document.createElement('div');
             th.appendChild(wrapper);
             if (col.enabled !== false && col.allcheck && isCheckbox) {
@@ -575,7 +603,7 @@ class Grid {
             if (col.resizable !== false) {
                 const spliter = document.createElement('layer');
                 spliter.className = 'spliter';
-                spliter.addEventListener('mousedown', e => this.#onResizeStart(col, e));
+                spliter.addEventListener('mousedown', e => this.#onResizeStart(e, col));
                 th.appendChild(spliter);
             }
             // tooltip
@@ -621,9 +649,9 @@ class Grid {
         const bodyContent = document.createElement('table');
         bodyContent.className = 'grid-body-content';
         bodyContent.addEventListener('mousedown', e => {
-            let { parent, target } = this.#getRowTarget(e.target);
+            let [parent, target] = this.#getRowTarget(e.target);
-            const rowIndex = [...parent.parentElement.children].indexOf(parent);
+            const rowIndex = indexOfParent(parent);
-            let colIndex = [...parent.children].indexOf(target);
+            let colIndex = indexOfParent(target);
             if (colIndex >= this.columns.length) {
                 colIndex = -1;
             }
@@ -840,6 +868,118 @@ class Grid {
         //     width = this.#refs.bodyContainer.offsetWidth - oldwidth + width;
         //     this.#refs.bodyContainer.style.width = `${width}px`;
         // }
+        for (let i = 0; i < this.#currentSource.length; i += 1) {
+            const keyid = (i << MaxColumnBit) | index;
+            if (this.#overflows.hasOwnProperty(keyid)) {
+                delete this.#overflows[keyid];
+            }
+        }
+    }
+
+    #changingColumnOrder(index, offset, x, offsetLeft) {
+        const children = this.#refs.header.children;
+        let element = children[index];
+        this.#refs.dragger.style.left = `${element.offsetLeft - offsetLeft + offset}px`;
+        this.#refs.dragger.style.width = element.style.width;
+        this.#refs.dragger.style.display = 'block';
+        offset = x - getOffsetLeftFromWindow(element);
+        let idx;
+        if (offset < 0) {
+            offset = -offset;
+            for (let i = index - 1; i >= 0 && offset >= 0; i -= 1) {
+                element = children[i];
+                if (element == null || element.className !== 'column') {
+                    break;
+                }
+                if (offset < element.offsetWidth) {
+                    idx = (offset > element.offsetWidth / 2) ? i : i + 1;
+                    break;
+                }
+                offset -= element.offsetWidth;
+            }
+            idx ??= 0;
+        } else {
+            const count = children.length;
+            for (let i = index; i < count - 1 && offset >= 0; i += 1) {
+                element = children[i];
+                if (element == null || element.className !== 'column') {
+                    idx = i;
+                    break;
+                }
+                if (offset < element.offsetWidth) {
+                    idx = (offset > element.offsetWidth / 2) ? i + 1 : i;
+                    break;
+                }
+                offset -= element.offsetWidth;
+            }
+            idx ??= count - 1;
+        }
+        if (idx !== this.#colAttrs.orderIndex) {
+            this.#colAttrs.orderIndex = idx;
+            element = children[idx];
+            if (element == null) {
+                return;
+            }
+            this.#refs.draggerCursor.style.left = `${element.offsetLeft - offsetLeft}px`;
+            this.#refs.draggerCursor.style.display = 'block';
+        }
+    }
+
+    #changeColumnOrder(index) {
+        this.#refs.dragger.style.display = '';
+        this.#refs.draggerCursor.style.display = '';
+        const orderIndex = this.#colAttrs.orderIndex;
+        if (orderIndex >= 0 && orderIndex !== index) {
+            let targetIndex = orderIndex - index;
+            if (targetIndex >= 0 && targetIndex <= 1) {
+                return;
+            }
+            const header = this.#refs.header;
+            const children = header.children;
+            const rows = this.#refs.bodyContent.children;
+            const columns = this.columns;
+            if (targetIndex > 1) {
+                targetIndex = orderIndex - 1;
+                // const current = columns[index];
+                // for (let i = index; i < targetIndex; i += 1) {
+                //     columns[i] = columns[i + 1];
+                // }
+                // columns[targetIndex] = current;
+                const current = columns.splice(index, 1)[0];
+                columns.splice(targetIndex, 0, current);
+                header.insertBefore(children[index], children[targetIndex].nextElementSibling);
+                for (let row of rows) {
+                    row.insertBefore(row.children[index], row.children[targetIndex].nextElementSibling);
+                }
+            } else {
+                targetIndex = orderIndex;
+                // const current = columns[index];
+                // for (let i = index; i > targetIndex; i -= 1) {
+                //     columns[i] = columns[i - 1];
+                // }
+                // columns[targetIndex] = current;
+                const current = columns.splice(index, 1)[0];
+                columns.splice(targetIndex, 0, current);
+                header.insertBefore(children[index], children[targetIndex]);
+                for (let row of rows) {
+                    row.insertBefore(row.children[index], row.children[targetIndex]);
+                }
+            }
+            // refresh sortIndex
+            [...children].forEach((th, i) => {
+                const arrow = th.querySelector('.arrow');
+                if (arrow == null) {
+                    return;
+                }
+                if (arrow.className !== 'arrow') {
+                    this.sortIndex = i;
+                }
+            });
+
+            if (typeof this.columnChanged === 'function') {
+                this.columnChanged(ColumnChangedType.Reorder, index, targetIndex);
+            }
+        }
     }
 
     #scrollToTop(top, reload) {
@@ -877,15 +1017,19 @@ class Grid {
         while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
             target = parent;
         }
-        return { parent, target };
+        return [parent, target];
     }
 
-    #onHeaderClicked(col, e, force) {
+    #notHeader(tagName) {
+        return /^(input|label|layer|svg|use)$/i.test(tagName);
+    }
+
+    #onHeaderClicked(e, col, force) {
         const attr = this.#colAttrs[col.key];
         if (!force && attr != null && (attr.resizing || attr.dragging)) {
             return;
         }
-        if (col.sortable && !/^(label|layer|svg|use)$/i.test(e.target.tagName)) {
+        if (!this.#notHeader(e.target.tagName)) {
             const index = this.columns.indexOf(col);
             if (index < 0) {
                 return;
@@ -902,9 +1046,108 @@ class Grid {
         }
     }
 
-    #onDragStart(col, e) { }
+    #onDragStart(e, col) {
+        if (this.#notHeader(e.target.tagName)) {
+            return;
+        }
+        const cx = getClientX(e);
+        const index = indexOfParent(e.currentTarget);
+        const clearEvents = attr => {
+            for (let event of ['mousemove', 'mouseup']) {
+                if (attr.hasOwnProperty(event)) {
+                    window.removeEventListener(event, attr[event]);
+                    delete attr[event];
+                }
+            }
+        };
+        let attr = this.#colAttrs[col.key];
+        if (attr == null) {
+            attr = this.#colAttrs[col.key] = {};
+        } else {
+            clearEvents(attr);
+        }
+        attr.dragging = true;
+        const offsetLeft = this.#refs.header.querySelector('th:last-child').offsetLeft;
+        const dragmove = e => {
+            const cx2 = getClientX(e);
+            const offset = cx2 - cx;
+            let pos = attr.offset;
+            let dragging;
+            if (pos == null && (offset > MiniDragOffset || offset < -MiniDragOffset)) {
+                dragging = true;
+            } else if (pos !== offset) {
+                dragging = true;
+            }
+            if (dragging) {
+                this.#changingColumnOrder(index, offset, cx2, offsetLeft);
+                attr.offset = offset;
+            }
+        };
+        attr.mousemove = e => throttle(dragmove, RefreshInterval, this, e);
+        attr.mouseup = () => {
+            clearEvents(attr);
+            if (attr.offset == null) {
+                delete attr.dragging;
+            } else {
+                setTimeout(() => {
+                    delete attr.dragging;
+                    delete attr.offset;
+                });
+                this.#changeColumnOrder(index);
+                if (typeof this.columnChanged === 'function') {
+                    this.columnChanged(ColumnChangedType.Reorder, index);
+                }
+            }
+        };
+        ['mousemove', 'mouseup'].forEach(event => window.addEventListener(event, attr[event]));
+    }
 
-    #onResizeStart(col, e) { }
+    #onResizeStart(e, col) {
+        const cx = getClientX(e);
+        const width = col.width;
+        const index = indexOfParent(e.currentTarget.parentElement);
+        const window = this.window ?? global;
+        const clearEvents = attr => {
+            for (let event of ['mousemove', 'mouseup']) {
+                if (attr.hasOwnProperty(event)) {
+                    window.removeEventListener(event, attr[event]);
+                    delete attr[event];
+                }
+            }
+        };
+        let attr = this.#colAttrs[col.key];
+        if (attr == null) {
+            attr = this.#colAttrs[col.key] = {};
+        } else {
+            clearEvents(attr);
+        }
+        attr.resizing = width;
+        const resizemove = e => {
+            const cx2 = getClientX(e);
+            const val = width + (cx2 - cx);
+            if (val < MiniColumnWidth) {
+                return;
+            }
+            attr.resizing = val;
+            this.#changeColumnWidth(index, val);
+        };
+        attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
+        attr.mouseup = e => {
+            clearEvents(attr);
+            const width = attr.resizing;
+            if (width != null) {
+                col.autoResize = false;
+                setTimeout(() => delete attr.resizing);
+                this.#changeColumnWidth(index, width);
+                if (typeof this.columnChanged === 'function') {
+                    this.columnChanged(ColumnChangedType.Resize, index, width);
+                }
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        ['mousemove', 'mouseup'].forEach(event => window.addEventListener(event, attr[event]));
+    }
 
     #onColumnAllChecked(col, flag) {
         if (this.#currentSource == null) {
@@ -934,7 +1177,11 @@ class Grid {
     }
 
     #onScroll(e) {
-        this.#scrollLeft = e.target.scrollLeft;
+        const left = e.target.scrollLeft;
+        if (this.#scrollLeft !== left) {
+            this.#scrollLeft = left;
+            this.#refs.header.style.left = `${-left}px`;
+        }
         if (!this.virtual) {
             return;
         }
@@ -946,7 +1193,7 @@ class Grid {
         if (e.target.classList.contains('grid-hover-holder')) {
             return;
         }
-        let { parent, target } = this.#getRowTarget(e.target);
+        let [parent, target] = this.#getRowTarget(e.target);
         let keyid = target.keyid;
         if (parent == null || keyid == null) {
             delete holder.keyid;