ag-grid将列标题设置为复选框，然后执行“全选”或“取消全选”列，而不仅仅是组

问题描述

使用ag-grid时，我想将第一列标题设置为复选框，并在不只是组的所有行上执行全选或取消全列操作。

when using ag-grid, I want to set the first column header to be a checkbox,and do the select all or deselect all column action on all rows other than only groups.

推荐答案

在gridOptions中：

In gridOptions:

angularCompileHeaders: true

在定义列的位置，如下定义第一列：

Where you are defining your columns, define the first column as such:

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

请注意，创建者当前正在使此功能生效，但这是当前的解决方法。在此处查看更新和更通用的非角度版本：

Please note that the creator is currently working on making this a feature, but this is the current work-around. Check here for updates and a more generic non-angular version: selectAll Feature Discussion

这篇关于ag-grid将列标题设置为复选框，然后执行“全选”或“取消全选”列，而不仅仅是组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！