ag-grid设置选择行点击选中单行或多行

点击选中一行数据是表格里最常见的一种用户操作,那么ag-grid如何让用户点击选中一行数据,由如何获取选中的数据呢?

设置单行选中

//设置单行选中
var gridOptions = { 
    columnDefs: columnDefs,
    rowSelection: 'single', //设置单行选中
    rowData: data 
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});
在线试一试

设置可以多行选中

//设置单行选中
var gridOptions = { 
    columnDefs: columnDefs,
    rowSelection: 'multiple', //设置多行选中
    rowMultiSelectWithClick:true, //单击就选中,如果为false需要按ctrl再点击才能选中多行
    rowData: data 
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});
在线试一试

获取选中数据

 function getSelect()
 {
  //获取选中数据
  var rows=gridOptions.api.getSelectedRows();
  alert(JSON.stringify(rows)); 
 }