diff --git a/src/app/demo/pc/table/pageable/demo.component.html b/src/app/demo/pc/table/pageable/demo.component.html index 578627d244..9b13da7aae 100644 --- a/src/app/demo/pc/table/pageable/demo.component.html +++ b/src/app/demo/pc/table/pageable/demo.component.html @@ -11,5 +11,10 @@ [searchable]="true" [showQuickJumper]="true" (search)="onSearch($event)" + [searchDebounce]="searchDebounce[0]" > 共{{pageable.pagingInfo.totalRecord}}条记录 +
+ 设置搜索防抖时间: +

分页的默认搜索是没有防抖功能的。searchDebounce属性会给搜索增加一个防抖功能,并增加enter回车立刻搜索。

+
diff --git a/src/app/demo/pc/table/pageable/demo.component.ts b/src/app/demo/pc/table/pageable/demo.component.ts index e39001c224..7536ae3de9 100644 --- a/src/app/demo/pc/table/pageable/demo.component.ts +++ b/src/app/demo/pc/table/pageable/demo.component.ts @@ -44,6 +44,7 @@ export class TablePageableDemoComponent { ]; onSearch(reg) { + console.log(reg); // 这里需要特别注意,filter函数的执行是在服务端,而非在浏览器! // 这里context变量是filter的执行上下文(即filter函数里的this所指向的对象),它将会一起传输给服务端, // 因此这里需要注意控制context的值里只包含有用的数据,以加快前后端通信速度 @@ -55,6 +56,8 @@ export class TablePageableDemoComponent { this.pageable.filter(filter, context); } + searchDebounce = ['none']; + // ==================================================================== // ignore the following lines, they are not important to this demo // ==================================================================== diff --git a/src/app/demo/pc/table/pageable/demo.module.ts b/src/app/demo/pc/table/pageable/demo.module.ts index 4771a5fe29..b59313760c 100644 --- a/src/app/demo/pc/table/pageable/demo.module.ts +++ b/src/app/demo/pc/table/pageable/demo.module.ts @@ -1,10 +1,10 @@ import {NgModule} from '@angular/core'; -import {JigsawTableModule, JigsawPaginationModule} from "jigsaw/public_api"; +import {JigsawTableModule, JigsawPaginationModule, JigsawButtonBarModule} from "jigsaw/public_api"; import {TablePageableDemoComponent} from './demo.component'; import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description"; @NgModule({ - imports: [JigsawTableModule, JigsawPaginationModule, JigsawDemoDescriptionModule], + imports: [JigsawTableModule, JigsawPaginationModule, JigsawDemoDescriptionModule, JigsawButtonBarModule,], declarations: [TablePageableDemoComponent], exports: [TablePageableDemoComponent] }) diff --git a/src/jigsaw/pc-components/pagination/pagination.html b/src/jigsaw/pc-components/pagination/pagination.html index 26cdb07a1c..586468b7a4 100644 --- a/src/jigsaw/pc-components/pagination/pagination.html +++ b/src/jigsaw/pc-components/pagination/pagination.html @@ -1,7 +1,7 @@ - + diff --git a/src/jigsaw/pc-components/pagination/pagination.ts b/src/jigsaw/pc-components/pagination/pagination.ts index 9961339961..473bf5572f 100644 --- a/src/jigsaw/pc-components/pagination/pagination.ts +++ b/src/jigsaw/pc-components/pagination/pagination.ts @@ -130,6 +130,14 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit, @Input() public placeholder: string = ''; + /** + * 设置了此属性会给搜索增加一个防抖功能,并增加enter回车立刻搜索 + * 设为'none'、NaN、小于0,或者不设置则表示不设置防抖 + */ + @RequireMarkForCheck() + @Input() + public searchDebounce: number | 'none' = NaN; + @Output() public search = new EventEmitter(); /** @@ -149,6 +157,55 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit, @ViewChildren(JigsawInput) public inputs: QueryList; + /** + * @internal + */ + public _$searchKeyChange($event) { + if (this._isValidSearchDebounce()) { + // 输入3000ms没有回车也会发一次事件 + this._debounceSearch($event); + } else { + this.search.emit($event) + } + } + + private _isValidSearchDebounce() { + return this.searchDebounce && this.searchDebounce != 'none' && !isNaN(this.searchDebounce) && Number(this.searchDebounce) > 0 + } + + /** + * @internal + */ + public _$searchKey: string; + + /** + * @internal + */ + public _$enterSearch($event) { + $event.preventDefault(); + $event.stopPropagation(); + if (this._isValidSearchDebounce()) { + this._clearSearchTimer(); + this.search.emit(this._$searchKey); + } + } + + private _searchTimer: number; + + private _debounceSearch(key: string) { + this._clearSearchTimer(); + this._searchTimer = this.callLater(() => { + this.search.emit(key); + }, this.searchDebounce) + } + + private _clearSearchTimer() { + if (this._searchTimer) { + clearTimeout(this._searchTimer); + this._searchTimer = null; + } + } + private _current: number; /**