双击内联编辑页面导航问题答案

【问题标题】：Double Click Inline Edit Page Navigation Issue双击内联编辑页面导航问题
【发布时间】：2020-11-25 21:59:00
【问题描述】：

在 Slick Grid 中我遇到了这个问题。

案例：对于双击单元格，应该打开编辑器模型，对于单击单元格，应该导航到其他页面。

问题：当我双击时，两次单击被调用所以页面正在导航。

预期：我希望在没有导航页面的情况下双击编辑选项。

网格选项：

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

点击操作：

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

软件版本

角度：7.3.5

Angular-Slickgrid：2.19.0，

打字稿：3.1.6

节点：10.16.3

【问题讨论】：

标签： angular slickgrid angular-slickgrid

【解决方案1】：

@Poul 的先前回答可能会有所帮助，但如果这不起作用，您也可以使用onBeforeEditCell（请参阅完整的网格事件here）。我有时会使用此事件来取消编辑器（当我创建通用编辑器但某些单元格由于动态执行的特定逻辑而无法编辑时），如果您在该事件上返回 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;
    }
  }

如需更完整的代码示例，请参阅我写的另一个 Stack Overflow answer。

【讨论】：

感谢您的回复。但这对我不起作用。因为我需要在双击时停止导航。您的解决方案是阻止打开编辑器。
您可能仍然能够从(onBeforeEditCell) 获取鼠标事件，并查看它是双击还是单击。我只是展示了这个事件可以实现的示例代码......或者只是尝试@Poul answer

【解决方案2】：

您应该消除您的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()
});

【讨论】：

【解决方案3】：

您可以尝试设置网格选项：enableCellNavigation：true。我认为这可能会解决您的问题。

【讨论】：