IE 11的Angular Ag Grid单击问题

问题描述

我在Angular 5中使用了Ag Grid企业版17.0。我启用了单击编辑选项。一次单击即可在Chrome中完美运行，但在IE 11中却无法正常运行。我必须多次单击才能将单元格置于编辑模式。有人可以帮我解决问题吗？

I am using Ag Grid enterprise version 17.0 with Angular 5. I have enabled single click edit option. It works perfectly in Chrome on single click but it is not working in IE 11. I have to click multiple times to get the cell in edit mode. Can anyone please help me to fix the issue ?

请找到以下我用于自定义输入文本的代码。我已经手动添加了click和dblclick事件，以使其在IE 11中正常工作。

Please find the below code which I am using for custom input texts. I have manually added click and dblclick events for it work in IE 11.

this.gridOptions.suppressClickEdit = false;
this.gridOptions.singleClickEdit = true;

自定义输入类型

import { AfterViewInit, Component, ViewChild, ViewContainerRef ,ElementRef } from '@angular/core';

import { ICellEditorAngularComp } from 'ag-grid-angular/main';

@Component({
  selector: 'text-cell',
  template: `<input #input style="width: 100%; height: 100%;" (keydown)="onKeyDown($event)" [(ngModel)]="value" (dblclick) = "$event.target.select()" (click)="handleClick()">
              <button (click)="clear()" style="position:absolute;top:5px;right:2px;cursor:pointer;color:grey;background-color:white;border:none;">
                <span>&#10060;</span>
              </button>`
})
export class TextEditorComponent implements ICellEditorAngularComp, AfterViewInit {
  private params: any;
  public value: number;
  private cancelBeforeStart = false;

  @ViewChild('input', { read: ViewContainerRef }) public input;


  constructor(private elementRef : ElementRef){

  }

  agInit(params: any): void {
    this.params = params;
    this.value = this.params.value;
    // only start edit if key pressed
    this.cancelBeforeStart = false;
  }

  getValue(): any {
    return this.value;
  }

  isCancelBeforeStart(): boolean {
    //return this.cancelBeforeStart;
    return this.params ? this.params.cancelEdit ? this.params.cancelEdit(this.params.node.data) : false : false;
  }

  clear(){
    this.value = null;
    return this.value;
  }

  onKeyDown(event: any): void {
    if (!this.isKeyPressedAlphaNumericOrBackSpace(event)) {
      if (event.preventDefault) {
        event.preventDefault();
      }
    }
  }

  // dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
  ngAfterViewInit() {
    this.input.element.nativeElement.focus();
  }

  private getCharCodeFromEvent(event: any): any {
    event = event || window.event;
    return (typeof event.which === 'undefined') ? event.keyCode : event.which;
  }

  private isCharAlphaNumeric(charStr: any): boolean {
    return true;

  }

  private isKeyPressedAlphaNumericOrBackSpace(event: any): boolean {
    const charCode = this.getCharCodeFromEvent(event);
    const charStr = event.key ? event.key : String.fromCharCode(charCode);
    return this.isCharAlphaNumeric(charStr) || charStr === 'Backspace' || charStr === 'Delete' || charStr === '.' || charStr === '-';
  }

  handleClick(){    
    setTimeout(()=>{
      this.elementRef.nativeElement.focus();
    },100);    
  }
}

推荐答案

此处是我的解决方案。通过修改onKeyDown和ngAfterViewInit方法，我设法使一些工作无效。

Here is my solution. I managed to make few things work by modifying onKeyDown and ngAfterViewInit method.

@Component({
  selector: 'text-cell',
  template: `<input #input  id="textinput" style="width: 100%; height: 100%;" (keydown)="onKeyDown($event)" [(ngModel)]="value" (dblclick) = "$event.target.select()">
              <button (click)="clear()">
                <span>&#10060;</span>
              </button>`
})
export class TextEditorComponent implements ICellEditorAngularComp, AfterViewInit {

  private params: any;
  public value: number;
  private cancelBeforeStart: boolean = false;
  private iCaretPos : number =  0;

  @ViewChild('input', {read: ViewContainerRef}) public input;

  agInit(params: any): void {
      this.params = params;
      this.value = this.params.value;

      // only start edit if key pressed is a number, not a letter
      this.cancelBeforeStart = false;
  }
  clear() {
    this.value =  null;
    return this.value;
  }


  getValue(): any {
      return this.value;
  }

  isCancelBeforeStart(): boolean {
    return this.params ? this.params.cancelEdit ? this.params.cancelEdit(this.params.node.data) : false : false;
  }

  onKeyDown(event): void {
      var key = event.which || event.keyCode;

      if(key === 37 || key === 39){   
          //Left or right       
        let inputDocument = document.getElementById('textinput');
        const element : HTMLInputElement = <HTMLInputElement>inputDocument;
        event.stopPropagation();                                                  
        let selectionStart = 0;          
        if(key === 39 && this.iCaretPos < element.innerHTML.length+1){               
              selectionStart = this.iCaretPos;
              this.iCaretPos = this.iCaretPos +1;
        }else if(key === 37 && this.iCaretPos !== 0){               
              selectionStart = this.iCaretPos;
              this.iCaretPos = this.iCaretPos -1;
        }  
        let selectionEnd = this.iCaretPos;          
          if (element.setSelectionRange) {                                          
              element.focus();
              element.setSelectionRange(selectionStart, selectionEnd);
          }        
      }
      if (!this.isKeyPressedText(event)) {
          if (event.preventDefault) event.preventDefault();
      }

  }

  // dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this
  ngAfterViewInit() {
      window.setTimeout(() => {
          this.input.element.nativeElement.focus();
          if(document.getElementById('textinput') != null){
            document.getElementById('textinput').innerHTML = this.input.element.nativeElement.value;
          }

      })
  }

  private getCharCodeFromEvent(event): any {
      event = event || window.event;
      return (typeof event.which == "undefined") ? event.keyCode : event.which;
  }

  private isCharText(charStr): boolean {
      return true;
  }

  private isKeyPressedText(event): boolean {
    const charCode = this.getCharCodeFromEvent(event);
    const charStr = event.key ? event.key : String.fromCharCode(charCode);
    return this.isCharText(charStr) || charStr === 'Backspace' || charStr === 'Delete' || charStr === '.' || charStr === '-';
  }

}

这篇关于IE 11的Angular Ag Grid单击问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！