0.0.3 • Published 5 years ago
ptc-server-table v0.0.3
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>
0.0.3
5 years ago