KevinChen 发表于 2020-5-26 18:09:17

【自定义编辑器系列】FlexGrid的JSON格式数据怎样复制粘贴?

在前一期中,我们讲了怎样在FlexGrid中保存JSON格式的数据,参考帖子:https://gcdn.grapecity.com.cn/showtopic-76344-1-1.html
实际上,想让JSON数据表现的跟简单数据一样的效果,没有那么简单,比如今天咱们要聊到的,这个数据如何实现复制粘贴?

如果我们尝试复制JSON格式的数据,会发现粘贴出来的仅仅是我们看到的值。
参考上一篇文章,复制操作拿到的是什么呢? 实际上,复制到剪贴板的是JSON对象toString后的结果,

所以我们可以让toString 返回一个JSON的stringify的字符串,如下代码所示:
var countries = [];
    countries = {country:'US', continent:'North America'};
    countries = {country:'Germany', continent:'Europe'};
    countries = {country:'UK', continent:'Europe'};
    countries = {country:'Japan', continent:'Asia'};
    countries = {country:'Italy', continent:'Europe'};
    countries = {country:'Greece', continent:'Europe'};
    var countryToString = function(){return JSON.stringify(this)};
    countries.forEach(function(country){country.toString = countryToString;});

仅仅修改这里后,单元格显示的内容就变成JSON字符串了,这怎么办?
FlexGrid有个formatItem的事件,可以按照我们自己想要的格式来显示单元格内容,如代码所示:
theGrid.formatItem.addHandler(function (s, e) {
      if (e.panel == s.cells) {
            var col = s.columns;
            if (col.binding == 'country') {
                var valueJson = s.getCellData(e.row, e.col);
                var value = JSON.parse(valueJson);
                if(value){
                  e.cell.innerHTML = value.country;
                }
            }
      }
    });

这样就可以实现正常显示了。

最后,双击进入下拉菜单时,显示了json字符串可以用combobox的displayMemberPath属性来处理。参考代码:


    new CustomGridEditor(theGrid, 'country', wjInput.ComboBox, {
      itemsSource: countries,
      displayMemberPath: 'country'
    });

