ag-grid 将列标题设置为复选框，并选择全部或取消选择所有列，而不是仅组答案

【问题标题】：ag-grid set the column header to be a checkbox,and do the select all or deselect all column,other than only groupsag-grid 将列标题设置为复选框，并选择全部或取消选择所有列，而不是仅组
【发布时间】：2016-04-23 03:21:05
【问题描述】：

使用 ag-grid 时，我想将第一列标题设置为复选框，并对除组以外的所有行执行全选或取消全选操作。

【问题讨论】：

标签： javascript angularjs ag-grid

【解决方案1】：

在gridOptions中：

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; 
}

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

【讨论】：

你能为此提供一个小提琴或plnkr吗？我正在尝试使用 ag-grid-vue，但没有成功
创建者更新了框架，现在有了一个选项，因此不再需要遵循我的自定义建议。请参阅我在上面发布的讨论链接，并查看“ceolter 于 2017 年 2 月 8 日评论此项目现已完成。下一个版本（未来几天）将选择标题复选框。”

【解决方案2】：

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

请参阅文档here

【讨论】：