ag-grid 学习笔记二：常用功能（多表头、固定列、宽度设置和位置、数据筛选器、表格编辑）

目录

一 多表头

二 固定列

三 拖动改变列的宽度和位置

四 数据筛选器

五 编辑表格

六 所有代码

---

一 多表头

1.合并两层表头

        合并表头，在第一层表头下加children子项即可。例如：

     //定义表格列
        var columnDefs = [
            {
                headerName: '分组A',
                children: [
                    { headerName: '姓名', field: 'name', 'pinned': 'left' },
                    { headerName: '性别', field: 'sex' },
                ]
            },
            {
                headerName: '分组B',
                children: [{ headerName: '年龄', field: 'age' },
                { headerName: '籍贯', field: 'jg' },
                { headerName: '省份', field: 'sf' },
                { headerName: '地址', field: 'dz' }
                ]
            }
        ];

效果图如下： 

可是你会发现，分组A并没有对表头进行合并。原因是：姓名列被固定到了左边，所以在合并的时候，必须将性别那列也设置为固定，才能将姓名和性别合并列。具体代码如下：

       var columnDefs = [
            {
                headerName: '分组A',
                children: [
                    { headerName: '姓名', field: 'name', 'pinned': 'left' },   //同合并列的数据，是否固定属性必须要一致
                    { headerName: '性别', field: 'sex' ,'pinned': 'left'},
                ]
            },
            {
                headerName: '分组B',
                children: [{ headerName: '年龄', field: 'age' },
                { headerName: '籍贯', field: 'jg' },
                { headerName: '省份', field: 'sf' },
                { headerName: '地址', field: 'dz' }
                ]
            }
        ];

具体效果如下： 

                                            

2.合并三层表头

      三层列合并，若是最上层是一列时，设置固定列会导致三层合并失效。比如以下代码：

var columnDefs = [
            {
                headerName: '最顶层分组'
                , children: [
                    {
                        headerName: '分组A',
                        children: [
                            { headerName: '姓名', field: 'name' ,'pinned': 'left'},
                            { headerName: '性别', field: 'sex','pinned': 'left' }
                        ]
                    },
                    {
                        headerName: '分组B',
                        children: [
                            { headerName: '年龄', field: 'age' },
                            { headerName: '籍贯', field: 'jg' },
                            { headerName: '省份', field: 'sf' },
                            { headerName: '地址', field: 'dz' }
                        ]
                    }]
            }
        ];

上述代码结果为：

                              

所以，当表头最终合并为只有一列时，不要设置固定列（pinned）

以下为正确代码以及效果图：

 var columnDefs = [
            {
                headerName: '最顶层分组'
                , children: [
                    {
                        headerName: '分组A',
                        children: [
                            { headerName: '姓名', field: 'name' },
                            { headerName: '性别', field: 'sex'}
                        ]
                    },
                    {
                        headerName: '分组B',
                        children: [
                            { headerName: '年龄', field: 'age' },
                            { headerName: '籍贯', field: 'jg' },
                            { headerName: '省份', field: 'sf' },
                            { headerName: '地址', field: 'dz' }
                        ]
                    }]
            }
        ];

                     

设置文字居中：

.ag-header-cell-label { justify-content: center; }

二 固定列

固定列使用pinned属性设置。

1.固定在右边

 //定义表格列
var columnDefs = [
    { headerName: '姓名', field: 'name','pinned': 'right' }
];

2.固定在左边

var columnDefs = [
    { headerName: '姓名', field: 'name','pinned': 'left' }
];

三 拖动改变列的宽度和位置

      

 defaultColDef: {  
        resizable: true,//是否开启调整列大小，就是拖动改变列大小
    }     

 defaultColDef: {  
       lockPosition: false //禁止拖动列的位置
    }     

四 数据筛选器

数据筛选器有两种，一种是自己设置筛选列，筛选条件；一种是默认筛选器。

1.设置筛选列。

数据筛选器有三种类型，分别是数字类型、字符串类型和时间类型。

类型	功能
agNumberColumnFilter	数字类型过滤器，提供大于、小于、等于、不等于、区间数字比较
agTextColumnFilter	字符串类型筛选器，提供包含、不包含、等于、开始等于、结束等于比较
agDateColumnFilter	时间类型筛选器，提供大于、小于、等于、不等于、区间数字比较

 

 

 

 

设置是否开启筛选：

defaultColDef: { 
        filter: true  //所有列开启刷选器
    },

具体用法如下：

