feature: default wrap headers.

lib/ui/grid/grid.js

@@ -791,6 +791,13 @@ export class Grid {
      * @ignore
      */
     autoResize = true;
+    /**
+     * 列头是否允许换行
+     * @type {boolean}
+     * @default true
+     * @ignore
+     */
+    headerWrap = true;
     /**
      * 表格行高
      * @type {number}
@@ -1014,6 +1021,7 @@ export class Grid {
      * @property {GridLanguages} [langs] - 多语言资源对象
      * @property {number} [virtualCount=100] - 行数大于等于该值则启用虚模式
      * @property {boolean} [autoResize=true] - 未设置宽度的列自动调整列宽
+     * @property {boolean} [headerWrap=true] - 列头是否允许换行
      * @property {number} [rowHeight=36] - 表格行高
      * @property {number} [lineHeight=24] - 文本行高（多行文本列计算高度时使用）
      * @property {string} [filterIcon=ellipsis-h] - 列头未过滤时的图标
@@ -1521,16 +1529,11 @@ export class Grid {
                     width = col.width;
                 }
                 if (width > 0) {
-                    this._changeColumnWidth(i, width);
+                    this._changeColumnWidth(i, width, true);
                 }
             });
-        } else {
-            // const children = this._var.refs.table.children;
-            this._var.headerHeight = this.rowHeight; // children[0].offsetHeight;
-            if (this.total != null) {
-                this._var.footerHeight = this._var.refs.table.children[2].offsetHeight;
-            }
         }
+        this._layoutHeaderFooter();
     }
 
     /**
@@ -2241,6 +2244,9 @@ export class Grid {
                 caption.innerText = col.caption ?? '';
             }
             if (caption instanceof HTMLElement) {
+                if (this.headerWrap) {
+                    caption.classList.add('wrap');
+                }
                 if (col.captionStyle != null) {
                     caption.style.cssText = convertCssStyle(col.captionStyle);
                 }
@@ -2265,6 +2271,8 @@ export class Grid {
                 spliter.addEventListener('dblclick', e => this._onAutoResize(e, col));
                 th.appendChild(spliter);
             }
+            // bottom border
+            th.appendChild(createElement('em', 'bottom-border'));
             // tooltip
             // !nullOrEmpty(col.tooltip) && setTooltip(th, col.tooltip);
             header.appendChild(th);
@@ -2626,9 +2634,9 @@ export class Grid {
                     type.setEnabled(element, enabled);
                 }
                 // auto resize
-                if (this._var.needResize && this._get(col.key, 'autoResize')) {
+                if (this._var.needResize && widths != null && this._get(col.key, 'autoResize')) {
                     const width = element.scrollWidth + 12;
-                    if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) {
+                    if (width > 0 && (isNaN(widths[j]) || widths[j] < width)) {
                         widths[j] = width;
                         widths.flag = true;
                     }
@@ -2711,7 +2719,7 @@ export class Grid {
      * @param {number} index 
      * @param {number} width 
      */
-    _changeColumnWidth(index, width) {
+    _changeColumnWidth(index, width, freeze) {
         const col = this.columns[index];
         // const oldwidth = col.width;
         const w = `${width}px`;
@@ -2761,9 +2769,7 @@ export class Grid {
             }
         }
         // footer
-        // const children = this._var.refs.table.children;
-        const hasTotal = this.total != null;
-        if (hasTotal) {
+        if (this.total != null) {
             const footerCells = this._footerCells;
             element = footerCells[index];
             element.style.width = w;
@@ -2781,9 +2787,19 @@ export class Grid {
                 }
             }
         }
-        this._var.headerHeight = this.rowHeight; // children[0].offsetHeight;
-        if (hasTotal) {
-            this._var.footerHeight = this._var.refs.table.children[2].offsetHeight;
+        if (!freeze) {
+            this._layoutHeaderFooter();
+        }
+    }
+
+    /**
+     * @private
+     */
+    _layoutHeaderFooter() {
+        const children = this._var.refs.table.children;
+        this._var.headerHeight = this.headerWrap ? children[0].offsetHeight : this.rowHeight;
+        if (this.total != null) {
+            this._var.footerHeight = children[2].offsetHeight;
             const footerOffset = this._var.refs.table.offsetHeight - this._var.el.clientHeight;
             if (this._var.footerOffset !== footerOffset) {
                 this._var.footerOffset = footerOffset;
@@ -2951,12 +2967,12 @@ export class Grid {
             if (this.virtual) {
                 this._var.startIndex = top / rowHeight;
             }
-            this.refresh();
+            this._fillRows(this._tableRows, this.columns);
             if (this.virtual) {
                 this._var.refs.table.style.top = `${top}px`;
             }
         } else if (reload) {
-            this.refresh();
+            this._fillRows(this._tableRows, this.columns);
         }
 
         return top;
@@ -3593,7 +3609,7 @@ export class Grid {
         }
         if (this._var.isFirefox) {
             // 修复 firefox 下列头显示位置不正确的问题
-            debounce(this.refresh, RefreshInterval, this);
+            debounce(this._fillRows, RefreshInterval, this, this._tableRows, this.columns);
         }
     }