ag-Grid的基本用法一（表格列的定义）

         最近在研究基于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',
filt
c631
erParams: {
// 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表格的更多用法，敬请期待下一节。如有疑问，欢迎在评论区提问。