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

virtual mode issue fix.

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-25 15:51:43 +08:00
parent d7728ebfd6
commit 0be2078c45
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: visible; overflow: visible;
overflow-x: hidden;
& { & {
--cell-hover-bg-color: lightyellow; --cell-hover-bg-color: lightyellow;
@ -77,7 +78,6 @@
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
table-layout: fixed; table-layout: fixed;
position: relative;
tr { tr {
position: relative; position: relative;
@ -438,6 +438,7 @@
text-indent: 16px; text-indent: 16px;
width: 100%; width: 100%;
font-size: var(--font-smaller-size); font-size: var(--font-smaller-size);
height: var(--line-height);
line-height: var(--line-height); line-height: var(--line-height);
} }

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

@ -133,10 +133,9 @@ class Grid {
if (this.#colAttrs.__filtered === true) { if (this.#colAttrs.__filtered === true) {
this.#currentSource = list.filter(it => { this.#currentSource = list.filter(it => {
for (let col of this.columns) { for (let col of this.columns) {
const f = this.#get(col.key, 'filter'); if (Array.isArray(col.filterValues)) {
if (Array.isArray(f)) {
const v = this.#getItemValue(it.values, col.key, col.filter); const v = this.#getItemValue(it.values, col.key, col.filter);
if (f.indexOf(v) < 0) { if (col.filterValues.indexOf(v) < 0) {
return false; return false;
} }
} }
@ -154,10 +153,9 @@ class Grid {
this.#rowCount = -1; this.#rowCount = -1;
if (this.sortIndex >= 0) { if (this.sortIndex >= 0) {
this.sortColumn(true); this.sortColumn();
} else {
this.resize();
} }
this.resize();
} }
get virtual() { return this.#currentSource?.length > this.virtualCount } get virtual() { return this.#currentSource?.length > this.virtualCount }
@ -271,7 +269,7 @@ class Grid {
this.#el = grid; this.#el = grid;
this.#rendering = false; this.#rendering = false;
if (this.sortIndex >= 0) { if (this.#source != null && this.sortIndex >= 0) {
this.sortColumn(); this.sortColumn();
} }
} }
@ -300,7 +298,7 @@ class Grid {
} else if (isNaN(height) || height < 0) { } else if (isNaN(height) || height < 0) {
height = this.#el.offsetHeight - top; height = this.#el.offsetHeight - top;
} }
const count = truncate((height - 1) / (this.rowHeight + 1)) * (RedumCount * 2) + 1; const count = truncate((height - 1) / (this.rowHeight + 1)) + (RedumCount * 2) + 1;
if (force || count !== this.#rowCount) { if (force || count !== this.#rowCount) {
this.#rowCount = count; this.#rowCount = count;
this.reload(); this.reload();
@ -401,6 +399,9 @@ class Grid {
if (this.#colAttrs.__filtered === true) { if (this.#colAttrs.__filtered === true) {
this.#currentSource.sort(comparer); this.#currentSource.sort(comparer);
} }
if (this.#rowCount < 0) {
return;
}
if (reload) { if (reload) {
this.reload(); this.reload();
} else { } else {
@ -1101,7 +1102,7 @@ class Grid {
if (typeof col.onFilterOk === 'function') { if (typeof col.onFilterOk === 'function') {
col.onFilterOk.call(this, col, array); col.onFilterOk.call(this, col, array);
} else { } else {
this.#set(col.key, 'filter', array.map(a => a.value)); col.filterValues = array.map(a => a.value);
} }
this.#colAttrs.__filtered = true; this.#colAttrs.__filtered = true;
this.#refreshSource(); this.#refreshSource();
@ -1115,8 +1116,8 @@ class Grid {
createElement('button', reset => { createElement('button', reset => {
reset.innerText = this.langs.reset; reset.innerText = this.langs.reset;
reset.addEventListener('click', () => { reset.addEventListener('click', () => {
this.#set(col.key, 'filter', null); delete col.filterValues;
this.#colAttrs.__filtered = this.columns.some(c => this.#get(c.key, 'filter') != null) this.#colAttrs.__filtered = this.columns.some(c => col.filterValues != null)
this.#refreshSource(); this.#refreshSource();
if (typeof col.onFiltered === 'function') { if (typeof col.onFiltered === 'function') {
col.onFiltered.call(this, col); col.onFiltered.call(this, col);
@ -1145,9 +1146,8 @@ class Grid {
const content = createElement('div', 'filter-content'); const content = createElement('div', 'filter-content');
content.style.top = `${rowHeight}px`; content.style.top = `${rowHeight}px`;
this.#set(col.key, 'filterSource', array); this.#set(col.key, 'filterSource', array);
const filter = this.#get(col.key, 'filter');
for (let item of array) { for (let item of array) {
item.__checked = !Array.isArray(filter) || filter.indexOf(item.value ?? item) >= 0; item.__checked = !Array.isArray(col.filterValues) || col.filterValues.indexOf(item.value ?? item) >= 0;
} }
if (array.length > 12) { if (array.length > 12) {
array = array.slice(0, 12); array = array.slice(0, 12);