ag-grid中文教程
ag-grid onRowClicked行点击事件
用户点ag-grid表格时响应的事件，返回点击的行数据和鼠标事件。
onRowClicked代码
var gridOptions = {
columnDefs: colData,
rowData: rowData,
enableCellChangeFlash: true,
//************************行内点击触发事件****************
onRowClicked: function(event) {
//event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
var itxst = JSON.stringify(event.data);
alert(itxst);
},
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 onRowClicked例子</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 id="itxst" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
<script>
//定义列
var colData = [
{ headerName: '名称', field: 'name', 'pinned': 'left' },
{ headerName: '剩余', field: 'col2' },
{ headerName: '销量', field: 'col3' },
];
//行数据
var rowData = [];
//模拟数据
for (var i = 1; i < 10; i++) {
rowData.push({ name: 'YO-' + i, col2: 612 * i, col3: 321 * i });
}
//将列和数据赋给gridOptions
var gridOptions = {
columnDefs: colData,
rowData: rowData,
enableCellChangeFlash: true,
//行内点击触发事件
onRowClicked: function (event) {
//event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下
console.log('a row was clicked', event);
var itxst = JSON.stringify(event.data);
alert(itxst);
},
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);
});
</script>
</body>
</html>