ag-grid checkbox设置复选框

本篇演示ag-grid全选反选功能，并把checkbox复选框固定再第一列及获取选中的值。

//定义表格列(复选框) ******重要*********************
var columnDefs = [
    {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        'pinned': 'left', //固定再左边
        width: 50 //列的宽度
    },
    {
        headerName: '姓名', field: 'name', filter: 'agTextColumnFilter'
    },
    { headerName: '性别', field: 'sex' },
    { headerName: '年龄', field: 'age', filter: 'agNumberColumnFilter' },
    { headerName: '生日', field: 'sr', filter: 'agNumberColumnFilter' }
];



//模拟数据
var data = [
    { id: 1, name: '张三', sex: '男', age: 100, 'sr': 1918 },
    { id: 2, name: '李四', sex: '女', age: 5, 'sr': 2000 },
    { id: 3, name: '王五', sex: '女', age: 20, 'sr': 2018 },
    { id: 4, name: '王五', sex: '女', age: 26, 'sr': 2018 },
    { id: 5, name: '王五', sex: '男', age: 5, 'sr': 2018 },
    { id: 6, name: '王五', sex: '男', age: 35, 'sr': 2018 },
    { id: 7, name: '王五', sex: '男', age: 35, 'sr': 2018 },
    { id: 8, name: '王五', sex: '男', age: 3, 'sr': 2018 },
    { id: 9, name: '王五', sex: '男', age: 35, 'sr': 2018 },
    { id: 10, name: 'itxst.com', sex: '男', age: 35, 'sr': 2018 }
];

//设置可以多行选中  ******重要*************************
var gridOptions = {
    columnDefs: columnDefs,
    rowData: data,
    rowSelection: 'multiple', //设置多好可选
    rowMultiSelectWithClick: true, //点击及选择复选框
    suppressCellSelection: true //点击不选中单元格
};
//在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));
}

在线试一试