angularjs + ag-grid: как настроить редактирование ячеек ag-grid так, чтобы я мог редактировать полные ячейки столбца одновременно? - PullRequest
0 голосов
/ 10 сентября 2018

Я использую angularjs v1.6.1 и ag-grid-enterprise v12.0.2

Я знаю, что ag-grid обеспечивает полное редактирование строк, так что пользователь может редактировать каждую ячейку строки одновременно. Однако я хочу настроить сетку для полного редактирования столбцов, чтобы пользователь мог редактировать каждую ячейку столбца одновременно. Я обнаружил, что настройка ag-grid по умолчанию останавливает редактирование ячейки, когда теряется фокус на ячейке, и это делает невозможным полное редактирование столбца.

Ниже моя сеткаОпция настройки:

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();
        }
    };

Я делаю все ячейки последнего столбца доступными для редактирования за один раз, но когда я щелкаю одну из них, все остальные ячейки прекращают редактировать, и поле ввода исчезает. введите описание изображения здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...