[新增] 表格支持根据容器高度来自动计算当前页记录数，关联@6740

rdkmaster · Nov 11, 2021 · b2a4ee3 · b2a4ee3
1 parent ee80fce
commit b2a4ee3
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 13 deletions.
diff --git a/src/app/demo/pc/table/auto-page-sizing/demo.component.html b/src/app/demo/pc/table/auto-page-sizing/demo.component.html
@@ -0,0 +1,21 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div style="height: calc(100vh - 120px); margin-bottom: 10px;">
+    <jigsaw-table #tableCmp style="margin-bottom: 10px;" height="100%" [data]="pageable" [hideHeader]="hideHeader"></jigsaw-table>
+    <div style="display: flex; align-items: center;">
+        <jigsaw-pagination [data]="pageable" [pageSizeOptions]="[5, 10, 20]"></jigsaw-pagination>
+        <span>共{{pageable.pagingInfo.totalRecord}}条记录</span>
+        <jigsaw-checkbox [(checked)]="pageable.pagingInfo.autoPageSizing" (checkedChange)="cdr.markForCheck()"
+                         style="margin-left: 20px">
+            单页记录数自适应屏幕高度
+        </jigsaw-checkbox>
+        <jigsaw-checkbox [(checked)]="hideHeader" (checkedChange)="cdr.markForCheck()"
+                         style="margin-left: 20px">
+            隐藏表头
+        </jigsaw-checkbox>
+    </div>
+</div>
diff --git a/src/app/demo/pc/table/auto-page-sizing/demo.component.ts b/src/app/demo/pc/table/auto-page-sizing/demo.component.ts
@@ -0,0 +1,28 @@
+import { Component, ViewChild, ChangeDetectorRef } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { LocalPageableTableData, JigsawTable } from "jigsaw/public_api";
+
+@Component({
+    templateUrl: './demo.component.html'
+})
+export class TableAutoPageableDemoComponent {
+    @ViewChild('tableCmp')
+    tableCmp: JigsawTable;
+    pageable: LocalPageableTableData;
+    hideHeader: boolean = false;
+
+    constructor(http: HttpClient, public cdr: ChangeDetectorRef) {
+        this.pageable = new LocalPageableTableData();
+        this.pageable.http = http;
+        this.pageable.fromAjax('mock-data/hr-list');
+        this.pageable.pagingInfo.autoPageSizing = true;
+        this.pageable.pagingInfo.itemHeight = 30;
+    }
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '此demo展示了根据容器高度来自动设置分页页数的功能，目前仅支持表格所有记录都等高的情况。';
+    description: string = '提示：在表格的`columnDefines`属性里添加一个cell.tooltip属性可以让对应的列保持不换行，' +
+        '避免表格中某些行文本过多导致的意外换行，从而造成自动计算的当前也条数错误的问题，参考[这个demo](#/pc/table/renderer)的源码。';
+}
diff --git a/src/app/demo/pc/table/auto-page-sizing/demo.module.ts b/src/app/demo/pc/table/auto-page-sizing/demo.module.ts
@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {JigsawTableModule, JigsawPaginationModule, JigsawButtonBarModule, JigsawCheckBoxModule} from "jigsaw/public_api";
+import {TableAutoPageableDemoComponent} from './demo.component';
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+
+@NgModule({
+    imports: [JigsawTableModule, JigsawPaginationModule, JigsawDemoDescriptionModule, JigsawButtonBarModule, JigsawCheckBoxModule],
+    declarations: [TableAutoPageableDemoComponent],
+    exports: [TableAutoPageableDemoComponent]
+})
+export class TableAutoPageableDemoModule {
+}
diff --git a/src/app/demo/pc/table/demo-set.module.ts b/src/app/demo/pc/table/demo-set.module.ts
@@ -101,6 +101,9 @@ import { TableCellRenderFullComponent } from "./cell-render-full/demo.component"
 import { TableCellRenderFullDemoModule } from "./cell-render-full/demo.module";
 import { TableAutoFillUpDemoComponent } from "./auto-fill-up/demo.component";
 import { TableAutoFillUpDemoModule } from "./auto-fill-up/demo.module";
