Я использую 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();
}
};
Я делаю все ячейки последнего столбца доступными для редактирования за один раз, но когда я щелкаю одну из них, все остальные ячейки прекращают редактировать, и поле ввода исчезает.
введите описание изображения здесь