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;
/**