+import { TableAutoPageableDemoComponent } from "./auto-page-sizing/demo.component"
+import { TableAutoPageableDemoModule } from "./auto-page-sizing/demo.module"
+
 
 export const routerConfig = [
     {
@@ -252,6 +255,9 @@ export const routerConfig = [
     },
     {
         path: "auto-fill-up", component: TableAutoFillUpDemoComponent
+    },
+    {
+        path: "auto-page-sizing", component: TableAutoPageableDemoComponent
     }
 ];
 
@@ -269,7 +275,7 @@ export const routerConfig = [
         TableScrollListenDemoModule, SodokuGameModule, TableAddCheckboxColumnPageableDemoModule, TableSwitchRendererDemoModule,
         TableNoDataDemoModule, TableHtmlRendererDemoModule, RebuildTableDataDemoModule, TableCellSelectRenderDemoModule, TableMixinTableDemoModule,
         TreeTableDemoModule, TableCellEditablePropertyDemoModule,TableDraggableDemoModule, TableUpdateColumnDefinesDemoModule, TableAutoSaveDemoModule,
-        TableCellRenderFullDemoModule, TableAutoFillUpDemoModule
+        TableCellRenderFullDemoModule, TableAutoFillUpDemoModule, TableAutoPageableDemoModule
     ]
 })
 export class TableDemoModule {

diff --git a/src/jigsaw/common/core/data/component-data.ts b/src/jigsaw/common/core/data/component-data.ts
@@ -272,7 +272,7 @@ export interface IAjaxComponentData extends IComponentData {
      *
      * $demo = data-encapsulation/ajax-events
      *
-     * param callback 回调函数
+     * @param callback 回调函数
      * @param context 回调函数`callback`执行的上下文
      * @returns 返回一个函数，调用它后，`callback`则不会再次被触发。
      * 如果你注册了这个回调，则请在组件的`ngOnDestroy()`方法中调用一下这个函数，避免内存泄露。
@@ -636,8 +636,6 @@ export class PagingInfo implements IEmittable {
         this.totalRecord = totalRecord;
     }
 
-    private _currentPage: number = 1;
-    private _pageSize: number = 20;
     private _totalPage: number = 1;
 
     /**
@@ -646,6 +644,9 @@ export class PagingInfo implements IEmittable {
      */
     public totalRecord: number = 0;
 
+
+    private _pageSize: number = 20;
+
     /**
      * 当前单页记录数
      *
@@ -658,11 +659,15 @@ export class PagingInfo implements IEmittable {
     }
 
     public set pageSize(value: number) {
-        if (isNaN(value) || value < 1) return;
+        if (isNaN(value) || value < 1 || this.autoPageSizing || this._pageSize === value) {
+            return;
+        }
         this._pageSize = value;
         this.emit();
     }
 
+    private _currentPage: number = 1;
+
     /**
      * 当前页索引，从1开始计数。修改此属性后，`PagingInfo`会发出获取对应页数据的事件，通过`subscribe`添加监听器可处理此事件。
      *
@@ -691,6 +696,81 @@ export class PagingInfo implements IEmittable {
         return this.totalRecord && this.pageSize != Infinity ? Math.ceil(this.totalRecord / this.pageSize) : 1;
     }
 
+    private _autoPageSizing: boolean = false;
+
+    /**
+     * 自动分页
+     *
+     * 自动分页的开关，开启时，会依据 `containerHeight` 和 `itemHeight` 参数计算 `pageSize`，
+     * 注意：在本属性为true时，直接操作`pageSize`无效
+     */
+    public get autoPageSizing(): boolean {
+        return this._autoPageSizing;
+    }
+
+    public set autoPageSizing(value: boolean) {
+        if (this._autoPageSizing == !!value) {
+            return;
+        }
+        if (!!value) {
+            this._calcAutoPageSize();
+        }
+        this._autoPageSizing = !!value;
+        this.emit();
+    }
+
+    private _containerHeight: number;
+
+    /**
+     * 本属性用于实现动态分页记录数的功能，它指明了用于显示分页数据的容器总高度，配合 `itemHeight` 属性可计算出当前最佳单页记录数
+     *
+     * 如：table组件内容高度
+     *
+     * $demo=table/auto-page-sizing
+     */
+    public get containerHeight(): number {
+        return this._containerHeight;
+    }
+
+    public set containerHeight(value: number) {
+        if (isNaN(value) || value < 1) {
+            return;
+        }
+        this._containerHeight = value;
+        this._calcAutoPageSize();
+        this.emit();
+    }
+
+    private _itemHeight: number;
+
+    /**
+     * 本属性用于实现动态分页记录数的功能，它指明了单条记录的高度，配合 `containerHeight` 属性可计算出当前最佳单页记录数
+     *
+     * 如：table组件内容高度
+     *
+     * $demo=table/auto-page-sizing
+     */
+    public get itemHeight(): number {
+        return this._itemHeight;
+    }
+
+    public set itemHeight(value: number) {
+        if (isNaN(value) || value < 1) {
+            return;
+        }
+        this._itemHeight = value;
+        this._calcAutoPageSize();
+        this.emit();
+    }
+
+    private _calcAutoPageSize(): void {
+        if (!this.autoPageSizing || isNaN(this.containerHeight) || isNaN(this.itemHeight)) {
+            return;
+        }
+        const newPageSize = Math.floor(this.containerHeight / this.itemHeight);
+        this._pageSize = newPageSize || 1;
+    }
+
     private _emitter = new EventEmitter<any>();
 
     public emit(value?: any): void {
@@ -726,8 +806,6 @@ export class PagingInfo implements IEmittable {
 export class DataFilterInfo {
     constructor(/**
                  * 过滤关键字
-                 *
-                 *
                  */
                 public key: string = '',
                 /**

diff --git a/src/jigsaw/pc-components/pagination/pagination.html b/src/jigsaw/pc-components/pagination/pagination.html
@@ -26,7 +26,8 @@
                        labelField="label"
                        width="80"
                        [data]="pageSizeOptions"
-                       class="jigsaw-paging-page-size">
+                       class="jigsaw-paging-page-size"
+                       [disabled]="data?.pagingInfo?.autoPageSizing">
         </jigsaw-select>
 
         <div class="jigsaw-paging-goto" *ngIf="showQuickJumper">
@@ -63,7 +64,8 @@
                        [trackItemBy]="['value','label']"
                        labelField="label"
                        width="80"
-                       [data]="pageSizeOptions">
+                       [data]="pageSizeOptions"
+                       [disabled]="data?.pagingInfo?.autoPageSizing">
         </jigsaw-select>
     </ng-container>
 </ng-container>

diff --git a/src/jigsaw/pc-components/pagination/pagination.ts b/src/jigsaw/pc-components/pagination/pagination.ts
@@ -220,6 +220,7 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit,
                 // pagingInfo.currentPage采用的getter&setter，不可随便赋值
                 this.data.pagingInfo.currentPage = newValue;
             }
+            this._changeDetectorRef.detectChanges();
         }
     }
 
@@ -265,8 +266,8 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit,
     private _setCurrentPage(): void {
         this._pages.forEach(page => {
             page.current = page.pageNumber == this.current;
-            page._changeDetectorRef.markForCheck();
         });
+        this._changeDetectorRef.detectChanges();
     }
 
     /**
@@ -313,7 +314,7 @@ export class JigsawPagination extends AbstractJigsawComponent implements OnInit,
                 this._$pageNums = Array.from(new Array(this._totalPage)).map((item, index) => ++index);
             }
         }
-        this._changeDetectorRef.markForCheck();
+        this._changeDetectorRef.detectChanges();
     }
 
     /**

diff --git a/src/jigsaw/pc-components/table/table.ts b/src/jigsaw/pc-components/table/table.ts
@@ -37,7 +37,7 @@ import {
     TableHeadSetting
 } from "./table-typings";
 import {CallbackRemoval, CommonUtils} from "../../common/core/utils/common-utils";
-import {SortOrder, IPageable} from "../../common/core/data/component-data";
+import {SortOrder, IPageable, PagingInfo} from "../../common/core/data/component-data";
 import {
     DefaultCellRenderer,
     JigsawTableRendererModule,
@@ -327,7 +327,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte
     private _updateFillUpBlankRow(): void {
         this._$blankRow = [];
         this._changeDetectorRef.detectChanges();
-        
+
         if (!this.autoFillUp) {
             return;
         }
@@ -364,6 +364,23 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte
         this._changeDetectorRef.detectChanges();
     }
 
+    private _updateAutoPageSizing(): void {
+        const data: IPageable = <any>this.data;
+        if (!(data?.pagingInfo instanceof PagingInfo) || !data?.pagingInfo.autoPageSizing) {
+            return;
+        }
+        const tableEle = this._elementRef.nativeElement.querySelector(".jigsaw-table-range");
+        if (!tableEle) {
+            return;
+        }
+        const bodyHeight = tableEle.getBoundingClientRect().bottom - tableEle.getBoundingClientRect().top;
+        const containerSize = this.hideHeader ? bodyHeight - 1 : bodyHeight - 42;
+        if (!isNaN(data.pagingInfo.containerHeight) && data.pagingInfo.containerHeight === containerSize) {
+            return
+        }
+        data.pagingInfo.containerHeight = containerSize;
+    }
+
     /**
      * 生成混合后的列定义序列
      */
@@ -412,6 +429,8 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte
         this.runMicrotask(() => {
             // 自动添加空白行
             this._updateFillUpBlankRow();
+            // 自动分页
+            this._updateAutoPageSizing();
             // 等待additionalTableData在renderer更新完成
             this.additionalDataChange.emit(this.additionalData);
             // 等待滚动条初始化
@@ -602,6 +621,7 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte
         this._handleScrollBar();
         this._setVerticalScrollbarOffset();
         this._updateFillUpBlankRow();
+        this._updateAutoPageSizing();
     }
 
     private _tableHeaderElement: HTMLElement;
@@ -895,6 +915,8 @@ export class JigsawTable extends AbstractJigsawComponent implements OnInit, Afte
         this._renderer.setStyle(this._elementRef.nativeElement.querySelector('.jigsaw-table-body-range'),
             'max-height', this._maxHeight);
         this._tableHeaderElement = this._elementRef.nativeElement.querySelector(".jigsaw-table-header");
+        // 自动分页
+        this._updateAutoPageSizing();
     }
 
     ngOnDestroy() {