tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: default wrap headers.

Browse Source
This commit is contained in:
Chen Lily 2024-02-23 09:29:51 +08:00
parent c153b5a4c1
commit 63a50e6bcb
2 changed files with 72 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
lib/ui/css/grid.scss
View File

@ -26,7 +26,7 @@
--filter-transition: transform .12s ease, opacity .24s ease; --filter-transition: transform .12s ease, opacity .24s ease;
--row-height: 36px; --row-height: 36px;
--header-line-height: 26px; --header-line-height: 20px;
--text-indent: 8px; --text-indent: 8px;
--loading-size: 40px; --loading-size: 40px;
@ -83,9 +83,6 @@
color: var(--header-fore-color); color: var(--header-fore-color);
tr { tr {
position: sticky;
top: 0;
z-index: 2;
>th { >th {
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
@ -94,15 +91,16 @@
margin: 0; margin: 0;
word-wrap: break-word; word-wrap: break-word;
white-space: normal; white-space: normal;
position: relative; // position: relative;
top: 0;
position: sticky;
&.sticky { &.sticky {
position: sticky; position: sticky;
z-index: 3; z-index: 2;
} }
>div { >div {
border-bottom: 1px solid var(--header-border-color);
line-height: var(--header-line-height); line-height: var(--header-line-height);
min-height: var(--row-height); min-height: var(--row-height);
display: flex; display: flex;
@ -110,13 +108,17 @@
padding: var(--header-padding); padding: var(--header-padding);
box-sizing: border-box; box-sizing: border-box;
// overflow-x: hidden; // overflow-x: hidden;
border-right: 1px solid transparent; // border-right: 1px solid transparent;
transition: border-color .12s ease; // transition: border-color .12s ease;
>span { >span {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
&.wrap {
white-space: normal;
}
} }
>.ui-check-wrapper { >.ui-check-wrapper {
@ -186,20 +188,30 @@
cursor: ew-resize; cursor: ew-resize;
z-index: 2; z-index: 2;
// &::after { &::after {
// content: ''; content: '';
// height: 100%; height: 100%;
// width: 1px; width: 1px;
// display: block; display: block;
// margin: 0 auto; margin: 0 auto;
// transition: background-color .12s ease; transition: background-color .12s ease;
// } }
// &:hover::after { // &:hover::after {
// background-color: var(--split-border-color); // background-color: var(--split-border-color);
// } // }
} }
>em.bottom-border {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
z-index: 2;
background-color: var(--header-border-color);
}
>.dragger { >.dragger {
position: absolute; position: absolute;
left: 0; left: 0;
@ -247,8 +259,11 @@
} }
} }
&:hover>th>div { // &:hover>th>div {
border-color: var(--split-border-color); // border-color: var(--split-border-color);
// }
&:hover>th>.spliter::after {
background-color: var(--split-border-color);
} }
} }
} }
@ -457,7 +472,7 @@
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: visibility 0s linear .12s, opacity .12s ease; transition: visibility 0s linear .12s, opacity .12s ease;
z-index: 3; z-index: 2;
&.active { &.active {
visibility: visible; visibility: visible;
@ -476,7 +491,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 3; z-index: 2;
>div { >div {
background-color: var(--loading-fore-color); background-color: var(--loading-fore-color);
@ -507,7 +522,7 @@
opacity: 0; opacity: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 3; z-index: 2;
&.active { &.active {
transform: scaleY(1); transform: scaleY(1);

54
lib/ui/grid/grid.js
View File

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