[新增] 分页组件增加searchDebounce，用于给搜索增加防抖和敲击回车键立刻搜索功能

rdkmaster · Jun 30, 2020 · d0f8c9b · d0f8c9b
1 parent f3e80d1
commit d0f8c9b
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 4 deletions.
diff --git 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]"
 ></jigsaw-pagination>
 <span>共{{pageable.pagingInfo.totalRecord}}条记录</span>
+<div  style="padding: 10px 0; line-height: 1.5">
+    设置搜索防抖时间： <j-button-bar [data]="['none', 1000, 3000]" [(selectedItems)]="searchDebounce" ></j-button-bar>
+    <p>分页的默认搜索是没有防抖功能的。searchDebounce属性会给搜索增加一个防抖功能，并增加enter回车立刻搜索。</p>
+</div>
diff --git 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
@@ -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
@@ -1,7 +1,7 @@
 <ng-container [ngSwitch]="mode">
     <ng-container *ngSwitchDefault>
-        <jigsaw-input class="jigsaw-paging-search" *ngIf="searchable" width="160"
-                      [placeholder]="placeholder" (valueChange)="search.emit($event)">
+        <jigsaw-input class="jigsaw-paging-search" *ngIf="searchable" width="160" [(value)]="_$searchKey"
+                      [placeholder]="placeholder" (valueChange)="_$searchKeyChange($event)" (keydown.enter)="_$enterSearch($event)">
             <span jigsaw-prefix-icon class="fa fa-search"></span>
         </jigsaw-input>
 

diff --git 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<string>();
     /**
@@ -149,6 +157,55 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit,
     @ViewChildren(JigsawInput)
     public inputs: QueryList<JigsawInput>;
 
+    /**
+     * @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;
 
     /**