如何在 Handsontable 的 afterChange 中使用 getCellMeta？

Posted 2023-03-22

【中文标题】如何在 Handsontable 的 afterChange 中使用 getCellMeta？

【英文标题】：How to use getCellMeta in afterChange at Handsontable?

【发布时间】：2018-06-06 12:50:37

【问题描述】：

我正在使用 handsontable js 插件。我想在 afterChange 钩子中使用 getCellMeta 函数但不起作用。 我在使用 afterChange 钩子函数时，函数正在工作。但在 afterChange 挂钩中不起作用。

var container = document.getElementById('t1'),
  options = document.querySelectorAll('.options input'),
  table,
  hot; 

hot = new Handsontable(container,     
  autoWrapRow: true,
  startRows: 81,
  startCols: 206,
  autoColumnSize : true,  
  stretchH: 'all', 
  afterChange : function(change,source)  
      if (source === 'loadData') 
        return;
         
      var test = this.getCellMeta(change[0],change[1]); // not working, not return "id" meta
      console.log(test);  
  
);

$.ajax(
  url: 'path',
  type: 'GET',
  dataType: 'json',
  success: function (res)  
    var data = [], row, pc = 0; 
    for (var i = 0, ilen =  hot.countRows(); i < ilen; i++)
    
      row = []; 
      for (var ii = 0; ii<hot.countCols(); ii++)
         
        hot.setCellMeta(i,ii,'id',res[pc].id);
        row[ii] =   res[pc].price;
        if(pc < (res.length-1)) 

        pc++;
        
       
      data[i] = row;
      
    hot.loadData(data);
  
); 

var test = this.getCellMeta(0,0); // is working, return "id" meta
console.log(test);  

输出控制台日志我在更改后尝试过；

在afterChange中输出控制台日志使用；

更改后如何获取单元格元数据？

谢谢。

【问题讨论】：

我不熟悉这个插件，但是文档只显示了 beforeGetCellMeta 和 afterGetCellMeta ； getCellMeta 是从哪里来的？

link@kshikama

【参考方案1】：

你快到了，只是你的回调中有一个小错误：doc for afterChange 指定回调的第一个参数 (changes) 是：

包含每个已编辑单元格信息的二维数组 [[row, prop, oldVal, newVal], ...].

所以，两个重要的细节：

要获取受影响单元格的行/列的“元”（假设只有一个），您需要调用 hot.getCellMeta(change[0][0],change[0][1]) 例如 在hot 而不是this 因为afterChange 回调函数是从不同的上下文（即在不同的对象上）调用的，所以this 不是调用的正确目标，请参阅How does the "this" keyword work?

读取整个更改数组的示例：

var hot = new Handsontable(container, 
  /* rest of init... */
  afterChange : function(changes,source) 
      console.log("Changes:", changes, source);
      if (changes) 
          changes.forEach(function(change) 
              var test = hot.getCellMeta(change[0],change[1]);
              console.log(test.id, test); // 'id' is the property you've added earlier with setMeta         
          );
      
  
);

查看demo fiddle，打开 JS 控制台，在表格中进行任何更改。

【讨论】：

另外，由于上下文变化，不能真正调用this.getCellMeta(change[0][0],change[0][1])。需要按名称引用 hansontable 对象：hot.getCellMeta(change[0],change[1]);

啊，是的，这就是我在完整示例中所做的，但我在单行中留下了this。将编辑，谢谢。

也许，在你的答案中也添加一个关于上下文变化的注释，因为这是每个人都知道的事情：人们认为他们的 Handsontable(...) 定义中的 this 指的是可操作的对象，但它不会，因为 Handsontable 会为您切换 afterChange 调用的上下文。

现在好点了吗？我不打算过多地修饰这个答案，因为它只是解决一个简单的错误（是的，this 的一个已知问题已经有了答案，所以我链接到它）。随意编辑:)