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

sync

Browse Source
This commit is contained in:
Chen Lily
2024-01-25 14:56:31 +08:00
parent 07f87bfb9d
commit 9ab9edb44d
18 changed files with 594 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
lib/ui/grid/column.d.ts vendored
View File

@ -1,69 +1,220 @@
import { Grid, GridItem, GridItemWrapper, GridSourceItem } from "./grid";
import { DropdownOptions } from "../dropdown";
import { Dropdown, DropdownOptions } from "../dropdown";
/** 列类型枚举 */
interface GridColumnType {
/** 通用列 */
0: "Common";
/** 单行文本框列 */
1: "Input";
/** 下拉选择列 */
2: "Dropdown";
/** 复选框列 */
3: "Checkbox";
/** 图标列 */
4: "Icon";
/** 多行文本列 */
5: "Text";
/** 日期选择列 */
6: "Date";
}
/** 列定义接口 */
export interface GridColumnDefinition {
/** 列关键字，默认以该关键字从行数据中提取单元格值，行数据的关键字属性值里包含 DisplayValue 则优先显示此值 */
key?: string;
/** 列的类型，可以为 {@linkcode GridColumn} 的子类，或者内置类型 {@linkcode GridColumnType} */
type?: keyof GridColumnType | typeof GridColumn;
/** 列标题文本 */
caption?: string;
/** 列标题的元素样式 */
captionStyle?: { [key: string]: string };
/** 大于 0 则设置为该宽度，否则根据列内容自动调整列宽 */
width?: Number;
/** 列对齐方式 */
align?: "left" | "center" | "right";
/**
* 列是否可用（可编辑），允许以下类型<br/><br/>
* <code>boolean</code> 则直接使用该值<br/><br/>
* <code>string</code> 则以该值为关键字从行数据中取值作为判断条件<br/><br/>
* <code>(item: GridItem | any) => boolean</code> 则调用该函数（上下文为列定义对象），以返回值作为判断条件<br/><br/>
*/
enabled?: boolean | string | ((item: GridItem | any) => boolean);
css?: { [key: string]: string };
styleFilter?: (item: GridItem | any) => { [key: string]: string };
visible?: boolean;
resizable?: boolean;
sortable?: boolean;
orderable?: boolean;
allcheck?: boolean;
events?: { [event: string]: any };
attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
allowFilter?: boolean;
/** 单元格取值采用该方法返回的值 */
filter?: (item: GridItem | any) => any;
sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
bgFilter?: (item: GridItem | any) => string;
dropOptions?: DropdownOptions;
source?: Array<GridSourceItem | any> | ((item: GridItem | any) => Array<GridSourceItem | any> | Promise<Array<GridSourceItem | any>>);
iconType?: string;
iconClassName?: string | ((item: GridItem | any) => string);
/** 单元格以该值填充内容，忽略filter与关键字属性 */
text?: string;
/** 列是否可见 */
visible?: boolean;
/** 列是否允许调整宽度 */
resizable?: boolean;
/** 列是否允许排序 */
sortable?: boolean;
/** 列是否允许重排顺序 */
orderable?: boolean;
/** 列为复选框类型时是否在列头增加全选复选框 */
allcheck?: boolean;
/** 单元格css样式对象（仅在重建行元素时读取） */
css?: { [key: string]: string };
/** 根据返回值填充单元格样式（填充行列数据时读取） */
styleFilter?: (item: GridItem | any) => { [key: string]: string };
/** 根据返回值设置单元格背景色 */
bgFilter?: (item: GridItem | any) => string;
/** 给单元格元素附加事件（事件函数上下文为数据行对象） */
events?: { [event: string]: any };
/** 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持函数返回对象 */
attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
/** 是否允许进行列头过滤 */
allowFilter?: boolean;
/** 自定义列过滤器的数据源（函数上下文为Grid） */
filterSource?: Array<GridItem | any> | ((col: GridColumnDefinition) => Array<GridItem | any>);
/** 自定义列排序函数 */
sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
/** 列为下拉列表类型时以该值设置下拉框的参数 */
dropOptions?: DropdownOptions;
/** 列为下拉列表类型时以该值设置下拉列表数据源，支持函数返回，也支持返回异步对象 */
source?: Array<GridSourceItem | any> | ((item: GridItem | any) => Array<GridSourceItem | any> | Promise<Array<GridSourceItem | any>>);
/** 下拉列表数据源是否缓存结果（即行数据未发生变化时仅从source属性获取一次值） */
sourceCache?: boolean;
/** 列为图标类型时以该值设置图标样式（函数上下文为列定义对象），允许值为 <code>fa-light</code>、<code>fa-regular</code>、<code>fa-solid</code> */
iconType?: string;
/** 列为图标类型时以该值作为单元格元素的额外样式类型（函数上下文为列定义对象） */
iconClassName?: string | ((item: GridItem | any) => string);
/** 列为日期类型时以该值作为最小可选日期值 */
dateMin?: string;
/** 列为日期类型时以该值作为最大可选日期值 */
dateMax?: string;
/** 以返回值额外设置单元格的tooltip（函数上下文为列定义对象） */
tooltip?: string | ((item: GridItem | any) => string);
/**
* 列头复选框改变时触发
* @param this 上下文为 Grid 对象
* @param col 列定义对象
* @param flag 是否选中
*/
onAllChecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
/**
* 单元格发生变化时触发
* @param this 上下文为 Grid 对象
* @param item 数据行对象
* @param value 修改后的值
* @param oldValue 修改前的值
* @param e 列修改事件传递过来的任意对象
*/
onChanged?: (this: Grid, item: GridItem | any, value: boolean | any, oldValue: any, e?: any) => void;
/**
* 文本单元格在输入完成时触发的事件
* @param this 上下文为 Grid 对象
* @param item 数据行对象
* @param value 修改后的文本框值
*/
onInputEnded?: (this: Grid, item: GridItem | any, value: string) => void;
/**
* 列过滤点击OK时触发的事件
* @param this 上下文为 Grid 对象
* @param col 列定义对象
* @param selected 选中的过滤项
*/
onFilterOk?: (this: Grid, col: GridColumnDefinition, selected: Array<GridItem | any>) => void;
/**
* 列过滤后触发的事件
* @param this 上下文为 Grid 对象
* @param col 列定义对象
*/
onFiltered?: (this: Grid, col: GridColumnDefinition) => void;
/**
* 列为下拉框类型时在下拉列表展开时触发的事件
* @param this 上下文为列定义对象
* @param item 数据行对象
* @param drop 下拉框对象
*/
onDropExpanded?: (this: GridColumnDefinition, item: GridItem | any, drop: Dropdown) => void;
}
/** 列定义基类 */
export class GridColumn {
/**
* 创建显示单元格时调用的方法
* @param col 列定义对象
* @returns 返回创建的单元格元素
*/
static create(col: GridColumnDefinition): HTMLElement;
/**
* 创建编辑单元格时调用的方法<br/><br/>
* 元素修改后设置行包装对象的 <code>__editing</code> 后，支持在离开编辑状态时及时触发 {@linkcode leaveEdit} 方法<br/>
* 更多例子参考代码中 {@linkcode GridDropdownColumn} 的实现。
* @param trigger 编辑事件回调函数，e 参数会传递给 {@linkcode getValue} 方法
* @param col 列定义对象
* @param container 父容器元素
* @param vals 行包装对象，其 <code>values</code> 属性为行数据对象
* @returns 返回创建的编辑状态的单元格元素
*/
static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, container: HTMLElement, vals: GridItemWrapper): HTMLElement;
static setValue(element: HTMLElement, val: any, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
static getValue(e: any, col: GridColumnDefinition): any;
/**
* 设置单元格值时调用的方法
* @param element 单元格元素
* @param val 待设置的单元格值
* @param vals 行包装对象
* @param col 列定义对象
* @param grid {@linkcode Grid} 对象
*/
static setValue(element: HTMLElement, val: string | boolean | any, vals: GridItemWrapper, col: GridColumnDefinition, grid: Grid): void;
/**
* 获取编辑状态单元格值时调用的方法
* @param e 由 {@linkcode createEdit} 方法中 <code>trigger</code> 函数传递来的对象
* @param col 列定义对象
* @returns 返回单元格的值
*/
static getValue(e: any, col: GridColumnDefinition): string | boolean | any;
/**
* 设置单元格样式时调用的方法
* @param element 单元格元素
* @param style 样式对象
*/
static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
/**
* 设置单元格可用性时调用的方法
* @param element 单元格元素
* @param enabled 启用值，为false时代表禁用
*/
static setEnabled(element: HTMLElement, enabled?: boolean): void;
}
export class GridInputColumn extends GridColumn {
static get editing(): boolean;
}
export class GridTextColumn extends GridInputColumn { }
export class GridDropdownColumn extends GridColumn {
/**
* 单元格离开编辑元素时触发，需要由行包装对象的 <code>__editing</code> 来确定是否触发。
* @param element 单元格元素
* @param container 父容器元素
*/
static leaveEdit(element: HTMLElement, container: HTMLElement): void;
}
/** 单行文本列 */
export class GridInputColumn extends GridColumn {
/**
* 设置该类型是否支持触发 {@linkcode GridColumnDefinition.onInputEnded} 方法<br/>
* 该属性返回 <code>true</code> 后，在任意事件中修改行包装对象的 <code>__editing</code> 值，则会在行列元素变动时及时触发 {@linkcode GridColumnDefinition.onInputEnded} 方法，避免例如文本框还未触发 <code>onchange</code> 事件就被移除元素而导致的问题<br/>
* 更多例子参考代码中 {@linkcode GridInputColumn} 的实现
*/
static get editing(): boolean;
}
/** 多行文本列 */
export class GridTextColumn extends GridInputColumn { }
/** 下拉选择列 */
export class GridDropdownColumn extends GridColumn { }
/** 复选框列 */
export class GridCheckboxColumn extends GridColumn { }
/** 图标列 */
export class GridIconColumn extends GridColumn { }
/** 日期选择列 */
export class GridDateColumn extends GridColumn {
/**
* 格式化日期对象为 M/d/yyyy 格式的字符串
* @param date 日期对象
* @returns 返回格式化后的字符串
*/
static formatDate(date: Date): string;
}

