通过外部按钮刷新行数据时取消选择 Ag-Grid 全选复选框答案

【问题标题】：Deselecting Ag-Grid select-all checkbox when the row data is refreshed via an outside button通过外部按钮刷新行数据时取消选择 Ag-Grid 全选复选框
【发布时间】：2017-05-23 04:22:24
【问题描述】：

我在网格的第一行使用带有复选框的普通 ag-grid，以允许用户选择一行。我在网格的标题中还有一个全选复选框，它允许用户一键轻松选择所有复选框和行。我使用以下代码创建了全选复选框：

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

我的用户希望自己包含一个“刷新数据”按钮，该按钮允许用户刷新网格中的数据，实质上是将新的行数据传递到组件中。它只会重新加载行数据。这里的问题是，因为它只刷新行数据，所以全选复选框保持选中状态，而其余行被刷新和取消选中。刷新行数据时，有没有办法取消选中标题中的全选复选框？有什么可以在那里收听的事件吗？

我的带有复选框的网格看起来与此非常相似： https://cloud.githubusercontent.com/assets/4819263/7002796/abb1e6da-dc50-11e4-9fde-3abd8de19261.png

感谢您的帮助

【问题讨论】：

标签： javascript jquery angularjs ag-grid

【解决方案1】：

尝试将 id 或 ng-model 添加到复选框，并在使用 id 将新数据加载到网格后选中所有复选框 true，检查以下代码 ---

function selectAllRenderer(params) {
    $scope.selectAll=true;
    var cb = document.createElement('input');
    cb.setAttribute('type', 'checkbox');
    cb.setAttribute('id','selectAll');
    cb.setAttribute('ng-model','selectAll');
    cb.setAttribute('ng-click','selectAllCheckbox(selectAll)');

    var eHeader = document.createElement('label');
    eHeader.setAttribute("style","display:inline");
    var eTitle = document.createTextNode(params.colDef.headerName);
    eHeader.appendChild(cb);
    eHeader.appendChild(eTitle);

    cb.addEventListener('change', function () {
        if ($(this)[0].checked) {
            params.api.selectAll();
        } else {
            params.api.deselectAll();
        } 
    });
    return eHeader; 
}


$scope.selectAllCheckbox = function(checked){
    if(checked===true){
        $scope.selectAll = false;
    }else{
        $scope.selectAll=true;
    }
}

加载网格数据后尝试添加以下代码--

j$('#selectAll').checked=true;

或

使用 angularjs 有 ng-model 并在加载数据后设置为 true。

【讨论】：