Как отключить выделение ячеек в ag-сетке?

У меня есть простая ag-сетка в проекте Angular, и я хочу отключить выбор ячеек в одном из ее столбцов. Также можно просто удалить синий контур по умолчанию во время выбора. Я просто не хочу визуального изменения ячейки, когда пользователь щелкает внутри нее. Как я могу это сделать?

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

Итак, как я могу удалить эту выделенную ячейку с синей рамкой?

Вот код, который у меня есть для этих определений столбцов:

this.columnDefs = [
  { headerName: 'One', field: 'one' },
  { headerName: 'Two', field: 'two' },
  { 
    // I want to disable selection of cells in this column
    headerName: 'I want no cell selection!', 
    field: 'three',   
    suppressNavigable: true,
    editable: false,
  }
];

Вот пример stackblitz, который я использовал для тестирования.

Вот снимок экрана с синей рамкой, которую я не хочу видеть в этом столбце:

Я не хочу видеть синюю рамку


angular ag-grid ag-grid-angular ag-grid-ng2
person Chris Farmer    schedule 14.06.2018    source источник
comment
Пожалуйста, помогите stackoverflow.com/questions/65018177/   -  person NeverGiveUp161    schedule 03.12.2020

Ответы (5)


arrow_upward
34
arrow_downward

Обратите внимание, что если мы установим gridOption.suppressCellSelection = true, мы можем отключить выбор ячеек для всех ячеек столбцов.

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

Вы можете добиться этого с помощью бит CSS и cellClass свойства ColDef.

Вам нужно будет добавить ниже CSS.

.ag-cell-focus,.ag-cell-no-focus{
  border:none !important;
}
/* This CSS is to not apply the border for the column having 'no-border' class */
.no-border.ag-cell:focus{
  border:none !important;
  outline: none;
}

И используйте тот же класс, что и cellClass в ColDef

suppressNavigable: true,
cellClass: 'no-border'

Живой пример: aggrid-want-to-disable-cell-selection
При этом не будет отображаться граница для ячейки, на которую вы фокусируетесь даже с помощью щелчка мышью.

person Paritosh    schedule 14.06.2018
comment
Я рада, что помогло! Это быстро поможет, если вы поделитесь воспроизведенной проблемой. - person Paritosh; 14.06.2018
comment
Почему не suppressCellSelection в gridOptions? - person Ryan Tsui; 10.08.2018
comment
ПО просто хочу отключить его для одного столбца. Не для всей колонки. Проблема заключается в стилизации выбранной ячейки, которая не отображается в навигации. - person Paritosh; 10.08.2018
comment
У меня работало только с ::ng-deep до .no-border.ag-cell:focus. Спасибо за Ваш ответ! - person Marian Simonca; 15.01.2019
comment
Это предотвращает выделение видимым образом, но API сетки по-прежнему будет считать выделенную ячейку. - person xandermonkey; 05.07.2019
comment
@xandermonkey - это правильно, но здесь намерение PO касается только аспекта пользовательского интерфейса. - person Paritosh; 05.07.2019
comment
Как бы вы предотвратили выбор ячеек для всех столбцов? Должен ли я повторять cellClass для каждого заголовка? - person takanuva15; 23.09.2019
comment
Nvm, просто добавьте ::ng-deep .ag-cell:focus{ border: none !important; outline: none; } в свой css - person takanuva15; 23.09.2019

arrow_upward
20
arrow_downward

Я бы предложил использовать параметр suppressCellSelection в gridOptions. Я бы не рекомендовал быстрое исправление CSS.

this.gridOptions = {
  // Your grid options here....
  suppressCellSelection: true
};
person Ryan Tsui    schedule 10.08.2018
comment
Эта опция уже установлена ​​в моих опциях сетки. Это не помогает. - person Chris Farmer; 10.08.2018
comment
@ChrisFarmer убедитесь, что enableRangeSelection имеет значение false - person Unicco; 10.04.2021

arrow_upward
3
arrow_downward

Вы можете попробовать этот css-хак. никаких настраиваемых флагов не требуется.

.ag-cell-focus, .ag-cell {
    border: none !important;
}

Пример - https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css

введите здесь описание изображения

person Jossef Harush    schedule 01.08.2019
comment
Это только убирает блик. Поведение при навигации с помощью клавиатуры сохраняется, поэтому вы получите странное поведение с клавишами со стрелками влево и вправо, если ваша таблица прокручивается по горизонтали. - person Joshua Wade; 09.03.2020
comment
Этот пост отвечает на вопрос OP в том, что OP сказал, что просто удалить синий контур по умолчанию во время выбора также будет нормально. И это именно так. Удивительно, что это было отклонено. - person Ross Attrill; 24.07.2020

arrow_upward
1
arrow_downward

Попробуйте это, это работает для меня

::ng-deep .ag-cell-focus,.ag-cell-no-focus{
border:none !important;
}
::ng-deep .no-border.ag-cell:focus{
border:none !important;
outline: none;
}
person Afeesudheen    schedule 17.09.2020

arrow_upward
1
arrow_downward

Вы также можете использовать cellStyle, чтобы удалить выделение. динамически. Вот пример:

{
  headerName: "Is Selectable",
  cellStyle: (params) => {
    if (!params.value) {
      return { border: "none" };
    }
    return null;
  },
  ...
},
{
  headerName: "UnSelectable",
  cellStyle: { border: "none" },
  ...
}

Живая демонстрация

Отредактируйте 50862009 / how-to-disable-selection-of-cells-in-ag- grid / 50863144 # 50863144

person NearHuscarl    schedule 27.09.2020