最近在研究基於angular2+的表格的用法,發現一種非常好用的表格,就是ag-grid,ag-grid不僅對angular1.x有支持,還支持react,vue等目前主流的前端框架,這裏我們只是對angular2+中的ag-grid進行講解,這個表格繼承了angular1.x中ui-grid的一些優點,並補全了ui-grid的一些缺點,總體來說是一個非常棒的表格。第一節主要講解表格列的定義,
但是我們需要從一開始如何引用ag-Grid開始講解,以便於大家理解如何使用ag-Grid,大家對講解有不明白的地方可以去查看表格列的定義的相關官方API。
1.如何引入ag-Grid.
首先我們需要更新ag-Grid的相關依賴,具體如下:
npm install ag-grid --save
npm install ag-grid-angular --save
其次我們在app.module.ts中引入ag-grid-angular/main,並在imports中注入AgGridModule.withComponents(),具體如下:
import {AgGridModule} from 'ag-grid-angular/main';
@NgModule({
imports: [
AgGridModule.withComponents()
],
})
2.創建GridComponent組件,可以使用命令 ng g c grid來創建,但是前提必須安裝得有angular-cli(如何安裝自行查詢),然後在app.module.ts中引入GridComponent
,並在declarations中注入GridComponent,具體如下:
import {GridComponent} from './grid/grid.component';
@NgModule({
declarations: [
GridComponent
],
})
3.進入到grid-component.ts中,引入相關依賴,聲明定義表格gridOptions,在構造器中定義表格列,定義一些列的屬性,具體如下:
import {Component} from '@angular/core';
import {GridOptions} from 'ag-grid';
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent {
private gridOptions: GridOptions;
constructor() {
this.gridOptions = <GridOptions>{
enableFilter : true,
};
this.gridOptions.columnDefs = [
{
headerName: 'ID',
field: 'id',
width: 50,
pinned: 'left',
type: 'numberColumn'
},
{
headerName: 'Name',
field: 'name',
filter: 'text',
width: 100,
},
{
headerName: 'Sex',
field: 'sex',
filter: 'text',
width: 50,
},
{
headerName: 'Age',
field: 'age',
filter: 'text',
width: 50,
children: [
{headerName: 'Birthday', field: 'birthday', columnGroupShow: 'closed', type: ['dateColumn', 'nonEditableColumn']},
{headerName: 'Silver', field: 'silver', columnGroupShow: 'closed'},
{headerName: 'Gold', field: 'bronze', columnGroupShow: 'open'},
{headerName: 'Constellation', field: 'constellation', columnGroupShow: 'open'}
]
},
{
headerName: 'Tele',
field: 'tele',
filter: 'text',
width: 200,
editable: true,
},
{
headerName: 'Address',
field: 'address',
filter: 'text',
width: 500,
editable: true,
pinned: 'right'
}
];
this.gridOptions.rowData = [
{id: 1, name: '張三', sex: '女', age: '20', birthday: '1993-05-20', tele: '13564569874', address: '海淀區農大南路'},
{id: 2, name: '李四', sex: '男', age: '40', birthday: '1992-08-18', tele: '15647893214', address: '豐臺區'},
{id: 3, name: '小明', sex: '男', age: '20', birthday: '2011-02-01', tele: '17788770858', address: '哈爾濱市南崗區'},
{id: 4, name: '曉紅', sex: '女', age: '25', birthday: '1978-11-20', tele: '18945620145', address: '北京西路的日子'},
{id: 5, name: '老王', sex: '男', age: '30', birthday: '1997-07-08', tele: '13645713276', address: '中關村軟件園'},
{id: 6, name: '櫃子', sex: '男', age: '35', birthday: '1999-03-15', tele: '18745016324', address: '海淀區後廠村路'},
]
this.gridOptions.columnTypes = {
'numberColumn': {width: 83, filter: 'number'},
'medalColumn': {width: 100, columnGroupShow: 'open', suppressFilter: true},
'nonEditableColumn': {editable: false},
'dateColumn': {
// specify we want to use the date filter
filter: 'date',
filterParams: {
// provide comparator function
comparator: function (filterLocalDateAtMidnight, cellValue) {
// In the example application, dates are stored as dd/mm/yyyy
// We create a Date object for comparison against the filter date
const dateParts = cellValue.split('-');
const day = Number(dateParts[2]);
const month = Number(dateParts[1]) - 1;
const year = Number(dateParts[0]);
const cellDate = new Date(year, month, day );
// Now that both parameters are Date objects, we can compare
if (cellDate < filterLocalDateAtMidnight) {
return -1;
} else if (cellDate > filterLocalDateAtMidnight) {
return 1;
} else {
return 0;
}
}
}
}
};
}
}
在這裏我們對列的一些屬性進行解釋,gridOptions的columnDefs屬性是定義表格列的,其中headerName是定義表格列的表頭名稱,field是定義要顯示的數據的字段名,filter是過濾的類型,width是表格列寬度,editable是定義列是否可編輯(前提是gridOptions表格必須是可編輯的,這個字段纔有效,如果不定義該字段,則默認該列不能編輯),pinned是固定列的,有三個值(left,null,right),默認爲null,一般我們只需要固定最左邊的一列和最右邊的一列,children表示該列的子列,子列的屬性跟父列的一樣,但是還有一個columnGroupShow屬性,這是用來設置子列的打開和關閉,只要子類中的cilumnGroupShow的值有不一樣的時候,父表頭的右邊會有一個展開的按鈕(‘+’),type是定義列的類型,除了有內置的‘number’,'string'等類型之外,還可以自定義類型,自定義的類型必須包含在gridOptions的columnTypes中,如果需要使用多個類型,需要用中括號括起來,這是常用的一些屬性的解釋,接下來咱們看下html頁面如何使用該表格組件
4.使用GridComponent組件
<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-fresh"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[showToolPanel]="showToolPanel"
[rowData]="rowData"
enableColResize
enableSorting
enableFilter
rowHeight="22"
rowSelection="multiple">
</ag-grid-angular>
這其中的參數,enableColResize表示能重置表格列寬度,enableFilter,表示支持過濾列,enableSorting表示支持排序。
這就完成了對ag-grid組件的簡單使用,一下是截圖
具體的代碼已上傳至github,關於ag-grid表格的更多用法,敬請期待下一節。如有疑問,歡迎在評論區提問。