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

最新推荐文章于 2024-08-27 13:25:48 发布

Alex__Gong

最新推荐文章于 2024-08-27 13:25:48 发布

阅读量2.5w

点赞数 5

分类专栏： JavaScript ag-grid

本文链接：https://blog.csdn.net/GongZhongNian/article/details/78030628

版权

本文介绍了ag-Grid在angular2+中的基本使用，特别是表格列的定义。内容包括如何引入ag-Grid，详细解释了columnDefs属性，如headerName、field、filter、width等，以及如何设置列的可编辑性、固定列和子列。此外，还提到了自定义列类型和使用GridComponent组件的方法。文章提供了相关代码示例并鼓励读者在评论区提问。

摘要由CSDN通过智能技术生成

最近在研究基于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