PrimeNG 表:如何开始单元格编辑? [英] PrimeNG table: how to start a cell edit?

问题描述

我有一个包含许多列和行的 PrimeNG p 表，其中一列使用输入作为其单元格编辑器.精简版如下:

I've got a PrimeNG p-table with a number of columns and rows, one column uses an input as its cell editor. Compact version below:

<p-table [value]="rowDatas" selectionMode="single" [(selection)]="selectedRowData">
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
    <tr [pSelectableRow]="rowData">
        <td pEditableColumn>
            <p-cellEditor>
                <ng-template pTemplate="input">
                    <input id="{{'hours' + rowIndex}}" pInputText type="text" [(ngModel)]="rowData.hours">
                </ng-template>
                <ng-template pTemplate="output">
                    {{rowData.hours}}
                </ng-template>
            </p-cellEditor>
        </td>
</ng-template>

我可以使用 ViewChild 访问表格

I have access to the table using ViewChild

@ViewChild(Table) private table: Table;

但我不知道从那里去哪里.PrimeNG 文档没有给出如何以编程方式触发单元格编辑的提示.谷歌搜索它会用 EditableColumns 和 onClick 抛出一些东西，但这不起作用，并跳过应该编辑哪些行.

But I have no idea where to go from there. The PrimeNG documentation does not give a hint how to trigger cell edit programmatically. Googling it is throwing something out there with EditableColumns and onClick, but that does not work, and skips which rows should be edited.

我可以通过 ID 识别输入字段(如果存在).但是只有当单元格处于编辑模式时才会添加实际的输入 HTML 标记.所以我不能使用标准的 getElementById.focus.

I am able to identify the input field via an ID, if it were present. But the actual input HTML tag is only added if the cell is put in edit mode. So I cannot use the standard getElementById.focus.

如何使用 PrimeNG p-table 开始编辑特定单元格?

How do I start editing a specific cell using PrimeNG p-table?

推荐答案

有一次我还不得不做一种类似于网格的 Excel 并且为了导航，我写了一个这样的指令:

Once I also had to do a kind of Excel like grid and for the navigation I wrote a directive like this:

  import {
    Directive,
    OnInit,
    ElementRef,
    NgZone,
    HostListener,
  } from "@angular/core";

  import { Table, EditableColumn } from "primeng/table";
  import { DomHandler } from "primeng/components/dom/domhandler";

  enum Direction {
    Up,
    Down,
  }

  @Directive({
    selector: "[ArrowNavigation]",
  })
  export class ArrowNavigationDirective extends EditableColumn implements OnInit {
    constructor(
      public dt: Table,
      public el: ElementRef,
      public domHandler: DomHandler,
      public zone: NgZone
    ) {
      super(dt, el, domHandler, zone);
    }

    ngOnInit() {
      this.el.nativeElement.tabIndex = 1;
    }

    @HostListener("keydown.ArrowLeft", ["$event"]) ArrowLeft(
      $event: KeyboardEvent
    ) {
      this.moveToPreviousCell($event);
    }

    @HostListener("keydown.ArrowRight", ["$event"]) ArrowRight(
      $event: KeyboardEvent
    ) {
      this.moveToNextCell($event);
    }

    @HostListener("keydown.ArrowUp", ["$event"]) ArrowUp($event: KeyboardEvent) {
      this.moveVertically($event, Direction.Up);
    }

    @HostListener("keydown.ArrowDown", ["$event"]) ArrowDown(
      $event: KeyboardEvent
    ) {
      this.moveVertically($event, Direction.Down);
    }

    private moveVertically($event: KeyboardEvent, direction: Direction) {
      const currentCell = this.findCell($event.target);
      let targetRow =
        direction === Direction.Up
          ? currentCell.parentElement.previousElementSibling
          : currentCell.parentElement.nextElementSibling;
      let targetCell = null;

      while (targetRow) {
        const editableColumns = this.domHandler.find(
          targetRow,
          ".ui-editable-column"
        );

        if (editableColumns.length > 0) {
          const targetColumnIndex = this.domHandler.index(currentCell);

          targetCell = targetRow.firstElementChild;
          for (let index = 0; index < targetColumnIndex; index++) {
            targetCell = targetCell.nextElementSibling;
          }

          targetRow = undefined;
        } else {
          targetRow =
            direction === Direction.Up
              ? targetRow.previousElementSibling
              : targetRow.nextElementSibling;
        }
      }

      if (targetCell) {
        this.domHandler.invokeElementMethod(targetCell, "click");
        $event.preventDefault();
      }
    }
  }

PrimeNG 提供了左右移动但不能上下移动的函数，因此必须编写该函数.

PrimeNG was providing functions to move left and right but not up and down, so had to write the function.

然后像这样使用它:

  <td pEditableColumn ArrowNavigation>
      <p-cellEditor>
          <ng-template pTemplate="input">
              <input type="text" [(ngModel)]="myModel">
          </ng-template>
          <ng-template pTemplate="output">
              {{myModel]}}
          </ng-template>
      </p-cellEditor>
  </td>

这篇关于PrimeNG 表:如何开始单元格编辑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！