Ag-Grid学习-angular8

- 日理万妓 2024-04-18 17:36 56阅读 0赞

# 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>

结果是这样

![format_png][]

想要使用排序的功能，在表头加上 sortable:true

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>排序</td> 
   <td>sortable:true</td> 
  </tr> 
  <tr> 
   <td>过滤</td> 
   <td>filter:true</td> 
  </tr> 
  <tr> 
   <td>单选</td> 
   <td>checkboxselection:true/ 需要加上rowSelection="multiple"</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

添加分组：

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"

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuYWctZ3JpZC5jb20vZ2V0dGluZy1zdGFydGVkL3N0ZXAxLnBuZw?x-oss-process=image/format,png