如何在 Handsontable 中使用钩子。我需要在粘贴前检查数据

Posted 2023-03-22

【中文标题】如何在 Handsontable 中使用钩子。我需要在粘贴前检查数据

【英文标题】：How to use hooks in Handsontable. I need check data before paste

【发布时间】：2021-04-07 13:42:44

【问题描述】：

我需要在将数据插入表之前检查数据，如果不正确，请更改并插入。我正在尝试创建一个带有 beforeInsert 前缀的钩子并在那里描述这个逻辑，但它不起作用。

我尝试使用此代码进行测试，但粘贴时没有任何变化

  hot1.addHook('beforePaste', function(td1, row1, col1, prop1, value1, cellProperties1) 
          if (prop1 === 'cost1') 
                  var cellMeta1 = this.getCellMeta(row, this.propToCol('cost2'));
                  cellMeta1.type = 'text';
            cellMeta1.source = 'hello';
          
         
      );

问题可能是在此之前我调用了这个钩子吗？

hot1.addHook('beforeRenderer', function(td, row, col, prop, value, cellProperties) 
            if (prop === 'warehouse') 
               var cellMeta = this.getCellMeta(row, this.propToCol('xWarehouse'));
               cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
           
     
);

如何检查更改后的值并将其插入表中？ 例子： 在输入 3 213 处，插入 3213，只需删除空格

更新：

我也试过用这个：

            if (prop === 'cost1' && value != '') 
               var cellMeta = this.getCellMeta(row, this.propToCol('cost1'));
               hot1.setDataAtCell(row,col,value);
           
      );

但在这种情况下，我的表会冻结

【参考方案1】：

我们可以通过 afterChange 钩子改变值。

var setter = false;
        hot1.addHook('afterChange', function(changes, src) 
            if (!setter) 
                setter = true;
                    for(let obj of changes)
                    var currentRow = obj[0];
                    var currentValue = obj[3].replace(/\s+/g,'');
                    var currentCol = obj[1].replace(/\s+/g,'');
                    var colNumber = hot1.propToCol(currentCol);
                    hot1.setDataAtCell(currentRow, colNumber, currentValue);
                    
             else 
                setter = false;
            
        );

Handsontable会将changes和src本身的值代入，之后我们可以把插入的值拉出来修改一下，然后再插入回来