ag-grid 学习笔记四：ag-grid方法（重设行数据、增删改、反选、自适应、新增列、插入新行、合计行接口、遍历行对象、获取置顶行数量、获取底部合计行对象、获取行对象、刷新、单元格焦点）


一 setRowData重新设置表格行数据

重新设置表格数据很简单，只需要调用 gridOptions.api.setRowData(数据集)接口传入数据即可。
以下函数为调用方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function resetGrid() {
            //新的数据项
            var Newdata = [
                { name: '小明', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
                { name: '小花', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
                { name: '小张', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
                { name: '小蓝', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
                { name: '小华', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }
            ];
            //调用接口重新设置数据
            gridOptions.api.setRowData(Newdata);
        }
```
# 二 ag

二 ag-grid增加行删除行修改行

1. 更新行数据
更新行数据一共有两种接口方法，分别是rowNode.setData和api.updateRowData。
（1） rowNode.setData
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
function bySetRows() {
            //第一种方法,通过setData更新,首先获取需要更新的节点
            var rowNode = gridOptions.api.getRowNode(2);//获取表格第3行数据
            //更新数据
            var newRow = {
                id: '66',
                name: 'it小书童',
                url: 'itxst.com',
                catalog: Math.floor(Math.random() * 100000)
            };
            rowNode.setData(newRow);
        }

（2） api.updateRowData
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
function byRowNode() {
    var selRow = gridOptions.api.getSelectedRows(); //获取选中的行            
    if (selRow.length <= 0) {                
    alert("请选中一行数据");                
    return;            
    }
    selRow[0].name = '11111'; //更新选中数据的第一行            
    gridOptions.api.updateRowData(              
     {      
        update: selRow                
     });
}

3. 删除数据
删除行数据跟更新数据一样的，也是使用rowNode.setData和api.updateRowData这两种方式。
（1） rowNode.setData

代码如下：

1
2
3
4
 function delSetRows() {
            gridOptions.rowData.splice(0, 1);//删除第一行数据
            gridOptions.api.setRowData(gridOptions.rowData);
        }

（2） api.updateRowData

代码如下：

1
2
3
4
5
6
7
function delRowNode() {
            var selRows = gridOptions.api.getSelectedRows(); //获取选中的行
            if (selRows.length <= 0) {
                alert("请选中一行数据");
            }
            gridOptions.api.updateRowData({ remove: selRows });
        }

5. 新增行数据
新增行数据有三种方式。
（1） 通过api.setRowData新增行
代码如下：

1
2
3
4
5
6
7
8
9
 function add1() {
            var newRow = {
                name: '新增行1',
                sex: '男',
                age: 11
            };
            gridOptions.rowData.push(newRow)
            gridOptions.api.setRowData(gridOptions.rowData);
        }

（2） 通过updateRowData新增
代码如下：

1
2
3
4
5
6
7
8
 function add2() {
            var newRows = [{
                name: '新增行2',
                sex: '女',
                age: 12
            }];
            gridOptions.api.updateRowData({ add: newRows });
        }

（3） 新增到指定行
代码如下：

1
2
3
4
5
6
7
8
function add3() {          
    var newRows = [{                
    name: '插入行3',                
    sex: '女',                
    age: 44            
    }];            
    gridOptions.api.updateRowData({ add: newRows, addIndex: 1 });
}

三 ag-grid全选反选

1. 全选
调用gridOptions.api.selectAll();接口即可。
2. 清空选中
调用gridOptions.api.deselectAll();接口
3. 反选
暂时没有发现反选的接口。
4. 获取选中行
调用gridOptions.api.getSelectedRows();接口

四 sizeColumnsToFit自适应大小

ag-grid当渲染完后可以通过sizeColumnsToFit自适应表格大小，比如div容器是600px,假设你有两列宽度加起来300px,如你调用了sizeColumnsToFit方法，ag-grid将会让这两列填充满600px。
比如：下图是没有自适应的表格。

将表格添加自适应属性后，效果如下图所示：

五 setColumnDefs新增列

新增列，具体功能看以下代码：

1
2
3
4
5
6
 function addColumn() {
            columnDefs.push({ headerName: '地址', field: 'address' });
            gridOptions.api.setColumnDefs(columnDefs);
            //调整表格大小自适应
            gridOptions.api.sizeColumnsToFit();
        }

六 插入新行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  function addRow() {

            var newdata = {
                name: '马六',
                sex: '男',
                age: '100',
                address: '绵阳'
            };

            //data 是原始的数据
            data.push(newdata);
            //添加新的行
            gridOptions.api.setRowData(data);
        }

七 汇总行（汇总在底部和汇总在顶部）

在上篇也学习过汇总行，只不过本篇是调用接口进行汇总行设置，并在onGridReady: function ()中进行调用，而不是像上篇一样使用的属性，在顶部合计使用接口 gridOptions.api.setPinnedTopRowData(topRows);在底部合计使用： gridOptions.api.setPinnedBottomRowData(topRows);

1
2
3
4
5
   onGridReady: function () {
                //表格创建完成后执行的事件
                gridOptions.api.sizeColumnsToFit();//调整表格大小自适应,若是不设置，则表格可能不能充满容器
                staticsCount();
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
function staticsCount() {
            var age = 0;
             for (var i = 0; i < data.length; i++) {
                age = age + parseInt(data[i].age) ;
            }

            var topRows = [
                { name: '合计', age: age}
            ];

            gridOptions.api.setPinnedTopRowData(topRows);  //在顶部显示合计行
            gridOptions.api.setPinnedBottomRowData(topRows);  //在底部显示合计行
        }

实现结果：

八 遍历行对象

1.forEachNode方法遍历行对象，参数为回调方法，执行回调方法时会传入node行节点对象和index当前索引，类似js的数组的forEach方法。注意遍历的是所有行包含被筛选过滤的行；

2.forEachNodeAfterFilter方法遍历的筛选后的行；

3.forEachNodeAfterFilterAndSort循环筛选排序后的行；

4.forEachNode返回包含所有的行节点对象，包括分组产生的新行（行组就是类似树形结构的显示效果），而forEachLeafNode方法只返回原始数据产生的行数据。

以下代码是以foreachnode为例子：

1
2
3
4
5
6
 function ForeachAllRows() {
            var rowNode = gridOptions.api.forEachLeafNode(function (node, index) {
                var x = JSON.stringify(node.data);
                alert(x);
            });
        }

九 获取置顶行数量和置顶行数据

getPinnedTopRowCount方法获取置顶行数量,而getPinnedTopRow方法返回对象为rowNode对象。

具体使用代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
      //置顶行行数
        function GetTopRowCount() {
            var count = gridOptions.api.getPinnedTopRowCount();
            alert(count);
        }

        //置顶行数据
        function GetTopRowData() {
            var topRow = gridOptions.api.getPinnedTopRow(0);  //获取第一个置顶行数据
            var x = JSON.stringify(topRow.data);
            alert(x);
        }

十 获取底部行数量和置顶行数据

getPinnedBottomRowCount方法获取置顶行数量,而getPinnedBottomRow方法返回对象为rowNode对象。

具体使用代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
//底部合计行行数
        function GetBottomRowCount() {
            var count = gridOptions.api.getPinnedBottomRowCount();
            alert(count);
        }

        //底部合计行数据
        function GetBottomRowData() {
            var topRow = gridOptions.api.getPinnedBottomRow(0);  //获取第一个置顶行数据
            var x = JSON.stringify(topRow.data);
            alert(x);
        }

十一 getRowNode获取行对象

getRowNode获取行对象,行对象包含行原始数据、行高等各种属性。

具体使用代码如下所示：

1
2
3
4
5
   function GetRowDatas() {
            var rowNode = gridOptions.api.getRowNode(2); //获取第三行数据
            var x = JSON.stringify(rowNode.data);
            alert(x);
        }

效果如下图

十二

十二 refreshCells刷新更新数据

ag-grid可以通过refreshCells方法来更新表格显示的数据（也可以通过updateRowData 或者 updateRowData）更新。

方法 说明 应用场景
updateRowData 整个表格更新 分页加载的全部数据
updateRowData 整行数据更新 选中行弹出层，编辑表单
refreshCells 单元格更新 双击单元格进行编辑更新数据

具体使用代码如下：

1
2
3
4
5
6
7
  function refreshData() {
            data[0].name = 'good';  //更新第一行的名字为good
            var params = {
                force: true
            };
            gridOptions.api.refreshCells(params);
        }

十三 单元格焦点相关方法

单元格相关的方法包含getFocusedCell、 setFocusedCell 、clearFocusedCell 、tabToNextCell 、tabToPreviousCell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
        //设置焦点
        function setFocusedCell() {
            //cell对象为{rowIndex: 0, column: Column, floating: null}
            var cell = gridOptions.api.setFocusedCell(2, 'name', null);
        }
        //取当前焦点的单元格
        function getFocusedCell() {

            var cell = gridOptions.api.getFocusedCell();
        }
        //清除焦点
        function clearFocusedCell() {
            gridOptions.api.clearFocusedCell();
        }
        //设置下一个单元格为当前焦点
        function tabToNextCell() {
            gridOptions.api.tabToNextCell();
        }
        //设置上一个单元格为当前焦点
        function tabToPreviousCell() {
            gridOptions.api.tabToPreviousCell();
        }

以下是这篇笔记所涉及到的所有代码，可以直接运行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid入门示例</title>
    <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>

</head>

<!-- 此页面包含功能：点击按钮实现全选和反选、 列自适应大小-->

<body>
    <input type="button" value="全选" onclick="func1()" />
    <input type="button" value="清空选中" onclick="func2()" />
    <input type="button" value="反选（暂未实现）" onclick="func3()" />
    <input type="button" value="获取选中行" onclick="func4()" />
    <input type="button" value=" 新增列 " onclick="addColumn()" />
    <input type="button" value=" 新增行 " onclick="addRow()" />
    <input type="button" value="遍历行" onclick="ForeachAllRows()" />
    <input type="button" value="获取置顶行数量" onclick="GetTopRowCount()" />
    <input type="button" value="获取置顶行对象" onclick="GetTopRowData()" />
    <input type="button" value="获取底部合计行数量" onclick="GetBottomRowCount()" />
    <input type="button" value="获取底部合计行对象" onclick="GetBottomRowData()" />
    <input type="button" value="获取行对象" onclick="GetRowDatas()" />
    <input type="button" value="更新数据" onclick="refreshData()" />
    <input type="button" value="setFocusedCell" onclick="setFocusedCell()" />
    <input type="button" value="getFocusedCell" onclick="getFocusedCell()" />
    <input type="button" value="clearFocusedCell" onclick="clearFocusedCell()" />
    <input type="button" value="tabToNextCell" onclick="tabToNextCell()" />
    <input type="button" value="tabToPreviousCell" onclick="tabToPreviousCell()" />
    <div style="width: 100%;height:100%;">
        <div id="myGrid" style="width: 80%;height: 500px;" class="ag-theme-alpine"></div>
    </div>

    <script>
        //定义表格列
        var columnDefs = [
            {
                headerName: '姓名',
                field: 'name',
                'pinned': 'left',
                width: '100',
                checkboxSelection: true, //设置数据复选框
                headerCheckboxSelection: true  //列头设置复选框
            }, {
                headerName: '性别',
                width: '100',
                field: 'sex'
            }, {
                headerName: '年龄',
                width: '100',
                field: 'age'
            }
        ];


        //与列对应的数据; 属性名对应上面的field
        var data = [
            {
                name: '张三',
                sex: '男',
                age: '100',
                address: '绵阳'
            }, {
                name: '李四',
                sex: '女',
                age: '5',
                address: '广州'

            }, {
                name: '王五',
                sex: '男',
                age: '35',
                address: '成都'

            }
        ];

        //将列和数据赋给gridOptions
        var gridOptions = {
            columnDefs: columnDefs,  //设置列名
            rowData: data,  //设置数据
            /***********************************2.设置表格大小自适应*********************************/
            onGridReady: function () {
                //表格创建完成后执行的事件
                gridOptions.api.sizeColumnsToFit();//调整表格大小自适应,若是不设置，则表格可能不能充满容器
                staticsCount();
            },
            defaultColDef: {
                editable: true,//单元表格是否可编辑
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true, //开启排序
                resizable: true,//是否可以调整列大小，就是拖动改变列大小
                filter: true  //开启刷选
            },
            pagination: true,  //开启分页（前端分页）
            paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
            rowSelection: 'multiple'

        };

        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#myGrid');  //myGrid 是容器div的ID
            new agGrid.Grid(eGridDiv, gridOptions);
        });


        /*******************************************1.全选、反选、按条件筛选、获取选中行************************************************/
        //全选
        function func1() {
            gridOptions.api.selectAll();
        }
        //清空选中
        function func2() {
            gridOptions.api.deselectAll();
        }
        //反选
        function func3() {
            // gridOptions.api.selectAllFiltered();
            gridOptions.api.deselectAllFiltered();
        }
        //获取选中行数据
        function func4() {
            var rows = gridOptions.api.getSelectedRows();
            alert(JSON.stringify(rows));
        }


        /*******************************************3.新增列************************************************/
        function addColumn() {
            columnDefs.push({ headerName: '地址', field: 'address' });
            gridOptions.api.setColumnDefs(columnDefs);
            //调整表格大小自适应
            gridOptions.api.sizeColumnsToFit();
        }

        /**********************************************4.插入新行*********************************************************/

        function addRow() {

            var newdata = {
                name: '马六',
                sex: '男',
                age: '100',
                address: '绵阳'
            };

            //data 是原始的数据
            data.push(newdata);
            //添加新的行
            gridOptions.api.setRowData(data);
        }


        /**********************************************5.插入新行*********************************************************/
        function staticsCount() {
            var age = 0;
            for (var i = 0; i < data.length; i++) {
                age = age + parseInt(data[i].age);
            }

            var topRows = [
                { name: '合计', age: age }
            ];

            gridOptions.api.setPinnedTopRowData(topRows);  //在顶部显示合计行
            gridOptions.api.setPinnedBottomRowData(topRows);  //在底部显示合计行
        }

        /**********************************************6.遍历行对象*********************************************************/

        function ForeachAllRows() {
            var rowNode = gridOptions.api.forEachLeafNode(function (node, index) {
                var x = JSON.stringify(node.data);
                alert(x);
            });
        }


        /**********************************************7.获取置顶行行数以及数据*********************************************************/

        //置顶行行数
        function GetTopRowCount() {
            var count = gridOptions.api.getPinnedTopRowCount();
            alert(count);
        }

        //置顶行数据
        function GetTopRowData() {
            var topRow = gridOptions.api.getPinnedTopRow(0);  //获取第一个置顶行数据
            var x = JSON.stringify(topRow.data);
            alert(x);
        }
        /**********************************************8.获取底部合计行数以及数据*********************************************************/

        //底部合计行行数
        function GetBottomRowCount() {
            var count = gridOptions.api.getPinnedBottomRowCount();
            alert(count);
        }

        //底部合计行数据
        function GetBottomRowData() {
            var topRow = gridOptions.api.getPinnedBottomRow(0);  //获取第一个置顶行数据
            var x = JSON.stringify(topRow.data);
            alert(x);
        }

        /**********************************************9.获取行对象*********************************************************/
        function GetRowDatas() {
            var rowNode = gridOptions.api.getRowNode(2); //获取第三行数据
            var x = JSON.stringify(rowNode.data);
            alert(x);
        }
        /**********************************************10.更新数据*********************************************************/
        function refreshData() {
            data[0].name = 'good';  //更新第一行的名字为good
            var params = {
                force: true
            };
            gridOptions.api.refreshCells(params);
        }
        /**********************************************11.表格焦点相关*********************************************************/

        //设置焦点
        function setFocusedCell() {
            //cell对象为{rowIndex: 0, column: Column, floating: null}
            var cell = gridOptions.api.setFocusedCell(2, 'name', null);
        }
        //取当前焦点的单元格
        function getFocusedCell() {

            var cell = gridOptions.api.getFocusedCell();
        }
        //清除焦点
        function clearFocusedCell() {
            gridOptions.api.clearFocusedCell();
        }
        //设置下一个单元格为当前焦点
        function tabToNextCell() {
            gridOptions.api.tabToNextCell();
        }
        //设置上一个单元格为当前焦点
        function tabToPreviousCell() {
            gridOptions.api.tabToPreviousCell();
        }
    </script>
</body>

</html>

这个代码界面如图所示：

注：

此篇笔记学习自 ag-grid中文教程 ，大部分东西都是从中学习而来。