在 Handsontable 中移动列后编辑单元格时数据不正确答案

【问题标题】：Data is not correct while editing cells after moving columns in Handsontable在 Handsontable 中移动列后编辑单元格时数据不正确
【发布时间】：2017-02-11 16:37:12
【问题描述】：

我正在测试 handsontable 的小提琴之一，并在移动列时发现了问题。请转到以下小提琴并执行上述步骤。 http://jsfiddle.net/5u5vczcg/

var hot = new Handsontable(container, {
  data: financeData,
  colHeaders: ["Price", "Date", "1D Chg", "YTD Chg", "Vol BTC"],
  rowHeaders: true,
  stretchH: 'all',
  sortIndicator: true,
  columnSorting: true,
  contextMenu: true,
  manualColumnMove : true,
  columns: [
    {type: 'numeric', format: '$0,0.00'},
    {type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true},
    {type: 'numeric', format: '0.00%'},
    {type: 'numeric', format: '0.00%'},
    {type: 'numeric', format: '0.00'}
  ]
});

移动价格列代替日期。双击任何价格单元格，您将看到单元格中的值仅是日期的。此外，当您双击日期单元格时，它们也不会正确显示数据。请您检查并解决。

【问题讨论】：

标签： javascript jquery handsontable

【解决方案1】：

你面对的应该是一个相当古老的fixed issue。经过多次测试/研究，如果我激活 manualColumnMove 选项，我的项目确实有相同的行为。

所以我建议您选择以下两种解决方案之一：

在他们的 git 上重新打开最新版本的 Handsontable 的问题。
使用旧版本和我为你做的解决方法（版本 0.15.0）：

Your JS Fiddle uptaded

我认为您可以从这个开始，了解如何自定义您的 Handsontable。对于您的情况，我所做的是使用事件 'afterColumnMove' 更新两个修改后的列：

hot.addHook('afterColumnMove', function(sourceIndex, targetIndex) {
  var
  sourceValues = hot.getData(0,sourceIndex,hot.getData().length,sourceIndex),
  sourceProperties =hot.getSettings().columns[sourceIndex],
  sourceHeader=hot.getSettings().colHeaders[sourceIndex],
  targetValues = hot.getData(0,targetIndex,hot.getData().length,targetIndex),
  targetProperties =hot.getSettings().columns[targetIndex],
  targetHeader=hot.getSettings().colHeaders[targetIndex],

  newColumns=hot.getSettings().columns,
  newHeaders=hot.getSettings().colHeaders;

  newHeaders[sourceIndex]=targetHeader;
  newHeaders[targetIndex]=sourceHeader;
  newColumns[sourceIndex]=targetProperties;
  newColumns[targetIndex]=sourceProperties;

  hot.updateSettings({columns:newColumns,colHeaders:newHeaders});
  hot.populateFromArray(0,sourceIndex,sourceValues,hot.getData().length,sourceIndex);
  hot.populateFromArray(0,targetIndex,targetValues,hot.getData().length,targetIndex);
});

还有第三种选择：

用别的东西。根据您的预算，DataTables 的 Editor 版本是恕我直言，当您尝试编辑数据和使用其他功能。（这个问题就是一个很好的例子）。

【讨论】：