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

Compare commits

base: tsanie:dc2b67a33c8030fb067625d5b07ad2481bf7ebd8
Branches Tags
tsanie:master
..
compare: tsanie:7940edbea27469d15c8bbac30a5628d14206d1e7
Branches Tags
tsanie:master

2 Commits
dc2b67a33c ... 7940edbea2

Author SHA1 Message Date
Tsanie
7940edbea2 fix: grid column border-bottom issue. 2024-02-23 11:01:43 +08:00
Tsanie
c21f62b7b8 fix: grid hover position issue. 2024-02-23 10:52:30 +08:00
2 changed files with 17 additions and 9 deletions
Show Stats Expand all files Collapse all files

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

@ -202,7 +202,7 @@
// } // }
} }
>em.bottom-border { >.bottom-border {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;

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

@ -691,6 +691,12 @@ export class Grid {
* @private * @private
*/ */
footerOffset: null, footerOffset: null,
/**
* 容器宽度
* @type {number}
* @private
*/
wrapClientWidth: null,
/** /**
* 正文宽度 * 正文宽度
* @type {number} * @type {number}
@ -1369,7 +1375,7 @@ export class Grid {
}); });
holder.addEventListener('dblclick', e => this._onRowDblClicked(e)); holder.addEventListener('dblclick', e => this._onRowDblClicked(e));
wrapper.appendChild(holder); wrapper.appendChild(holder);
wrapper.addEventListener('mousemove', e => throttle(this._onGridMouseMove, HoverInternal, this, e, holder), { passive: true }); grid.addEventListener('mousemove', e => throttle(this._onGridMouseMove, HoverInternal, this, e, holder), { passive: true });
} }
// loading // loading
@ -1437,6 +1443,7 @@ export class Grid {
this.reload(keep); this.reload(keep);
} }
} }
this._var.wrapClientWidth = this._var.refs.wrapper.clientWidth;
this._var.bodyClientWidth = body.clientWidth; this._var.bodyClientWidth = body.clientWidth;
} }
@ -1491,7 +1498,7 @@ export class Grid {
if (!keep) { if (!keep) {
this._var.scrollTop = 0; this._var.scrollTop = 0;
this._var.el.scrollTop = 0; this._var.el.scrollTop = 0;
// this._var.el.scrollLeft = 0; this._var.el.scrollLeft = 0;
this._var.refs.table.style.top = '0px'; this._var.refs.table.style.top = '0px';
} }
this._adjustRows(this._var.refs.body); this._adjustRows(this._var.refs.body);
@ -2272,7 +2279,7 @@ export class Grid {
th.appendChild(spliter); th.appendChild(spliter);
} }
// bottom border // bottom border
th.appendChild(createElement('em', 'bottom-border')); th.appendChild(createElement('layer', 'bottom-border'));
// tooltip // tooltip
// !nullOrEmpty(col.tooltip) && setTooltip(th, col.tooltip); // !nullOrEmpty(col.tooltip) && setTooltip(th, col.tooltip);
header.appendChild(th); header.appendChild(th);
@ -2281,7 +2288,7 @@ export class Grid {
const draggerCursor = createElement('layer', 'dragger-cursor'); const draggerCursor = createElement('layer', 'dragger-cursor');
header.appendChild( header.appendChild(
createElement('th', null, createElement('th', null,
dragger, draggerCursor, createElement('div'), createElement('em', 'bottom-border'))); dragger, draggerCursor, createElement('div'), createElement('layer', 'bottom-border')));
sizer.replaceChildren(); sizer.replaceChildren();
this._var.refs.header = header; this._var.refs.header = header;
@ -3597,6 +3604,7 @@ export class Grid {
if (this.onBodyScrolled === 'function') { if (this.onBodyScrolled === 'function') {
this.onBodyScrolled(e); this.onBodyScrolled(e);
} }
this._var.scrollLeft = e.target.scrollLeft;
if (!this.virtual) { if (!this.virtual) {
if (this.total != null) { if (this.total != null) {
this._var.refs.footer.parentElement.style.bottom = `${this._var.footerOffset - e.target.scrollTop}px`; this._var.refs.footer.parentElement.style.bottom = `${this._var.footerOffset - e.target.scrollTop}px`;
@ -3659,15 +3667,15 @@ export class Grid {
const top = (parent.classList.contains('ui-grid-total-row') ? this._var.refs.footer.parentElement.offsetTop + 1 : target.offsetTop) + this._var.refs.table.offsetTop; const top = (parent.classList.contains('ui-grid-total-row') ? this._var.refs.footer.parentElement.offsetTop + 1 : target.offsetTop) + this._var.refs.table.offsetTop;
let left = target.offsetLeft; let left = target.offsetLeft;
let width = holder.offsetWidth; let width = holder.offsetWidth;
if (width > this._var.bodyClientWidth) { if (width > this._var.wrapClientWidth) {
width = this._var.bodyClientWidth; width = this._var.wrapClientWidth;
} }
const maxleft = this._var.bodyClientWidth + this._var.scrollLeft - width; const maxleft = this._var.wrapClientWidth + this._var.scrollLeft - width;
if (left > maxleft) { if (left > maxleft) {
left = maxleft; left = maxleft;
} }
const height = target.offsetHeight; const height = target.offsetHeight;
holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this._var.bodyClientWidth}px; height: ${height - 2}px`; holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this._var.wrapClientWidth}px; height: ${height - 2}px`;
holder.classList.add('active'); holder.classList.add('active');
} else if (holder.classList.contains('active')) { } else if (holder.classList.contains('active')) {
delete holder.dataset.row; delete holder.dataset.row;