带有 Angular 8 的 Wijmo 5 flexgrid - 更改数据图选择恢复已编辑文本列中的更改文本

Question

我将 wijmo 5 flexgrid 与 Angular 8 一起使用，并尝试创建一个内联可编辑网格，每行都有“编辑”按钮。每行都有一个数据映射列和一个文本列，当单击该特定行的编辑按钮时，这两个列都应该是可编辑的。 单击编辑按钮后，首先编辑文本字段（员工姓名）。之后，当我更改数据映射下拉列表（部门）的选择时，文本字段中更改的文本将恢复为原始文本。在部门数据映射字段中选择更改后，如何在员工姓名文本字段中保留更改的文本？代码在 link 中：https://stackblitz.com/edit/angular-g9wk57?file=app%2Fapp.component.ts

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { CollectionView, ObservableArray } from 'wijmo/wijmo';
import * as wjCore from 'wijmo/wijmo';
import * as wjInput from 'wijmo/wijmo.input';
import * as wjGrid from 'wijmo/wijmo.grid';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private _currentEditItem: any = null;

  public data : any;
  public deptList: any = [
    {'deptId':'D1', 'deptName':'Accounts'},
    {'deptId':'D2', 'deptName':'Development'},
    {'deptId':'D3', 'deptName':'HR'}
    ];

    public empList: any = [
      {'empId':'E1', 'empName':'AA', 'deptId':'D3'},
      {'empId':'E2', 'empName':'BB', 'deptId':'D2'},
      {'empId':'E3', 'empName':'CC', 'deptId':'D1'},
      {'empId':'E4', 'empName':'DD', 'deptId':'D2'}
    ];

  @ViewChild('flex') flex:wjGrid.FlexGrid;

public deptMap = new wjGrid.DataMap(this.deptList, 'deptId', 'deptName');
    constructor() {
      this.data = new wjCore.CollectionView(this.empList);
  }  

initializeGrid(flex: wjGrid.FlexGrid) {
    flex.rows.defaultSize = 40;
    // custom formatter to paint buttons and editors
    flex.formatItem.addHandler((s: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs) => {
      if (e.panel == s.cells) {
        let col = s.columns[e.col],
          item = s.rows[e.row].dataItem;
        if (item == this._currentEditItem) {
          // create editors and buttons for the item being edited
          switch (col.binding) {
            case 'buttons':
              e.cell.innerHTML = document.getElementById('tplBtnEditMode').innerHTML;
              e.cell['dataItem'] = item;
              break;            
            case 'empName':
              e.cell.innerHTML = '<input class="form-control" ' +
                'id="' + col.binding + '" ' +
                'value="' + s.getCellData(e.row, e.col, true) + '"/>';
              break;
          }
        } else {
          // create buttons for items not being edited
          switch (col.binding) {
            case 'buttons':
              e.cell.innerHTML = document.getElementById('tplBtnViewMode').innerHTML;
              e.cell['dataItem'] = item;
              break;
          }
        }
      }
    });

    // handle button clicks
    flex.addEventListener(flex.hostElement, 'click', (e: MouseEvent) => {
      let targetBtn: HTMLButtonElement;
      if (e.target instanceof HTMLButtonElement) {
        targetBtn = e.target;
      }
      // else if (e.target instanceof HTMLSpanElement && e.target.classList.contains('glyphicon')) {
      //   targetBtn = e.target.parentElement as HTMLButtonElement;
      // }
      if (targetBtn) {
        // get button's data item
        let item = wjCore.closest(targetBtn, '.wj-cell')['dataItem'];
        // handle buttons
        switch (targetBtn.id) {
          // start editing this item
          case 'btnEdit':
            this._editItem(item);
            break;
          // remove this item from the collection
          // case 'btnDelete':
          //   (<wjCore.CollectionView>flex.collectionView).remove(item);
          //   break;
          // commit edits
          case 'btnOK':
            this._commitEdit();
            break;
          // cancel edits
          case 'btnCancel':
            this._cancelEdit();
            break;
        }
      }
      e.preventDefault();
    });

    // exit edit mode when scrolling the grid or losing focus
    flex.scrollPositionChanged.addHandler(this._cancelEdit.bind(this));
    flex.lostFocus.addHandler(this._cancelEdit.bind(this));
  }

  private _editItem(item: any) {
    this._cancelEdit();
    this._currentEditItem = item;
    this.flex.invalidate();
  }

  private _commitEdit() {
    if (this._currentEditItem) {
      this.flex.columns.forEach((col: any) => {
        let input = <HTMLInputElement>this.flex.hostElement.querySelector('#' + col.binding);
        if (input) {
          let value = wjCore.changeType(input.value, col.dataType, col.format);
          if (wjCore.getType(value) == col.dataType) {
            this._currentEditItem[col.binding] = value;
          }
        }
      });
    }

    console.log(this._currentEditItem);
    this._currentEditItem = null;
    this.flex.invalidate();
  }

  private _cancelEdit() {
    if (this._currentEditItem) {
      this._currentEditItem = null;
      this.flex.invalidate();
    }
  }

}

app.component.html

<div class="header">
    <div class="container">
        <h1>
            DataMap
        </h1>
    </div>
</div>

<!-- content -->
<div class="container">
    <div>
        <wj-flex-grid #flex [itemsSource]="data"
            [headersVisibility]="'Column'" (initialized)="initializeGrid(flex)">
            <wj-flex-grid-column [header]="'Employee Name'" [binding]="'empName'" [width]="'4*'">
            </wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Department'" [binding]="'deptId'" [width]="'4*'" [dataMap]="deptMap">
            </wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Actions'" [binding]="'buttons'" [width]="'3*'"></wj-flex-grid-column>
        </wj-flex-grid>

        <!-- template for buttons on items in view mode -->
        <div id="tplBtnViewMode" style="display:none">
            <button id="btnEdit" class="btn btn-default btn-sm">
        Edit
    </button>
        </div>

        <!-- template for buttons on items in edit mode -->
        <div id="tplBtnEditMode" style="display:none">
            <button id="btnOK" class="btn btn-primary btn-sm">
        OK
    </button>
            <button id="btnCancel" class="btn btn-warning btn-sm">
        Cancel
    </button>
        </div>
    </div>
</div>

Answer 1

我使用 ComboBox 而不是 DataMap 来编辑值 wijmo forum

示例： StackBlitz