Handsontable beforeRemoveRow 可以异步吗？

Posted 2023-03-22

【中文标题】Handsontable beforeRemoveRow 可以异步吗？

【英文标题】：Can Handsontable beforeRemoveRow be async?

【发布时间】：2018-09-07 06:49:10

【问题描述】：

期望： beforeRemoveRow 执行异步操作（转到数据库），然后返回 false/true。如果为“假”，我希望该行不会从表中删除。

行为： 即使我从 beforeRemoveRow 返回“false”，该行也会被删除。

代码： 用 Vue.js 动手操作

<template>
<!-- ... -->
</template>

<script>
import  mapState  from 'vuex'
import hot from '@/components/hot/index'
import  url  from '@/constants/api'

export default 
  computed: 
    ...mapState(
      clientAccounts: state => state.clients.clientAccounts,
      token: state => state.auth.token
    )
  ,
  data () 
    return 
      hotSettings: 
        beforeRemoveRow: async (index) => 
          const confirmed = confirm('Do you really want to delete the user?')
          if (confirmed) 
            try 
              const result = await this.$store.dispatch(
                type: 'deleteClientAccount',
                id: this.clientAccounts[index].id,
                token: this.token,
              )
              console.log('result', result)
              return true
             catch (err) 
              return false
            
           else 
            return false
          
        ,
        contextMenu: ['remove_row']
      
    
  ,
  components: 
    hot: hot
  

</script>

我想知道它是否与“异步”关键字有关？ 当我删除“异步”语法并使用 promise 时，它​​会按预期运行并且不会删除该行。但是，在这种情况下，它无法在删除行之前执行异步操作。

编辑 Handsontable Support 在他们的论坛中回答了这个问题： “钩子当前正在同步运行，只有返回 false 才能取消操作。 正如我看到的最后一条评论建议让它异步工作，这是一个好主意。然而，目前，Handsontable 只适用于同步调用，不可能只改变一个钩子。”

也就是说，如果有人发现没有钩子的解决方法来防止基于数据库验证删除行，请分享。

【参考方案1】：

由于 Handsontable 是同步的，我必须在 Handsontable 被调用之前插入我自己的函数。

我正在使用旧的 Handsontable RemoveRow 插件（在 1.11.0 中被删除），它在每一行旁边添加了删除按钮。显然，如果您不使用 RemoveRow 插件，这看起来并不完全相同，但也许它可以给您一些想法。

---

原来，插件在按下按钮后立即调用 Handsontable 删除该行：

$(div).on('mouseup', function () 
    instance.alter("remove_row", row); // <---
);

我用调用我自己的函数替换了它：

$(div).on('mouseup', function () 
    requestRemoveRow(instance, row); // <---
);

现在在我自己的函数中，我可以通过回调发出 AJAX 请求。如果成功，我将继续使用通常的 Handsontable alter 调用来删除该行：

function requestRemoveRow(handsontable, row) 
    // Disable remove buttons during request to avoid race condition
    $("th.htRemoveRow *").attr("disabled", true);

    $.ajax(
        url: "resource/" + row,
        type: "DELETE"
    )
        .done(function() 
            handsontable.alter("remove_row", row);
        )
        .always(function() 
            // Enable remove buttons after request finishes
            $("th.htRemoveRow *").removeAttr("disabled");
        )
    ;