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

时光总嘲笑我的痴心妄想 提交于 2019-12-24 01:45:01

问题


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.


回答1:


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

In that file define the renderer:

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



来源:https://stackoverflow.com/questions/34846521/ag-grid-set-the-column-header-to-be-a-checkbox-and-do-the-select-all-or-deselect

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!