53
lib/ui/grid/column.js
View File

@ -105,13 +105,13 @@ export class GridTextColumn extends GridInputColumn {
const SymbolDropdown = Symbol.for('ui-dropdown');
export class GridDropdownColumn extends GridColumn {
static createEdit(trigger, col, wrapper, it) {
static createEdit(trigger, col, container, it) {
const drop = new Dropdown({
...col.dropOptions,
wrapper
wrapper: container.parentElement
});
drop.onselected = trigger;
drop.onexpanded = function () {
drop.onSelected = trigger;
drop.onExpanded = function () {
if (it.__editing == null) {
it.__editing = {
[col.key]: true
@ -211,8 +211,8 @@ export class GridDropdownColumn extends GridColumn {
drop.disabled = enabled === false;
}
static leaveEdit(element, wrapper) {
wrapper.querySelectorAll('.ui-drop-box.active').forEach(e => {
static leaveEdit(element, container) {
container.parentElement.querySelectorAll('.ui-drop-box.active').forEach(e => {
if (e != null) {
e.classList.remove('active');
}
@ -221,8 +221,8 @@ export class GridDropdownColumn extends GridColumn {
if (drop == null) {
return;
}
if (drop?.multiselect && typeof drop.oncollapsed === 'function') {
drop.oncollapsed();
if (drop?.multiSelect && typeof drop.onCollapsed === 'function') {
drop.onCollapsed();
}
}
}
@ -286,7 +286,16 @@ export class GridIconColumn extends GridColumn {
}
export class GridDateColumn extends GridColumn {
static createEdit(trigger, col) {
static createEdit(trigger, col, _container, vals) {
let enabled = col.enabled;
if (typeof enabled === 'string') {
enabled = vals.values[enabled];
} else if (typeof enabled === 'function') {
enabled = col.enabled(vals.values);
}
if (enabled === false) {
return super.create();
}
const date = createElement('input', 'ui-grid-date-cell');
date.required = true;
date.type = 'date';
@ -306,25 +315,45 @@ export class GridDateColumn extends GridColumn {
if (isNaN(val) || /^\d{4}-\d{2}-\d{2}$/.test(val)) {
element.value = val;
} else {
val = new Date((val - 621355968e9) / 10000);
val = new Date((val - 621355968e9) / 1e4);
const month = String(val.getMonth() + 1).padStart(2, '0');
const date = String(val.getDate()).padStart(2, '0');
element.value = `${val.getFullYear()}-${month}-${date}`;
}
} else {
element.innerText = val;
element.innerText = this.formatDate(val);
}
}
static getValue(e) {
return e.target?.value;
const date = e.target?.valueAsDate;
if (date instanceof Date && !isNaN(date)) {
const year = date.getFullYear();
if (year < 1900 || year > 9999) {
return '';
}
return String(date.getTime() * 1e4 + 621355968e9);
}
return '';
}
static setEnabled(element, enabled) {
element.disabled = enabled === false;
}
static _resolveDate(s) {
if (s instanceof Date) {
return s;
}
const ticks = Number(s);
if (!isNaN(ticks) && ticks > 0) {
return new Date((ticks - 621355968e9) / 1e4);
}
return new Date(s);
}
static formatDate(date) {
date = this._resolveDate(date);
if (date instanceof Date && !isNaN(date)) {
return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
}

161
lib/ui/grid/grid.d.ts vendored
View File

@ -1,93 +1,244 @@
import { GridColumnDefinition } from "./column"
/** 列数据接口 */
export interface GridItem {
/** 值 */
Value: any;
/** 显示值 */
DisplayValue: string;
}
/** 列数据行包装接口 */
export interface GridItemWrapper {
values: Array<GridItem | any>;
/** 真实数据对象 */
values: { [key: string]: GridItem | any };
/** 下拉数据源缓存对象 */
source: { [key: string]: Array<GridSourceItem> };
}
/** 下拉框列数据源接口 */
export interface GridSourceItem {
/** 值 */
value: string;
/** 显示文本 */
text: string;
}
/** 列排序枚举 */
interface GridColumnDirection {
/** 倒序 */
[-1]: Number,
/** 升序 */
1: Number
}
/** 列事件枚举 */
interface GridColumnColumnEventMap {
/** 重排事件 */
"reorder": string,
/** 宽调整事件 */
"resize": string,
/** 排序事件 */
"sort": string
}
/** Grid 控件基础类 */
export class Grid {
/** 列类型枚举 */
static ColumnTypes: {
/** 通用列（只读） */
Common: 0,
/** 单行文本列 */
Input: 1,
/** 下拉选择列 */
Dropdown: 2,
/** 复选框列 */
Checkbox: 3,
/** 图标列 */
Icon: 4,
/** 多行文本列 */
Text: 5,
/** 日期选择列 */
Date: 6,
/**
* 判断列是否为复选框列
* @param type 列类型
*/
isCheckbox(type: Number): boolean;
};
/** 列定义的数组 */
columns: Array<GridColumnDefinition>;
/** 多语言资源对象 */
langs?: { all: string, ok: string, reset: string };
/** 行数大于等于该值则启用虚模式，默认值 100 */
virtualCount?: Number;
/** 表格行高，默认值 36 */
rowHeight?: Number;
/** 文本行高，默认值 24 */
lineHeight?: Number;
/** 列表底部留出额外行的空白，默认值 0 */
extraRows?: Number;
/** 过滤条件列表的行高，默认值 30 */
filterRowHeight?: Number;
/** 列表高度值，为 0 时列表始终显示全部内容（自增高），为非数字或者小于 0 则根据容器高度来确定虚模式的渲染行数，默认值 null */
height?: Number;
/** 列表是否为只读，默认值 false */
readonly?: boolean;
/** 是否允许多选，默认值 false */
multiSelect?: boolean;
/** 为 false 时只有点击在单元格内才会选中行，默认值 true */
fullrowClick?: boolean;
/** 单元格 tooltip 是否禁用，默认值 false */
tooltipDisabled?: boolean;
/** 列头是否显示，默认值 true */
headerVisible?: boolean;
/** 监听事件的窗口载体，默认值 window */
window?: Window
/** 排序列的索引，默认值 -1 */
sortIndex?: Number;
/** 排序方式，正数升序，负数倒序，默认值 1 */
sortDirection?: keyof GridColumnDirection;
constructor(container: HTMLElement, getText?: (id: string, def?: string) => string);
/**
* Grid 控件构造函数
* @param container Grid 控件所在的父容器，可以是 string 表示选择器，也可以是 HTMLElement 对象<br/><br/>
* <i>构造时可以不进行赋值，但是调用 init 函数时则必须进行赋值</i>
* @param getText （可选参数）获取多语言文本的函数代理
*/
constructor(container: string | HTMLElement, getText?: (id: string, def?: string) => string);
/**
* 即将选中行时触发，返回 false、null、undefined、0 等则取消选中动作
* @param index 即将选中的行索引
* @param colIndex 即将选中的列索引
*/
willSelect?: (index: Number, colIndex: Number) => boolean;
/**
* 单元格单击时触发，colIndex 为 -1 则表示点击的是行的空白处，返回 false 则取消事件冒泡
* @param index 点击的行索引
* @param colIndex 点击的列索引
*/
cellClicked?: (index: Number, colIndex: Number) => boolean;
/**
* 选中行发生变化时触发的事件
* @param index 选中的行索引
*/
onSelectedRowChanged?: (index?: Number) => void;
/**
* 单元格双击时触发的事件，colIndex 为 -1 则表示点击的是行的空白处
* @param index 双击的行索引
* @param colIndex 双击的列索引
*/
onCellDblClicked?: (index: Number, colIndex: Number) => void;
/**
* 行双击时触发的事件
* @param index 双击的行索引
*/
onRowDblClicked?: (index: Number) => void;
onColumnChanged?: <K extends keyof GridColumnColumnEventMap>(type: K, index: Number, value: Number | keyof GridColumnDirection) => void;
/**
* 列发生变化时触发的事件
* @param type 事件类型<br/><br/>
* "reorder" 为发生列重排事件，此时 value 为目标列索引<br/>
* "resize" 为发生列宽调整事件，此时 value 为列宽度值<br/>
* "sort" 为发生列排序事件，此时 value 为 1（升序）或 -1（倒序）
* @param colIndex 发生变化事件的列索引
* @param value 变化的值
*/
onColumnChanged?: (type: keyof GridColumnColumnEventMap, colIndex: Number, value: Number | keyof GridColumnDirection) => void;
/**
* 列滚动时触发的事件
* @param e 滚动事件对象
*/
onBodyScrolled?: (e: Event) => void;
/** 获取数据数组 */
get source(): Array<GridItem | any>;
/** 设置数据，并刷新列表 */
set source(list: Array<GridItem | any>);
/** 获取当前选中的行索引的数组 */
get selectedIndexes(): Array<Number>;
/** 设置当前选中的行索引的数组，并刷新列表 */
set selectedIndexes(indexes: Array<Number>);
/** 获取 Grid 当前是否处于加载状态 */
get loading(): boolean;
/** 使 Grid 进入加载状态 */
set loading(flag: boolean);
/** 获取 Grid 当前滚动的偏移量 */
get scrollTop(): Number;
/** 设置 Grid 滚动偏移量 */
set scrollTop(top: Number);
get element(): HTMLElement
/** 获取 Grid 的页面元素 */
get element(): HTMLElement;
/** 获取当前 Grid 是否已发生改变 */
get changed(): boolean;
/** 获取当前是否为虚模式状态 */
get virtual(): boolean;
/** 获取当前排序的列关键字，为 null 则当前无排序列 */
get sortKey(): string | undefined;
/** 获取当前选中行的索引，为 -1 则当前没有选中行 */
get selectedIndex(): Number | -1;
/**
* 初始化Grid控件
* @param container 父容器元素，若未传值则采用构造方法中传入的父容器元素
*/
init(container?: HTMLElement): void;
/**
* 设置数据列表，该方法为 set source 属性的语法糖
* @param source 待设置的数据列表
*/
setData(source: Array<GridItem | any>): void;
/**
* 设置单行数据
* @param index 行索引
* @param item 待设置的行数据值
*/
setItem(index: Number, item: GridItem | any): void;
/**
* 添加行数据
* @param item 待添加的行数据值
* @param index 待添加的行索引
*/
addItem(item: GridItem | any, index?: Number): void;
/**
* 删除行数据
* @param index 待删除的行索引
*/
removeItem(index: Number): void;
/**
* 滚动到指定行的位置
* @param index 待滚动至的行索引
*/
scrollToIndex(index: Number): void;
resize(force?: boolean): void;
/**
* 调整 Grid 元素的大小，一般需要在宽度变化时（如页面大小发生变化时）调用
* @param force 是否强制reload，默认只有待渲染的行数发生变化时才会调用reload
* @param keep 是否保持当前滚动位置
*/
resize(force?: boolean, keep?: boolean): void;
/**
* 重新计算需要渲染的行，并载入元素，一般需要在高度变化时调用
* @param keep 是否保持当前滚动位置
*/
reload(keep?: boolean): void;
/**
* 重新填充Grid单元格数据
*/
refresh(): void;
/**
* 把所有行重置为未修改的状态
*/
resetChange(): void;
/**
* 根据当前排序字段进行列排序
* @param reload 为 true 则在列排序后调用 reload 方法
*/
sortColumn(reload?: boolean): void;
/**
* 清除列头复选框的选中状态
*/
clearHeaderCheckbox(): void;
}

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

@ -133,6 +133,14 @@ export class Grid {
get element() { return this._var.el }
get changed() {
const source = this._var.source;
if (source == null) {
return false;
}
return source.filter(r => r.__changed).length > 0;
}
get source() { return this._var.source?.map(s => s.values) }
set source(list) {
if (this._var.el == null) {
@ -148,11 +156,32 @@ export class Grid {
setItem(index, item) {
if (this._var.source == null) {
return;
throw new Error('no source');
}
const it = this._var.source[index];
delete it.source;
it.values = item;
this.refresh();
}
addItem(item, index) {
if (this._var.source == null) {
throw new Error('no source');
}
if (index >= 0) {
this._var.source.splice(index, 0, { values: item });
} else {
this._var.source.push({ values: item });
}
this.reload();
}
removeItem(index) {
if (this._var.source == null) {
throw new Error('no source');
}
this._var.source.splice(index, 1);
this.reload();
}
_refreshSource(list) {
@ -344,7 +373,7 @@ export class Grid {
this._var.el.scrollTop = top;
}
resize(force) {
resize(force, keep) {
if (this._var.rendering || this._var.el == null) {
return;
}
@ -360,7 +389,7 @@ export class Grid {
const count = truncate((height - 1) / (this.rowHeight + 1)) + (RedumCount * 2) + 1;
if (force || count !== this._var.rowCount) {
this._var.rowCount = count;
this.reload(true);
this.reload(keep);
}
this._var.bodyClientWidth = body.clientWidth;
}
@ -760,11 +789,11 @@ export class Grid {
}
if (type.editing) {
val = type.getValue({ target: cell.children[0] }, col);
this._onRowChanged(null, startIndex + i, col, val, cell, true);
this._onRowChanged(null, i, col, val, cell, true);
}
}
element = selected ?
type.createEdit(e => this._onRowChanged(e, startIndex + i, col, type.getValue(e, col), cell), col, this._var.el, vals) :
type.createEdit(e => this._onRowChanged(e, i, col, type.getValue(e, col), cell), col, this._var.el, vals) :
type.create(col);
cell.replaceChildren(element);
} else {
@ -1179,7 +1208,7 @@ export class Grid {
const key = e.currentTarget.value.toLowerCase();
const items = key.length === 0 ? array : array.filter(i => {
const displayValue = i?.DisplayValue ?? i;
return String(displayValue ?? '').includes(key);
return String(displayValue ?? '').toLowerCase().includes(key);
});
this._fillFilterList(col, itemlist, items, itemall);
});
@ -1288,7 +1317,7 @@ export class Grid {
}
const content = list.querySelector('.filter-content');
content.replaceChildren();
this._doFillFilterList(content, array, list.querySelector('.filter-all>input'));
this._doFillFilterList(content, array, list.querySelector('.filter-all'));
content.style.top = `${top + rowHeight}px`;
}
}