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>