ptc-server-Table

###import { PtcServerTableModule } from 'ptc-server-table'

描述

用途 該套件為伺服器端渲染表格 , 具有分頁 , 排序 , 切換頁面長度 ...等功能

整合內容 元件內部整合 meterial 樣式與 cdk tool

參考文獻

mat-table 表格主體

sort-header 排序表頭

paginator 切頁功能

屬性

| 屬性定義 | 名稱 | 型態 | 預設值 | 描述 |--------------|:-----:|:-----:| :-------:|------------------------ | @Input() | options | PtcServerTableOptions | null | | @Input() | isVisibleBtnSearch | boolean | true | 於 p-check 生效 是否顯示查詢按鈕 | @Input() | isVisibleBtnDelete | boolean | true | 於 p-check 生效 是否顯示刪除按鈕 | @Input() | isVisibleBtnEdit | boolean | true | 於 p-check 生效 是否顯示編輯按鈕 | @Input() | height | string | null | 定義表格最高高度 , 若超出則scroll
| @Input() | noDataLabel | string | '無資料' | 無資料時呈現文字 | @Input() | lastPageLabel | string | null | 往最後一頁按鈕之tooltip | @Input() | nextPageLabel | string | null | 往下一頁按鈕之tooltip | @Input() | previousPageLabel | string | null | 往上一頁按鈕之tooltip | @Input() | firstPageLabel | string | null | 往第一頁按鈕之tooltip | @Input() | itemsPerPageLabel | string | '分頁筆數' | 分頁筆數呈現文字 | @Input() | setRangeLabel | (page: number, pageSize: umber, length: number) => string | {起始筆數} - {最後筆數} of {總共筆數} | 呈現分頁資訊 | @Output() | onBtnDelete | EventEmitter<any> | | 於 p-check 生效 按下刪除按鈕後回呼事件 | @Output() | onBtnEdit | EventEmitter<any> | | p-check 生效 按下編輯按鈕後回呼事件 | @Output() | onBtnSearch | EventEmitter<any> | | p-check 生效 按下查詢按鈕後回呼事件 | @Output() | onPageChange | EventEmitter<any> | | 當切換頁面大小時,觸發的回呼事件 | @Output() | onHeaderChange | EventEmitter<any> | | 當排序標頭變更時,觸發的回呼事件 | @Output() | onAjaxError | EventEmitter<any> | | 當ajax發生錯誤時 , 觸發的回呼事件 | @Output() | beforeAjax | EventEmitter<any> | | 當ajax執行前 , 觸發的回呼事件 | @Output() | onAjaxSuccess | EventEmitter<any> | | 當ajax執行後 , 成功的回呼事件 | @Output() | onAjax | EventEmitter<any> | | 當ajax執行後 , 結果回傳前之回呼事件

方法

| 名稱 | 型態 | 描述 | |:-----:|:-----:|-------| | getSelectRows | any[] | 於 p-check 生效 取得勾選之項目 | clearItems | any[] | 於 p-check 生效 清除勾選之項目| | render | void | 渲染表格內容 | | reset | void | 重置表格內容 |

物件

PtcAjaxOptions

傳輸資料到 server site 之物件定義

| 名稱 | 型態 | 預設值| 描述 | |:-----:|:-----:|:-------: |-------| | url | string | null | 執行http request 網址 | | method | string | GET | POST , GET , PATCH , PUT , DELETE | | body | PtcServerTableRequest | new PtcServerTableRequest() | 內文 | headers| any| null | - | | responseType|any| json | - |

PtcServerTableOptions

表格顯示定義

| 名稱 | 型態 | 預設值| 描述 | |:-----:|:-----:|:-------: |-------| | columns | any[] | null | text : 表頭文字 name : 定義渲染對應 customer : 是否客製化欄位 | pageSizeOptions | number[] | [5,10,20] | 頁面長度定義清單 | pageSize | number | 0 | 頁面預設選取長度 | pageIndex| number | 0 | 當前頁面 | ajax |PtcAjaxOptions| null | ajax 設定值

PtcServerTableRequest

傳出物件定義

| 名稱 | 型態 | 預設值| 描述 | |:-----:|:-----:|:-------: |-------| | pageIndex | number | 0 | 查詢定義起始頁數 | pageSize | number | 0 | 查詢定義頁面長度 | criteria | T | null | 送回server site 的查詢物件 | sort | number | null | 排序欄位 , 來源為定義之 column
| direction|string| null | 排序方式 asc or desc

