Ag-Grid学习
1.添加ag-grid的npm软件包:
cnpm install --save ag-grid-community ag-grid-angular
2.将ag-grid Angular模块添加到Angular项目中的app模块(app.module.ts)中
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AgGridModule } from 'ag-grid-angular'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AgGridModule.withComponents([]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
其中withComponent可以不用写
3.将样式导入(styles.scss)
@import "~ag-grid-community/dist/styles/ag-grid.css"; @import "~ag-grid-community/dist/styles/ag-theme-balham.css";
这样基本的工作就完成了
在使用上面:
就是定义一个数据,一个表头
比如:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app'; columnDefs = [ //定义的表头 {headerName: 'Make', field: 'make' }, {headerName: 'Model', field: 'model' }, {headerName: 'Price', field: 'price'} ]; rowData = [ //定义的数据,这个可以动态的获取 { make: 'Toyota', model: 'Celica', price: 35000 }, { make: 'Ford', model: 'Mondeo', price: 32000 }, { make: 'Porsche', model: 'Boxter', price: 72000 } ]; }
而在前端的html中展示是这样的
<ag-grid-angular style="width: 500px; height: 500px;" //设置表格属性的宽高 class="ag-theme-balham" //这个不知道 [rowData]="rowData" [columnDefs]="columnDefs" > </ag-grid-angular>
结果是这样
想要使用排序的功能,在表头加上 sortable:true
功能 | 属性 |
---|---|
排序 | sortable:true |
过滤 | filter:true |
单选 | checkboxselection:true/ 需要加上rowSelection="multiple" |
添加分组:
1.安装功能:
cnpm install --save ag-grid-enterprise
2.加入到app.module中
import 'ag-grid-enterprise';
3.启用分组
1.在表头加入分组属性: rowGroup:true 2.添加autoGroupColumnDef属性并将其更改columnDefs为以下内容 autoGroupColumnDef = { headerName: 'Model', field: 'model', cellRenderer: 'agGroupCellRenderer', cellRendererParams: { checkbox: true } }; 3.前端html页面: [autoGroupColumnDef]="autoGroupColumnDef"