本文涉及的完整的代码如下:

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjInput from '@grapecity/wijmo.input';
import * as wjCore from '@grapecity/wijmo';
//
// *** CustomGridEditor class (transpiled from TypeScript) ***
//
export class CustomGridEditor {
    /**
   * Initializes a new instance of a CustomGridEditor.
   */
    constructor(flex, binding, edtClass, options) {
      // save references
      this._grid = flex;
      this._col = flex.columns.getColumn(binding);
      // create editor
      this._ctl = new edtClass(document.createElement('div'), options);
      // connect grid events
      flex.beginningEdit.addHandler(this._beginningEdit, this);
      flex.sortingColumn.addHandler(() => {
            this._commitRowEdits();
      });
      flex.scrollPositionChanged.addHandler(() => {
            if (this._ctl.containsFocus()) {
                flex.focus();
            }
      });
      flex.selectionChanging.addHandler((s, e) => {
            if (e.row != s.selection.row) {
                this._commitRowEdits();
            }
      });
      // connect editor events
      this._ctl.addEventListener(this._ctl.hostElement, 'keydown', (e) => {
            switch (e.keyCode) {
                case wjCore.Key.Tab:
                case wjCore.Key.Enter:
                  e.preventDefault(); // TFS 255685
                  this._closeEditor(true);
                  this._grid.focus();
                  // forward event to the grid so it will move the selection
                  var evt = document.createEvent('HTMLEvents');
                  evt.initEvent('keydown', true, true);
                  'altKey,metaKey,ctrlKey,shiftKey,keyCode'.split(',').forEach((prop) => {
                        evt = e;
                  });
                  this._grid.hostElement.dispatchEvent(evt);
                  break;
                case wjCore.Key.Escape:
                  this._closeEditor(false);
                  this._grid.focus();
                  break;
            }
      });
      // close the editor when it loses focus
      this._ctl.lostFocus.addHandler(() => {
            setTimeout(() => {
                if (!this._ctl.containsFocus()) {
                  this._closeEditor(true); // apply edits and close editor
                  this._grid.onLostFocus(); // commit item edits if the grid lost focus
                }
            });
      });
      // commit edits when grid loses focus
      this._grid.lostFocus.addHandler(() => {
            setTimeout(() => {
                if (!this._grid.containsFocus() && !CustomGridEditor._isEditing) {
                  this._commitRowEdits();
                }
            });
      });
      // open drop-down on f4/alt-down
      this._grid.addEventListener(this._grid.hostElement, 'keydown', (e) => {
            // open drop-down on f4/alt-down
            this._openDropDown = false;
            if (e.keyCode == wjCore.Key.F4 ||
                (e.altKey && (e.keyCode == wjCore.Key.Down || e.keyCode == wjCore.Key.Up))) {
                var colIndex = this._grid.selection.col;
                if (colIndex > -1 && this._grid.columns == this._col) {
                  this._openDropDown = true;
                  this._grid.startEditing(true);
                  e.preventDefault();
                }
            }
            // commit edits on Enter (in case we're at the last row, TFS 268944)
            if (e.keyCode == wjCore.Key.Enter) {
                this._commitRowEdits();
            }
      }, true);
      // close editor when user resizes the window
      // REVIEW: hides editor when soft keyboard pops up (TFS 326875)
      window.addEventListener('resize', () => {
            if (this._ctl.containsFocus()) {
                this._closeEditor(true);
                this._grid.focus();
            }
      });
    }
    // gets an instance of the control being hosted by this grid editor
    get control() {
      return this._ctl;
    }
    // handle the grid's beginningEdit event by canceling the built-in editor,
    // initializing the custom editor and giving it the focus.
    _beginningEdit(grid, args) {
      // check that this is our column
      if (grid.columns != this._col) {
            return;
      }
      // check that this is not the Delete key
      // (which is used to clear cells and should not be messed with)
      var evt = args.data;
      if (evt && evt.keyCode == wjCore.Key.Delete) {
            return;
      }
      // cancel built-in editor
      args.cancel = true;
      // save cell being edited
      this._rng = args.range;
      CustomGridEditor._isEditing = true;
      // initialize editor host
      var rcCell = grid.getCellBoundingRect(args.row, args.col), rcBody = document.body.getBoundingClientRect(), ptOffset = new wjCore.Point(-rcBody.left, -rcBody.top), zIndex = (args.row < grid.frozenRows || args.col < grid.frozenColumns) ? '3' : '';
      wjCore.setCss(this._ctl.hostElement, {
            position: 'absolute',
            left: rcCell.left - 1 + ptOffset.x,
            top: rcCell.top - 1 + ptOffset.y,
            width: rcCell.width + 1,
            height: grid.rows.renderHeight + 1,
            borderRadius: '0px',
            zIndex: zIndex,
      });
      // initialize editor content
      if (!wjCore.isUndefined(this._ctl['text'])) {
            this._ctl['text'] = grid.getCellData(this._rng.row, this._rng.col, true);
      }
      else {
            throw 'Can\'t set editor value/text...';
      }
      // start editing item
      var ecv = grid.editableCollectionView, item = grid.rows.dataItem;
      if (ecv && item && item != ecv.currentEditItem) {
            setTimeout(function () {
                grid.onRowEditStarting(args);
                ecv.editItem(item);
                grid.onRowEditStarted(args);
            }, 50); // wait for the grid to commit edits after losing focus
      }
      // activate editor
      document.body.appendChild(this._ctl.hostElement);
      this._ctl.focus();
      setTimeout(() => {
            // get the key that triggered the editor
            var key = (evt && evt.charCode > 32)
                ? String.fromCharCode(evt.charCode)
                : null;
            // get input element in the control
            var input = this._ctl.hostElement.querySelector('input');
            // send key to editor
            if (input) {
                if (key) {
                  input.value = key;
                  wjCore.setSelectionRange(input, key.length, key.length);
                  var evtInput = document.createEvent('HTMLEvents');
                  evtInput.initEvent('input', true, false);
                  input.dispatchEvent(evtInput);
                }
                else {
                  input.select();
                }
            }
            // give the control focus
            if (!input && !this._openDropDown) {
                this._ctl.focus();
            }
            // open drop-down on F4/alt-down
            if (this._openDropDown && this._ctl instanceof wjInput.DropDown) {
                this._ctl.isDroppedDown = true;
                this._ctl.dropDown.focus();
            }
      }, 50);
    }
    // close the custom editor, optionally saving the edits back to the grid
    _closeEditor(saveEdits) {
      if (this._rng) {
            var flexGrid = this._grid, ctl = this._ctl, host = ctl.hostElement;
            // raise grid's cellEditEnding event
            var e = new wjGrid.CellEditEndingEventArgs(flexGrid.cells, this._rng);
            flexGrid.onCellEditEnding(e);
            // save editor value into grid
            if (saveEdits) {
                if(!wjCore.isUndefined(ctl['selectedItem'])){
                  this._grid.setCellData(this._rng.row, this._rng.col, ctl['selectedItem']);
                }
                else if (!wjCore.isUndefined(ctl['value'])) {
                  this._grid.setCellData(this._rng.row, this._rng.col, ctl['value']);
                }
                else if (!wjCore.isUndefined(ctl['text'])) {
                  this._grid.setCellData(this._rng.row, this._rng.col, ctl['text']);
                }
                else {
                  throw 'Can\'t get editor value/text...';
                }
                this._grid.invalidate();
            }
            // close editor and remove it from the DOM
            if (ctl instanceof wjInput.DropDown) {
                ctl.isDroppedDown = false;
            }
            host.parentElement.removeChild(host);
            console.log(flexGrid.getCellData(this._rng.row, this._rng.col));
            this._rng = null;
            CustomGridEditor._isEditing = false;
            // raise grid's cellEditEnded event
            flexGrid.onCellEditEnded(e);

      }
    }
    // commit row edits, fire row edit end events (TFS 339615)
    _commitRowEdits() {
      var flexGrid = this._grid, ecv = flexGrid.editableCollectionView;
      this._closeEditor(true);
      if (ecv && ecv.currentEditItem) {
            var e = new wjGrid.CellEditEndingEventArgs(flexGrid.cells, flexGrid.selection);
            ecv.commitEdit();
            setTimeout(() => {
                flexGrid.onRowEditEnding(e);
                flexGrid.onRowEditEnded(e);
                flexGrid.invalidate();
            });
      }
    }
}
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    //
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    countries = {country:'US', continent:'North America'};
    countries = {country:'Germany', continent:'Europe'};
    countries = {country:'UK', continent:'Europe'};
    countries = {country:'Japan', continent:'Asia'};
    countries = {country:'Italy', continent:'Europe'};
    countries = {country:'Greece', continent:'Europe'};
    var countryToString = function(){return JSON.stringify(this)};
    countries.forEach(function(country){country.toString = countryToString;});

    var products = [
      { id: 0, name: 'Widget', unitPrice: 23.43 },
      { id: 1, name: 'Gadget', unitPrice: 12.33 },
      { id: 2, name: 'Doohickey', unitPrice: 53.07 }
    ];
    var data = [];
    var dt = new Date();
    for (var i = 0; i < 100; i++) {
      data.push({
            id: i,
            date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
            time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
            country: countries,
            product: products.name,
            amount: Math.random() * 10000 - 5000,
            discount: Math.random() / 4
      });
    }
    //
    // grid with custom editors
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
      keyActionTab: 'CycleOut',
      autoGenerateColumns: false,
      itemsSource: data,
      columns: [
            { header: 'ID', binding: 'id', width: 40, isReadOnly: true },
            { header: 'Date', binding: 'date', format: 'd' },
            { header: 'Time', binding: 'time', format: 't' },
            { header: 'Country', binding: 'country' },
            { header: 'Product', binding: 'product' },
            { header: 'Amount', binding: 'amount', format: 'n2' }
      ],
    });
    new CustomGridEditor(theGrid, 'country', wjInput.ComboBox, {
      itemsSource: countries,
      displayMemberPath: 'country'
    });
    theGrid.formatItem.addHandler(function (s, e) {
      if (e.panel == s.cells) {
            var col = s.columns;
            if (col.binding == 'country') {
                var valueJson = s.getCellData(e.row, e.col);
                var value = JSON.parse(valueJson);
                if(value){
                  e.cell.innerHTML = value.country;
                }
            }
      }
    });
}
//# sourceMappingURL=CustomGridEditor.js.map


在这个示例上替换掉app.js即可看到效果:

https://demo.grapecity.com.cn/wijmo/demos/Grid/CustomCells/CustomEditors/purejs
页: [1]
查看完整版本: 【自定义编辑器系列】FlexGrid的JSON格式数据怎样复制粘贴?