ag-grid 將列標題設置為復選框，並進行全選或取消全選列，而不是僅組

Question

使用 ag-grid 時，我想將第一列標題設置為復選框，並對除組以外的所有行執行全選或取消全選列操作。

Answer 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功能討論

Answer 2

如果有人來這里尋找答案，此功能已經在 ag-grid 中，只需將headerCheckboxSelection: true放在您的列定義中。

在此處查看文檔