javascript - 如何在 ag-grid 的事件方法中使用 javascript 默认事件对象

Question

我是 ag-grid 的新手，我实际上想在“cellEditingStopped”网格事件中调用 event.preventDefault()，但我无法将默认的 javascript 事件对象传递给它。有没有办法实现它？

此外，网格事件的对象也应该可用，因为它包含我需要用于我的数据库操作的行数据。

任何帮助将非常感激。

以下是我的代码。

<ag-grid-angular
          id="timesheetInstructionGrid"
          [ngStyle] ="instructionsGridStyle"
          style="width: 100%;" 
          class="ag-theme-balham no-wrap"
          [rowData]="timesheetInstructionsRowData" 
          [columnDefs]="timesheetInstructionsColumnDefs"
          [frameworkComponents]="frameworkComponents"
          [singleClickEdit]="true"
          [defaultColDef]="defaultColDef"
          [pagination]="true"
          [enableColResize]="true"
          [stopEditingWhenGridLosesFocus]="true"
          [overlayNoRowsTemplate]="overlayInstructionsTemplate"
          (gridReady)="onInstructionsGridReady($event)"
          [rowSelection]="rowSelection"
          [rowDeselection]="'true'"
          (rowSelected) = "onInstructionsRowSelected($event)"
          (cellClicked) = "onInstructionsCellClicked($event)"
          (cellValueChanged) = "onCellValueChanged($event)"
          (cellEditingStopped) = "instructionGridCellEditDone($event)"
          [domLayout]="domLayout"
          >
      </ag-grid-angular>

标签： javascriptangularag-grid

Answer 1

您应该能够将该对象作为处理程序的参数本身。

看看我创建的 plunk：Angular 中的 ag-Grid - 带有 RowClicked 事件的事件对象

打开控制台并单击任意行。我已经提供了rowClicked事件的例子。

onRowClicked($event: RowClickedEvent) {
  console.log($event.event)  ;
}

这就是我在日志中得到的。

MouseEvent {isTrusted: true, screenX: -776, screenY: 239, clientX: 310, clientY: 210, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 310
clientY: 210
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 45
layerY: 94
metaKey: false
movementX: 0
movementY: 0
offsetX: 45
offsetY: 11
pageX: 310
pageY: 210
path: (23) [span, div.ag-cell.ag-cell-not-inline-editing.ag-cell-with-height.right-align.ag-cell-value.ag-column-hover…, div.ag-row.ag-row-odd.ag-row-level-0.ag-row-position-absolute.ag-row-hover.ag-row-focus.ag-row-selec…, div.ag-body-container.ag-layout-normal, div.ag-body-viewport.ag-layout-normal, div.ag-body-viewport-wrapper.ag-layout-normal, div.ag-body.ag-layout-normal.ag-row-no-animation, div.ag-root.ag-font-style.ag-layout-normal, div.ag-root-wrapper-body.ag-layout-normal, div.ag-root-wrapper.ag-layout-normal.ag-ltr, ag-grid-angular#div_0_ag-grid-angular_0.ag-theme-balham.ag-grid-row-hover-actions, div#div_0.ag-grid-container, im-ag-grid, div, mat-card.mat-card.ng-star-inserted, im-test-app-grid-config-svc.ng-star-inserted, ruf-app-canvas, div.ng-star-inserted, im-test-app-root, body.desktop, html, document, Window]
relatedTarget: null
returnValue: true
screenX: -776
screenY: 239
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: span
target: span
timeStamp: 29035.00000014901
toElement: span
type: "click"
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 1
x: 310
y: 210