ag-grid 学习笔记三：ag-grid设置（定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序）

目录

一 定义列

二 选择行

三 设置复选框

四 设置行高列宽

五 置顶合计行

六 底部合计行

七 行组

八 客户端排序

---

一 定义列

表格的列有如下常用属性。

名称	说明
headerName	显示的列名称，和数据没有关系显示给用户看的
field	字段，headerName对于的数据字段，如上面代码“姓名”列对应的数据字段是name
pinned	列固定（冻结列）的位置，，支持left right,把列固定在左边或者右边
valueFormatter	自定义过滤函数,比如数据库status字段存储了0或1数字，想前端网页把 0 显示为正常 1显示为删除，即可使用该属性 function nameFormatter(item) {      if(item.value==0) return "正常";      if(item.value==1) return "删除";      return "itxst";    }
filter	过滤器刷选器，定义了过滤器后用户就可以在列头部的输入框对数据进行刷选查找 默认提供了以下几种过滤器 agNumberColumnFilter 数字过滤器 agTextColumnFilter       文本过滤器 agDateColumnFilter       日期过滤器
width, minWidth, maxWidth	width, minWidth, maxWidth设置任意一个属性来控制列的宽度
hide	true隐藏 false显示
sort	前端排序方式 asc 顺序 desc倒序
sortable	设置true 用户点击列的表头可以进行排序。
resizable	true可以拖动改变列的大小，false不允许用户拖动改变列大小

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

二 选择行（复选框）

选择行是使用复选框来进行选择。

首先，设置列表复选框，在表头设置代码中添加如下属性便可以进行设置：

checkboxSelection: true, //设置数据复选框
headerCheckboxSelection: true  表头是否也显示复选框，用于全选反选用

 然后，设置复选框是用于多选还是单选，如果是mutiple则是多选，若是single则是单选。

  rowSelection: 'multiple', //设置多行选中 ，若是single  

 设置多行选中时，还可以控制多行选中的方式：

 rowMultiSelectWithClick:true, //单击就选中，如果为false需要按ctrl再点击才能选中多行

但是控制多选方式自己测试并未实现，还有待解决。

选中数据后，可以根据以下方式获取选中的数据，并转化为Json格式的数据。

  var rows=gridOptions.api.getSelectedRows(); //获取选中的数据
  var JsonData = JSON.stringify(rows));  //将数据转化为Json格式

 

三设置行高列宽

1.设置行高：在gridOptions 中设置rowHeight 即可。默认为25px。

动态设置行高：

//动态设置行高 重新设置为100px
function setHeight()
{
    ag.gridOptions.rowHeight=100;
    ag.gridOptions.api.resetRowHeights();
}

2.设置列宽：在gridOptions 中设置width即可。 

四 置顶合计行

可以通过pinnedTopRowData把一行或者多行数据置顶在表格的顶部，注意这些行不能选中、排序、刷选和分组。效果如下：

                      

 实现方式：设置置顶行数据data，然后在gridOptions中设置属性pinnedTopRowData，并把置顶行数据赋值给它,并可以用getRowStyle给置顶行数据设置样式。具体代码如下：

        //置顶行数据
        var pinnedTopRowData = [
            { name: '置顶行1', sex: '0', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' },
            { name: '置顶行2', sex: '1', age: '15', 'jg': '中国', 'sf': '顶部2', 'dz': '杭州市文一西路' }
        ];

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,   
            rowData: data, 
            onGridReady: function () {
                
                gridOptions.api.sizeColumnsToFit(); 
            },
            defaultColDef: {
                editable: true, 
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true,  
                resizable: true, 
                filter: true   
            },
            pagination: true,   
            paginationAutoPageSize: true, 
            rowSelection: 'multiple',   
            rowMultiSelectWithClick: true,
            rowDeselection: true,
            pinnedTopRowData: pinnedTopRowData,  //设置置顶行数据
            getRowStyle: function (params) {  //给置顶行数据设置样式
                if (params.node.rowPinned) {
                    return { 'font-weight': 'bold', 'color': 'red' };
                }
            },

        };

       上面的合计行数据是测试定义的死数据，实际上合计行需要对某些列的数据进行合计计算，这就需要遍历怎个列表的列，将同一列的值都加起来，就可以算作是合计行。

五 底部合计行

设置方式与设置置顶行一样，只不过使用的属性不同，置底合计行用的是：pinnedBottomRowData属性，getRowStyle方法同样可以渲染其属性。

六 行组

行组，即对行进行分组，只有企业版才有的功能。

效果图如下：

                      

要实现上面的效果，只需要在定义列的时候，在需要合并的列（比如上面的姓名）上加上属性： rowGroup:true即可。然后加上 hide:true属性隐藏本列。如果不隐藏本列，效果如下，看起来不太美观。

整个界面代码如下：

 

七 客户端排序

表格有自动排序的功能，点击列头就可自动排序。

                                                 

注：

此篇文章学习资源来自 ag-grid中文教程网 ag-grid ，在此表示非常感谢。