ag-grid 将列 header 设置为复选框，并执行 select 全部或取消 select 所有列，而不是仅组

Question

当使用 ag-grid 时，我想将第一列 header 设置为一个复选框，然后执行 select all 或 deselect all 列操作除了组之外的所有行。

Answer 1

在网格选项中：

angularCompileHeaders: true

在定义列的位置，将第一列定义为：

{
   field: 'RowSelect',
   headerName: ' ',
   checkboxSelection: true,
   suppressMenu: true,
   suppressSorting: true,
   headerCellRenderer: selectAllRenderer
 },

在该文件中定义渲染器：

function selectAllRenderer(params) {
    var cb = document.createElement('input');
    cb.setAttribute('type', 'checkbox');

    var eHeader = document.createElement('label');
    var eTitle = document.createTextNode(params.colDef.headerName);
    eHeader.appendChild(cb);
    eHeader.appendChild(eTitle);

    cb.addEventListener('change', function (e) {
        if ($(this)[0].checked) {
            params.api.selectAll();
        } else {
            params.api.deselectAll();
        } 
    });
    return eHeader; 
}

请注意，创建者目前正在努力使此功能成为一项功能，但这是当前的解决方法。在此处查看更新和更通用的非 angular 版本：selectAll Feature Discussion

Answer 2

如果有人来这里寻找答案，此功能已在 ag-grid 中，只需将 headerCheckboxSelection: true 放入您的专栏定义中即可。

查看文档 here

ag-grid 将列 header 设置为复选框，并执行 select 全部或取消 select 所有列，而不是仅组

ag-grid set the column header to be a checkbox,and do the select all or deselect all column,other than only groups

javascript

angularjs

ag-grid