一 setRowData重新设置表格行数据
重新设置表格数据很简单，只需要调用 gridOptions.api.setRowData(数据集)接口传入数据即可。
以下函数为调用方式。
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
代码如下：
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
代码如下：
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
代码如下：
function delSetRows() {
gridOptions.rowData.splice(0, 1);//删除第一行数据
gridOptions.api.setRowData(gridOptions.rowData);
}
（2） api.updateRowData
代码如下：
function delRowNode() {
var selRows = gridOptions.api.getSelectedRows(); //获取选中的行
if (selRows.length <= 0) {
alert("请选中一行数据");
}
gridOptions.api.updateRowData({ remove: selRows });
}
5. 新增行数据
新增行数据有三种方式。
（1） 通过api.setRowData新增行
代码如下：
function add1() {
var newRow = {
name: '新增行1',
sex: '男',
age: 11
};
gridOptions.rowData.push(newRow)
gridOptions.api.setRowData(gridOptions.rowData);
}
（2） 通过updateRowData新增
代码如下：
function add2() {
var newRows = [{
name: '新增行2',
sex: '女',
age: 12
}];
gridOptions.api.updateRowData({ add: newRows });
}
（3） 新增到指定行
代码如下：
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();接口
四 setColumnDefs新增列
新增列，具体功能看以下代码：
function addColumn() {
columnDefs.push({ headerName: '地址', field: 'address' });
gridOptions.api.setColumnDefs(columnDefs);
//调整表格大小自适应
gridOptions.api.sizeColumnsToFit();
}五 插入新行
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);
onGridReady: function () {
//表格创建完成后执行的事件
gridOptions.api.sizeColumnsToFit();//调整表格大小自适应,若是不设置，则表格可能不能充满容器
staticsCount();
}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为例子：
function ForeachAllRows() {
var rowNode = gridOptions.api.forEachLeafNode(function (node, index) {
var x = JSON.stringify(node.data);
alert(x);
});
}八 获取置顶行数量和置顶行数据
getPinnedTopRowCount方法获取置顶行数量,而getPinnedTopRow方法返回对象为rowNode对象。
具体使用代码如下：
//置顶行行数
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对象。
具体使用代码如下：
//底部合计行行数
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获取行对象,行对象包含行原始数据、行高等各种属性。
具体使用代码如下所示：
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 | 单元格更新 | 双击单元格进行编辑更新数据 |
具体使用代码如下：
function refreshData() {
data[0].name = 'good'; //更新第一行的名字为good
var params = {
force: true
};
gridOptions.api.refreshCells(params);
}十二 单元格焦点相关方法
单元格相关的方法包含getFocusedCell、 setFocusedCell 、clearFocusedCell 、tabToNextCell 、tabToPreviousCell
//设置焦点
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();
}以下是这篇笔记所涉及到的所有代码，可以直接运行。
<!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中文教程 ，大部分东西都是从中学习而来。
扫一扫
2612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
