2

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

软件版本

角度：7.3.5

Angular-Slickgrid：2.19.0，

打字稿：3.1.6

节点：10.16.3

4

3 回答 3

0

你应该去抖动你的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()
});
于 2020-08-05T17:28:19.887 回答
0

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

于 2020-08-05T18:02:47.323 回答
0

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

于 2020-08-05T17:06:34.303 回答