转载至：https://blog.csdn.net/WQearl/article/details/106670953
<div id="content_views" class="htmledit_views">
<h3><a name="t0"></a> 一 setRowData重新设置表格行数据</h3>
重新设置表格数据很简单，只需要调用 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中文教程 ，大部分东西都是从中学习而来。
扫一扫
7892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
