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

rdkmaster · Jun 30, 2020 · dacb3a0 · dacb3a0
1 parent 552c80d
commit dacb3a0
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 3 deletions.
diff --git a/src/app/demo/table/pageable/demo.component.html b/src/app/demo/table/pageable/demo.component.html
@@ -13,5 +13,11 @@
     [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/table/pageable/demo.component.ts b/src/app/demo/table/pageable/demo.component.ts
@@ -44,6 +44,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/table/pageable/demo.module.ts b/src/app/demo/table/pageable/demo.module.ts
@@ -3,9 +3,10 @@ import {JigsawTableModule} from "jigsaw/component/table/table";
 import {JigsawPaginationModule} from "jigsaw/component/pagination/pagination";
 import {TablePageableDemoComponent} from './demo.component';
 import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {JigsawButtonBarModule} from "jigsaw/component/list-and-tile/button-bar";
 
 @NgModule({
-    imports: [JigsawTableModule, JigsawPaginationModule, JigsawDemoDescriptionModule],
+    imports: [JigsawTableModule, JigsawPaginationModule, JigsawDemoDescriptionModule, JigsawButtonBarModule],
     declarations: [TablePageableDemoComponent],
     exports: [TablePageableDemoComponent]
 })

diff --git a/src/jigsaw/component/pagination/pagination.html b/src/jigsaw/component/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/component/pagination/pagination.ts b/src/jigsaw/component/pagination/pagination.ts
@@ -143,11 +143,66 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit,
     @Input() public mode: 'complex' | 'simple' = 'complex'; // 当为「small」时，是小尺寸分页
     @Input() public placeholder: string = '';
 
+    /**
+     * 设置了此属性会给搜索增加一个防抖功能，并增加enter回车立刻搜索
+     * 设为'none'、NaN、小于0，或者不设置则表示不设置防抖
+     */
+    @Input()
+    public searchDebounce: number | 'none' = NaN;
+
     @ViewChildren(forwardRef(() => JigsawPagingItem))
     private _pages: QueryList<JigsawPagingItem> = null;
 
     @ViewChildren(JigsawInput) inputs: QueryList<JigsawInput>;
 
+    /**
+     * @internal
+     */
+    public _$searchKeyChange($event) {
+        if (this._isValidSearchDebounce()) {
+            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;
+        }
+    }
+
     /*
      * 根据current设置page按钮的显示，上一页，下一页，上五页，下五页的显示
      * */