PtcServerTableResponse

傳入物件之定義

| 名稱 | 型態 | 預設值| 描述 | |:-----:|:-----:|:-------: |-------| | data | T[] | [] | 回傳物件清單 | isSuccess | boolean | false| 查詢定義頁面長度 | totalCount | number | 0 | 回傳物件的總數字 | extension| any | null | 回傳其他物件
| message | string| null | 回傳結果文字

使用方式（範例）

app.module.ts

import { PtcServerTableModule } from 'ptc-server-table'

@NgModule({
  declarations: [
    AppComponent,
  ],
  
  imports: [  
	 ...
    PtcServerTableModule //add this line.
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { PtcServerTableComponent, PtcServerTableOptions, PtcAjaxOptions, PtcServerTableRequest } from 'ptc-server-table';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {


  isLoading = false;

  @ViewChild('ptcServerTable') ptcServerTable: PtcServerTableComponent;

  opts = new PtcServerTableOptions();

  constructor(){
    
    this.opts.ajax = new PtcAjaxOptions();
    this.opts.ajax.url = 'http://{yourip}/api/values/GetList/';
    this.opts.ajax.method = 'POST';
    this.opts.columns = [
      {
        text: '全選',
        name: 'p-check' // it will render checkbox
      },
      {
        text: '名稱',
        name: 'Name',
  
      },
      {
        text: '信箱',
        name: 'Email',
  
      },
      {
        text: '帳戶',
        name: 'Account',
  
      },
      {
        text: '操作',
        name: 'p-operator', // it will render btn group
  
      },
       {
        text: '客製化欄位',
        name: 'customer', 
  	     customer : true,
      },
    ]
    this.opts.pageSizeOptions = [5, 10, 20];
    this.opts.pageSize = 20;
    this.opts.pageIndex = 4;
    
  }

  beforeAjax($event){
    this.isLoading = true;
    alert('before ajax')
  }

    
  onAjax($event : PtcServerTableRequest<any>) {
    alert('onAjax' + JSON.stringify($event));
    
    let objA = {
      Name : 'chenhungtzu',
      Phone : '0926366680'
    }
    $event.criteria = objA 
  }

  onAjaxSuccess($event){
    this.isLoading = false;
    alert('after ajax success'+ JSON.stringify($event))
  }
  
  onAjaxError($event){
    this.isLoading = false;
    alert('after ajax error'+ JSON.stringify($event))
  }

  onBtnDelete($event){
    alert('delete' + JSON.stringify($event))
  }

  onBtnSearch($event){
    alert('serach'+ JSON.stringify($event))
  }

  onBtnEdit($event){
    alert('edit'+ JSON.stringify($event))
  }

  onPageChange($event) {
    alert('page change' + JSON.stringify($event));
  }

  getSelectItem($event){
    alert('select' + this.ptcServerTable.getSelectRows())
  }
 
  setRangeLabel(page: number, pageSize: number, length: number): string {
    if (length == 0 || pageSize == 0) {
      return `0 of ${length}`;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `第 ${startIndex + 1}筆 - 第 ${endIndex} 筆 , 共 ${length} 筆資料`;
  }

  render($event){
    this.ptcServerTable.render();
  }

  reset($event){
    this.ptcServerTable.reset();
  }

app.component.html

<!-- table -->
 <app-ptc-server-table #ptcServerTable 
  [options]="opts" 
  [templateRefs]= "{customer : customerRef}"
  [setRangeLabel]="setRangeLabel"
    (onPageChange)="onPageChange($event)" 
    (onBtnDelete)="onBtnDelete($event)" 
    (onBtnSearch)="onBtnSearch($event)"
    (onBtnEdit)="onBtnEdit($event)"
    (onAjaxError)="onAjaxError($event)"
    (onAjaxSuccess)="onAjaxSuccess($event)"
    (onAjax)="onAjax($event)"
    (beforeAjax)="beforeAjax($event)"
    >
  </app-ptc-server-table><!-- end table -->
  
   <ng-template #customerRef  let-row="row">
    客製化欄位 , {{row}} 
  </ng-template>

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestCore</title>
  <base href="/">
  <!-- add this line-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <!-- add this line-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>