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

feature: supports different icons in unfiltered/filtered status.

Browse Source
This commit is contained in:
Chen Lily 2024-02-22 15:51:44 +08:00
parent cad5a99eff
commit c153b5a4c1
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -806,12 +806,19 @@ export class Grid {
*/
lineHeight = 24;
/**
* 列头过滤图标，旧版本样式（横着三个点）需修改为 `ellipsis-h`
* 列头未过滤时的图标
* @type {string}
* @default "ellipsis-h"
* @ignore
*/
filterIcon = 'ellipsis-h';
/**
* 列头已过滤时的图标
* @type {string}
* @default "filter"
* @ignore
*/
filterIcon = 'filter';
filteredIcon = 'filter';
/**
* 列表底部留出额外的空白行
* @type {number}
@ -1009,7 +1016,8 @@ export class Grid {
* @property {boolean} [autoResize=true] - 未设置宽度的列自动调整列宽
* @property {number} [rowHeight=36] - 表格行高
* @property {number} [lineHeight=24] - 文本行高（多行文本列计算高度时使用）
* @property {string} [filterIcon=filter] - 列头过滤图标，旧版本样式（横着三个点）需修改为 `"ellipsis-h"`
* @property {string} [filterIcon=ellipsis-h] - 列头未过滤时的图标
* @property {string} [filteredIcon=filter] - 列头已过滤时的图标
* @property {number} [extraRows=0] - 列表底部留出额外的空白行
* @property {number} [filterRowHeight=30] - 过滤条件列表的行高
* @property {number} [height] - 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数
@ -1442,8 +1450,10 @@ export class Grid {
continue;
}
if (this.columns[i].filterValues != null) {
ele.replaceChildren(createIcon('fa-solid', this.filteredIcon));
ele.classList.add('active');
} else {
ele.replaceChildren(createIcon('fa-solid', this.filterIcon));
ele.classList.remove('active');
}
}
@ -1457,8 +1467,10 @@ export class Grid {
continue;
}
if (this.columns[i].filterValues != null) {
ele.replaceChildren(createIcon('fa-solid', this.filteredIcon));
ele.classList.add('active');
} else {
ele.replaceChildren(createIcon('fa-solid', this.filterIcon));
ele.classList.remove('active');
}
}
@ -3248,6 +3260,7 @@ export class Grid {
if (typeof col.onFiltered === 'function') {
col.onFiltered.call(this, col);
}
filter.replaceChildren(createIcon('fa-solid', this.filteredIcon));
filter.classList.add('active');
this._onCloseFilter();
});
@ -3261,6 +3274,7 @@ export class Grid {
if (typeof col.onFiltered === 'function') {
col.onFiltered.call(this, col);
}
filter.replaceChildren(createIcon('fa-solid', this.filterIcon));
filter.classList.remove('active');
this._onCloseFilter();
});