Проблема с переходом на страницу редактирования двойного щелчка

Question

В Slick Grid я столкнулся с этой проблемой.

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

Проблема: при двойном щелчке дважды вызывается однократный щелчок. Таким образом, осуществляется навигация по странице.

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

Вариант сетки:

 let gridOptions: GridOption = {
        autoEdit: false,
        enableCellNavigation: true,
        editable: true
}

Действие OnClick:

this.gridObj.onClick.subscribe((e, args) => {
            console.log("On Click");
this.router.Navigate()
        })

Версии программного обеспечения

Angular: 7.3.5

Angular -Slickgrid: 2.19.0,

TypeScript: 3.1.6

Узел: 10.16.3

Answer 1

Вы должны отклонить ваш click, чтобы убедиться, что это не двойной щелчок. Например, если вы установите время двойного щелчка примерно как 250ms, вы можете сделать следующее:

this.gridObj.onClick.pipe(
  switchMap((click) => timer(250).pipe(
    mapTo(click),
    takeUntil(this.gridObj.onDblClick)
  ))
).subscribe((e) => {
  console.log("On Click");
  this.router.Navigate()
});

Answer 2

Предыдущий ответ от @Poul, вероятно, полезен, но если это не сработает, вы также можете потенциально использовать onBeforeEditCell (см. Полный список событий сетки здесь ). Я использую это событие когда-нибудь, чтобы отменить редактор (когда я создаю общий c редактор, но некоторые ячейки не редактируются из-за определенного логического c на месте, которое выполняется динамически), если вы вернете false на этом , то редактор никогда не создается.

Так, например,

<angular-slickgrid gridId="grid29" 
  [columnDefinitions]="columnDefinitions" 
  [gridOptions]="gridOptions"
  (onBeforeEditCell)="verifyCellIsEditableBeforeEditing($event)">
</angular-slickgrid>

verifyCellIsEditableBeforeEditing(event) {
    const eventData = event?.detail?.eventData;
    const args = event?.detail?.args;

    if (args && args.column && args.item) {
      // your logic here
      if (... logic for not editable...) {
        event.preventDefault();
        eventData.stopImmediatePropagation();
        return false;
      }
    }
}

Таким образом, вы можете объединить использование (onClick) с (onBeforeEditCell) и заставить это работать. В нашем проекте есть столбец (пользователь), который будет перенаправлять на другую страницу SPA, и для этого я использую `onClick)

handleOnCellClick(event, args) {
    const grid = args.grid;
    const rows = args.rows || [];
    const selectedUser = grid && grid.getDataItem(args.row) as User;
    const columnDef = grid && grid.getColumns()[args.cell];
    const field = columnDef && columnDef.field || '';

    // when clicking on any cell, we will make it the new selected row except on 1st column (field "sel")
    // we don't want to interfere with multiple row selection checkbox which is on 1st column cell
    switch (field) {
      case 'sel':
        // multiple selection(s)
        this.closeSidebar();
        this.selectedUser = null;
        break;      
      case 'userNumber':
        const url = `/users/${user.userNumber}`;
        if (event.ctrlKey || event.shiftKey) {
          const openUrl = this.location.prepareExternalUrl(url);          
          window.open(openUrl, '_blank');
        } else {
          this.router.navigateByUrl(url);
        }
        break;
      default:
        // clicked anywhere else, turn into a single selection and open quick view sidebar
        grid.setSelectedRows([args.row]);
        this.userIdSelected = selectedUser.id;
        this.openSidebar();
        break;
    }
  }

Для более полного примера кода вы видите этот другой переполнение стека ответ Я написал.

Answer 3

Можете попробовать установить опцию сетки: enableCellNavigation: true. Думаю, это поможет решить вашу проблему.