在定义表格列的时候，就需要设置刷选器，将需要筛选的列设置好。

     var columnDefs = [
            {
                headerName: '最顶层分组'
                , children: [
                    {
                        headerName: '分组A',
                        children: [
                            //设置字符串筛选方式，设定姓名这一列可以筛选
                            { headerName: '姓名', field: 'name' ,filter: 'agTextColumnFilter'},
                            { headerName: '性别', field: 'sex' }
                        ]
                    },
                    {
                        headerName: '分组B',
                        children: [
                            { headerName: '年龄', field: 'age' },
                            { headerName: '籍贯', field: 'jg' },
                            { headerName: '省份', field: 'sf' },
                            { headerName: '地址', field: 'dz' }
                        ]
                    }]
            }
        ];

 实现效果如下：

                                                   

注：如果只开启这一列的筛选，则上面的  filter属性需要设置为false，如果需要全部开启，则设置为true。但是其他列没有在列定义时设置筛选模式，则会显示表格默认的筛选方式。如下图：

                                            

2.第二种是表格默认的筛选器，不用专门在定义列的时候设置筛选类型。就只是设置属性filter为true即可。筛选模式默认显示，就如上图所示。

3.表格中直接显示筛选器。

      一般情况下，筛选器是没有直接显示出来的，都是点击列头，在列头中进行筛选，另一种情况是将筛选器直接显示出来。那就设置floatingFilter属性为true即可。如下示例：

 var gridOptions = {
            columnDefs: columnDefs,   
            rowData: data,  
            onGridReady: function () {
                
                gridOptions.api.sizeColumnsToFit(); 
            },
            defaultColDef: {
                editable: true, 
                lockPosition:true,
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true,  
                resizable: true, 
                filter: false  
            },
            pagination: true,   
            paginationAutoPageSize: true,  
            floatingFilter:true     //设置是否直接显示过滤器
        };

具体效果如图所示：

            

注意：如果需要将过滤器直接显示出来，就必须在列定义的时候设置列过滤（filter: 'agTextColumnFilter'），不能使用表格默认的过滤方式。否则并无过滤功能，效果如下图显示：

                              

五 编辑表格

              表格默认是不可编辑的，编辑表格分成编辑行和编辑单元格。 

 

    1.单元格编辑。

        设置单元格可编辑需要设置属性editable。为true的时候可以编辑，为false的时候不可以编辑。编辑完成后可以触发onCellEditingStopped事件，可以针对修改做一些其他操作。

   var gridOptions = {
            columnDefs: columnDefs,  //设置列名
            rowData: data,  //设置数据
            onGridReady: function () {
                //表格创建完成后执行的事件
                gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
            },
            defaultColDef: {
                editable: true,//单元表格是否可编辑
                lockPosition: true,
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true, //开启排序
                resizable: true,//是否可以调整列大小，就是拖动改变列大小
                filter: true  //开启刷选
            },
            pagination: true,  //开启分页（前端分页）
            paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
            floatingFilter: true,   //是否显示筛选器

            //单元格编辑完成事件**************************
            onCellEditingStopped: function (event) {
                var itxst = JSON.stringify(event.data);
                alert(itxst);  //编辑完成后弹出数据
            },
        };

具体效果如果图所示，将王五改成小五：

                                     

2.行编辑。

      表格不仅可以只编辑一个单元格，还可以编辑一整行。这个不仅需要先设置单元格可编辑（editable：true），还要设置属性： editType: "fullRow"。编辑一行也有行编辑完成事件。具体如以下代码：

 

 var gridOptions = {
            columnDefs: columnDefs,  //设置列名
            rowData: data,  //设置数据
            onGridReady: function () {
                //表格创建完成后执行的事件
                gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
            },
            defaultColDef: {
                 editable: true,//单元表格是否可编辑（不管是只编辑一个单元格或者需要编辑一行，这个属性都需要设置为true）
                lockPosition: true,
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true, //开启排序
                resizable: true,//是否可以调整列大小，就是拖动改变列大小
                filter: true  //开启刷选
            },
            pagination: true,  //开启分页（前端分页）
            paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
            floatingFilter: true,   //是否显示筛选器
            editType: "fullRow", //开启行编辑
            //行编辑完成事件
            onRowEditingStopped: function (event) {
                var itxst = JSON.stringify(event.data);
                alert(itxst);
            },

            //单元格编辑完成事件**************************
            // onCellEditingStopped: function (event) {
            //     var itxst = JSON.stringify(event.data);
            //     alert(itxst);  //编辑完成后弹出数据
            // },
        };

效果如下图：

                                  

六 以上所有涉及到的代码如下：

 

此篇自学笔记从ag-grid中文教程 ag-grid 中文教程学习而来。