angularjs + ag-grid：如何自定义ag-grid单元格编辑，以便可以一次编辑完整的列单元格？

Question

我正在使用angularjs v1.6.1和ag-grid-enterprise v12.0.2

我知道ag-grid提供了全行编辑，用户可以一次编辑每个行单元格。但是，我想自定义网格以进行全列编辑，以便用户可以一次编辑每个列单元格。我发现，当丢失重点放在某个单元格上时，ag-grid的默认设置将停止单元格编辑，这将导致无法进行全列编辑。

下面是我的gridOption设置：

var doorSettingColDef = [
        {headerName: "區域", field: "area", filter: 'date',
            cellRenderer: function(params) {
                var rowID = 'ID'+params.rowIndex;
                var eDiv = document.createElement('div');

                eDiv.innerHTML = '<span class="my-css-class">' + params.value;
                eDiv.innerHTML += '<div class="pull-right" id="'+ rowID+'"><button type="button" class="btn btn-default btnAreaSetting btn-xs " data-toggle="modal" data-target="#doorSettingAreaModal" style="height: 24px;"><span class="caret"></span></button></div></span>';

                var eButton = eDiv.querySelectorAll('.btnAreaSetting')[0];
                eButton.addEventListener('click', function() {
                    modal.doorSettingAreaModal($scope, rowID);
                });
                return eDiv;
        }},
        {headerName: "門號ID", field: "doorID", filter: 'text'},
        {headerName: "顯示名稱", field: "displayName", filter: 'text', editable: true, newValueHandler:function(params) {
            var field = params.colDef.field;
            var data = params.data;
            var value = params.newValue;
            data[field] = value;
        }}
    ];

    $scope.rowData = [
        {area: 'Lobby', doorID: 'DC1008', displayName:''},
        {area: 'Lobby', doorID: 'DC1000', displayName:''},
        {area: 'VIP', doorID: 'DC1002', displayName:''},
        {area: 'VIP', doorID: 'DC1003', displayName:''},
        {area: 'VIP', doorID: 'DC1111', displayName:''},
        {area: '6F', doorID: 'DC1112', displayName:''},
        {area: '6F', doorID: 'DC1113', displayName:''},
        {area: '1F', doorID: 'CS0001', displayName:''},
        {area: '1F', doorID: 'CS0002', displayName:''}
    ];

    $scope.doorSettingGridOptions = {
        columnDefs: doorSettingColDef,
        enableColResize: true,
        enableFilter: true,
        enableSorting: true,
        rowData: $scope.rowData,
        rowHeight: 40,
        headerHeight: 40,
        suppressClickEdit: true,
        stopEditingWhenGridLosesFocus: false,
        suppressKeyboardEvent: true,
        onGridReady: function(params) {
            params.api.sizeColumnsToFit();
        }
    };

我一次使所有最后一列的单元格可编辑，但是当我单击其中的一个时，所有其他单元格将停止编辑，并且输入字段将消失 enter image description here