ag-grid将列标题设置为复选框,并执行全选或取消选择所有列,而不仅仅是组

时间:2016-01-18 02:44:45

标签: javascript angularjs ag-grid

使用ag-grid时,我想将第一个列标题设置为复选框,并在除了组之外的所有行上执行全部选择或取消选择所有列操作。

1 个答案:

答案 0 :(得分:4)

在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