fix: do not change scroll position when refreshing grid.
fix: change `button` to `span`, avoiding conflict styles.
This commit is contained in:
parent
38bad864e0
commit
5e53d04174
@ -595,11 +595,14 @@
|
||||
justify-content: flex-end;
|
||||
padding: 4px;
|
||||
|
||||
>button {
|
||||
>.button {
|
||||
box-sizing: border-box;
|
||||
padding-inline: 6px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
min-width: 40px;
|
||||
height: var(--filter-line-height);
|
||||
line-height: var(--filter-line-height);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
@ -625,8 +628,10 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
>button {
|
||||
>.button {
|
||||
margin-right: 6px;
|
||||
padding-inline: 6px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
line-height: 28px;
|
||||
color: var(--title-color);
|
||||
@ -634,6 +639,7 @@
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: var(--title-bg-color);
|
||||
|
||||
@ -1558,8 +1558,9 @@ export class Grid {
|
||||
/**
|
||||
* 根据当前排序字段进行列排序
|
||||
* @param {boolean} [reload] - 为 `true` 则在列排序后调用 [reload]{@linkcode Grid#reload} 方法
|
||||
* @param {boolean} [keep] - 重载后是否保持当前滚动位置
|
||||
*/
|
||||
sortColumn(reload) {
|
||||
sortColumn(reload, keep) {
|
||||
const index = this.sortIndex;
|
||||
const col = this.columns[index];
|
||||
if (col == null) {
|
||||
@ -1587,7 +1588,7 @@ export class Grid {
|
||||
return;
|
||||
}
|
||||
if (reload) {
|
||||
this.reload();
|
||||
this.reload(keep);
|
||||
} else {
|
||||
this.refresh();
|
||||
}
|
||||
@ -1596,8 +1597,9 @@ export class Grid {
|
||||
/**
|
||||
* 根据当前排序列数组进行多列排序
|
||||
* @param {boolean} [reload] - 为 `true` 则在多列排序后调用 [reload]{@linkcode Grid#reload} 方法
|
||||
* @param {boolean} [keep] - 重载后是否保持当前滚动位置
|
||||
*/
|
||||
sort(reload) {
|
||||
sort(reload, keep) {
|
||||
const sortArray = this.sortArray;
|
||||
if (sortArray == null || sortArray.length === 0) {
|
||||
return;
|
||||
@ -1624,7 +1626,7 @@ export class Grid {
|
||||
return;
|
||||
}
|
||||
if (reload) {
|
||||
this.reload();
|
||||
this.reload(keep);
|
||||
} else {
|
||||
this.refresh();
|
||||
}
|
||||
@ -1674,7 +1676,7 @@ export class Grid {
|
||||
rowChanged(index);
|
||||
}
|
||||
buttonWrapper.append(
|
||||
createElement('button', null,
|
||||
createElement('span', 'button',
|
||||
createIcon('fa-light', 'plus'),
|
||||
createElement('span', span => {
|
||||
span.innerText = this.langs.addLevel;
|
||||
@ -1692,7 +1694,7 @@ export class Grid {
|
||||
});
|
||||
})
|
||||
),
|
||||
createElement('button', 'ui-button-delete',
|
||||
createElement('span', 'button ui-button-delete',
|
||||
createIcon('fa-light', 'times'),
|
||||
createElement('span', span => {
|
||||
span.innerText = this.langs.deleteLevel;
|
||||
@ -1710,7 +1712,7 @@ export class Grid {
|
||||
});
|
||||
})
|
||||
),
|
||||
createElement('button', 'ui-button-copy',
|
||||
createElement('span', 'button ui-button-copy',
|
||||
createIcon('fa-light', 'copy'),
|
||||
createElement('span', span => {
|
||||
span.innerText = this.langs.copyLevel;
|
||||
@ -1728,8 +1730,8 @@ export class Grid {
|
||||
});
|
||||
})
|
||||
),
|
||||
createElement('button', button => {
|
||||
button.className = 'ui-button-move-up';
|
||||
createElement('span', button => {
|
||||
button.className = 'button ui-button-move-up';
|
||||
const icon = createIcon('fa-light', 'chevron-up');
|
||||
icon.addEventListener('click', () => {
|
||||
const index = grid.selectedIndex;
|
||||
@ -1746,8 +1748,8 @@ export class Grid {
|
||||
});
|
||||
button.appendChild(icon);
|
||||
}),
|
||||
createElement('button', button => {
|
||||
button.className = 'ui-button-move-down';
|
||||
createElement('span', button => {
|
||||
button.className = 'button ui-button-move-down';
|
||||
const icon = createIcon('fa-light', 'chevron-down');
|
||||
icon.addEventListener('click', () => {
|
||||
const index = grid.selectedIndex;
|
||||
@ -2081,9 +2083,10 @@ export class Grid {
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {GridItemWrapper[]} list
|
||||
* @param {GridItemWrapper[]} [list]
|
||||
*/
|
||||
_refreshSource(list) {
|
||||
const keep = list == null;
|
||||
list ??= this._var.source;
|
||||
if (this._var.colAttrs.__filtered === true) {
|
||||
this._var.currentSource = list.filter(it => {
|
||||
@ -2114,11 +2117,11 @@ export class Grid {
|
||||
|
||||
this.resize(true, false, () => {
|
||||
if (this.sortIndex >= 0) {
|
||||
this.sortColumn(true);
|
||||
this.sortColumn(true, keep);
|
||||
} else if (this.sortArray?.length > 0) {
|
||||
this.sort(true);
|
||||
this.sort(true, keep);
|
||||
} else {
|
||||
this.reload();
|
||||
this.reload(keep);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -3276,7 +3279,8 @@ export class Grid {
|
||||
// function
|
||||
const functions = createElement('div', 'filter-function');
|
||||
functions.append(
|
||||
createElement('button', ok => {
|
||||
createElement('span', ok => {
|
||||
ok.className = 'button';
|
||||
ok.innerText = this.langs.ok;
|
||||
ok.addEventListener('click', () => {
|
||||
const array = this._get(col.key, 'filterSource').filter(i => i.__checked !== false);
|
||||
@ -3300,7 +3304,8 @@ export class Grid {
|
||||
this._onCloseFilter();
|
||||
});
|
||||
}),
|
||||
createElement('button', reset => {
|
||||
createElement('span', reset => {
|
||||
reset.className = 'button';
|
||||
reset.innerText = this.langs.reset;
|
||||
reset.addEventListener('click', () => {
|
||||
delete col.filterValues;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user