在ag-grid表格上實現類似Excel中的按下enter鍵自動跳轉到下一行對應的輸入框功能，Angular4開發

    最近的項目使用ag-grid在Angular中處理表格，收到個需求是要能夠同時修改大量的數據，按下Enter鍵的時候，光標得自動跳到下一行的對應列上。

 

方法一：用ag-grid自帶的 enterMovesDown和 enterMovesDownAfterEdit 屬性設置，具體操作參見https://www.ag-grid.com/javascript-grid-cell-editing/#enter-key-down。

但是比較遺憾的是，我用這兩個參數進行設置的時候，居然沒起作用。

方法二：只能自己弄了。

step1、使用ag-grid的cellrenderer定義了一個input的cellrenderer的組件AggridCellrenderer，組件內的html如下：

<!--AggridCellrenderer-->
<input id="echartsInput_{{index}}" [ngClass]="{'warning':warning == true}" type="text"
                      class="form-control margin-top-8px" [(ngModel)]="value" (keypress)="turnToNext($event)"
                      (blur)="changeGridData($event)"/>

在組件的input上面定義鼠標按下的事件，當keyCode等於13時，觸發事件。

不過這里遇到了問題，就是在組件AggridCellrenderer內部使用 

this._elementRef.nativeElement.querySelectorAll("#echartsInput_" + index);

來獲取頁面上的元素時，this指向的是AggridCellrenderer，所以只能取到當前組件內渲染出的input，並不能取到表格內其他的input。

step2、所以后面在AggridCellrenderer中引用了一個

//AggridCellrenderer
private context: EditHisCurveAggridComponent;

用來指向外層的表格所在組件的頁面組件EditHisCurveAggridComponent，在EditHisCurveAggridComponent中定義了

//EditHisCurveAggridComponent
public turnToNext(param) {
        if (param >= this.gridData.length) {
            return false;
        } else {
            this._elementRef.nativeElement.querySelectorAll("#echartsInput_" + param)[0].focus();
            document.getElementById("echartsInput_" + param).focus();
        }
    }

AggridCellrenderer中定義

turnToNext(event) {
        let keyCode = event.keyCode;
        if (keyCode === 13) {
            event.preventDefault();
            let next = this.index + 1;
            this.context.turnToNext(next); //此處引用EditHisCurveAggridComponent中的turnToNext()方法

} }

OK，效果實現了。

------------------------

不過這里其實還有個很奇怪的地方，就是EditHisCurveAggridComponent中的turnToNext()方法里面，使用了兩處獲取焦點的操作，

this._elementRef.nativeElement.querySelectorAll("#echartsInput_" + param)[0].focus();
            document.getElementById("echartsInput_" + param).focus();

我一開始只使用其中一種，但是發現不論只保留哪一種，都無法起作用。最后就保留了這兩句。感覺還是應該是兼容性或者什么其他的問題。

項目是基於Angular4開發的。