ag-grid forEachNode遍历行对象

ag-grid forEachNode方法遍历行对象,参数为回调方法,执行回调方法时会传入node行节点对象和index当前索引,类似js的数组的forEach方法。注意遍历的是所有行包含被筛选过滤的行。forEachNodeAfterFilter方法遍历的筛选后的行,forEachNodeAfterFilterAndSort循环筛选排序后的行。forEachNode返回包含所有的行节点对象,包括分组产生的新行(行组就是类似树形结构的显示效果),而forEachLeafNode方法只返回原始数据产生的行数据。

forEachNode方法

//遍历行所有的行对象(包含分组产生的行)
function func1() {
    var rowNode = gridOptions.api.forEachNode(function (node, index) {
        var x = JSON.stringify(node.data);
        alert(x);
    });
}
//定义列
var colData = [
    { headerName: '名称', field: 'cl1', 'pinned': 'left' },
    { headerName: '库存', field: 'cl2' },
    { headerName: '销量', field: 'cl3' },
];

//行数据
var rowData = [
    { cl1: 'itxst.com', cl2: 20101, cl3: 23123 }
];

//多模拟几行数据出来
for (var i = 1; i < 2; i++) {
    rowData.push({ cl1: 'YKK11-' + i, cl2: 332 * i, cl3: 562 * i });
}

//将列和数据赋给gridOptions
var gridOptions = {
    columnDefs: colData,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    },
    defaultColDef: {
        enableRowGroup: true,
        enablePivot: true,
        enableValue: true,
        sortable: true,
    }
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#itxst');
    new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试

完整代码

<!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 forEachNode例子</title>
    <script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    <div style="margin-bottom: 10px;">
        <input type="button" value="遍历行" onclick="func1()" />
    </div>
    <div id="itxst" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
    <script>
//定义列
var colData = [
    { headerName: '名称', field: 'cl1', 'pinned': 'left' },
    { headerName: '库存', field: 'cl2' },
    { headerName: '销量', field: 'cl3' },
];

//行数据
var rowData = [
    { cl1: 'itxst.com', cl2: 20101, cl3: 23123 }
];

//多模拟几行数据出来
for (var i = 1; i < 2; i++) {
    rowData.push({ cl1: 'YKK11-' + i, cl2: 332 * i, cl3: 562 * i });
}

//将列和数据赋给gridOptions
var gridOptions = {
    columnDefs: colData,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    },
    defaultColDef: {
        enableRowGroup: true,
        enablePivot: true,
        enableValue: true,
        sortable: true,
    }
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#itxst');
    new agGrid.Grid(eGridDiv, gridOptions);
});

//遍历行对象
function func1() {
    var rowNode = gridOptions.api.forEachNode(function (node, index) {
        var x = JSON.stringify(node.data);
        alert(x);
    });
}
    </script>
</body>
</html>