如何在 Tabulator 移动行上触发事件

Question

使用最新的 Tabulator 版本 4.4。我需要触发一个事件，以便捕获有关从一个 table 移动到下一个的行的信息。此移动在浏览器中运行良好，但从来没有触发任何东西，至少我可以看到，这告诉我移动了什么。我试过了

  rowMoved:function(row){
        //row - row component
    }

但它从未发生过。我试过发送者和接收者。我有一个 table 包含所有可能的问题，另一个只包含拖到其中的特定问题。

  var allquestions =  new Tabulator("#allquestions", {
  ajaxURL :  "includes/retrievequestions.php?id=All",
  rowMoved:function(row){
     //row - row component
     alert("row moved ");
 },
  height:"300px",
  layout:"fitColumns",
  pagination:"local",
  movableRows:true,
  movableRowsConnectedTables:"#thistemplatequestions",
  placeholder:"No Data Set available",
  paginationSize:40,
  paginationSizeSelector:[100, 200, 500, 1000],
  movableColumns:true,
  columns:[
    {title:"Question", field:"questiontext", sorter:"string", width:100, headerFilter:"input"},
    {title:"Description", field:"questiondescription"},
    {title:"Value", field:"questionvalue",  align:"center", width:100},
  ],
  });

  var thistemplatequestions =  new Tabulator("#thistemplatequestions", {
  ajaxURL :  "includes/retrievequestions.php?id="+$("#thisid").text(),
  movableRowsConnectedTables:"#allquestions",
  rowMoved:function(row){
     //row - row component
     alert("row moved ");
 },
  movableRowsReceiver: customReceiver,
  height:"300px",
  layout:"fitColumns",
  pagination:"local",
  placeholder:"No Data Set available",
  paginationSize:40,
  paginationSizeSelector:[100, 200, 500, 1000],
  movableRowsReceiver: "insert", //add rows when dropped on the table.
  columns:[
    {title:"Question", field:"questiontext", sorter:"string"},
    {title:"Description", field:"questiondescription" , headerFilter:"input"},
    {title:"Value", field:"questionvalue", align:"center", width:100},
  ],
  });

var customReceiver = function(fromRow, toRow, fromTable){
  alert("customer receiver ");
    //fromRow - the row component from the sending table
    //toRow - the row component from the receiving table (if available)
    //fromTable - the Tabulator object for the sending table

    if(toRow){
        toRow.update({"questiontext":fromRow.getData().questiontext});
        return true;
    }

    return false;
}

也试过 customReciever 也没有成功。它从未触发。

我确定可以做到，只是不知道怎么做。

非常感谢任何帮助。

Answer 1

您对 thistemplatequestions 的制表符定义似乎与 movableRowsReceiver 重复。删除第二个 (movableRowsReceiver: "insert", //add rows when dropped on the table.) 然后你的 customReceiver 将被执行。

编辑：

根据 Tabulator 文档：

Note: The movableRows option must be enabled on both tables to move rows from one to the other.

thistemplatequestions 制表符定义中似乎缺少 movableRows: true。

以下是代码片段，基于您的代码，经过我的修改以使其正常运行：

var thistemplatequestions =  new Tabulator("#thistemplatequestions", {
  ...
  movableRows:true,
  movableRowsReceiver: customReceiver,
  ...      
  });

function customReceiver(fromRow, toRow, fromTable){
    //fromRow - the row component from the sending table
    //toRow - the row component from the receiving table (if available)
    //fromTable - the Tabulator object for the sending table

    console.log("New Row Received!"); 
    this.table.addRow(fromRow.getData(), undefined, toRow);
    return true;
}

如何在 Tabulator 移动行上触发事件

How to trigger event on Tabulator move rows

tabulator