时间戳

首页 > 解决方案 > 如何在制表符移动行上触发事件

tabulator - 如何在制表符移动行上触发事件

问题描述

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

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

但它永远不会发生。我尝试了发送者和接收者。我有一张桌子，上面有所有可能的问题，还有一张只包含拖到它上面的特定问题。

  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 也没有运气。它从未触发过。

我确信它可以完成，我只是不知道怎么做。

非常感谢任何帮助。

标签： tabulator

解决方案

看起来您的制表符定义thistemplatequestions具有重复的movableRowsReceiver. 删除第二个 ( movableRowsReceiver: "insert", //add rows when dropped on the table.)，customReceiver然后执行您的遗嘱。

编辑：

根据制表符文档：

注意：必须在两个表上启用可移动行选项才能将行从一个表移动到另一个表。

您似乎movableRows: true在thistemplatequestions制表符定义中丢失了。

这是基于您的代码片段，以及我为使工作正常进行的修改：

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;
}

推荐阅读