如何以编程方式删除 Tabulator 表中的自定义操作按钮？

Question

我创建了一个 Tabulator 表，它有一个自定义操作按钮来执行一个操作，然后更新单击该按钮的行。它成功了。

我想要做的是在更新行数据后立即动态删除被点击的行的链接/按钮 - 仅适用于点击了按钮的行。我已经尝试解决这个问题几个小时并检查了制表符文档，但我仍然不知道我该怎么做。

非常感谢您的帮助。

代码如下：

var tableData =[
   {
      "id":30,
      "position":201,
      "category":"onel",
      "name":"One Thing",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":31,
      "position":202,
      "category":"onel",
      "name":"Two things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":32,
      "position":203,
      "category":"onel",
      "name":"Three things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":33,
      "position":204,
      "category":"onel",
      "name":"Four things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   },
   {
      "id":34,
      "position":205,
      "category":"onel",
      "name":"Five things",
      "completed_at":null,
      "created_by_email":"",
      "completed_by":""
   }
];
var actButton = (cell, params, onRendered) => {                        
    var myId = cell.getRow().getData().id;
    clickFunction = (p_id) => {  
        cell.getTable().updateData(
          [
            { id: p_id
             , completed_at: '2021-12-31 13:59:00'
             , completed_by: 'Womble'
             , completed_by_email: 'wimbledon@common.org.uk'
            }
          ] 
          // <--- here, I want to remove this row's action button as defined below
        );
    };
    /**
     * This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
     */
    if ( null == cell.getRow().getData().completed_at ) {
        return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
    } else {
        return "";
    }                
};
var myTable = new Tabulator(
    "#divTable",
    {
        data: tableData,
        columns: [
            {title:"Position", field:"position"},
            {title:"Category", field:"category"},                    
            {title:"Name", field:"name"},
            {title:"Completed", field:"completed_at", formatter:"datetime", formatterParams:{inputFormat:"YYYY_MM_DD HH:mm:ss", outputFormat:"DD/MM/YYYY HH:mm:ss", invalidPlaceholder:""} },
            {title:"By", field:"completed_by", sorter:"string"},
            {title:"Email", field:"completed_by_email", sorter:"string"},
            {title:"Action", field:"id", sortable:false, formatter:actButton},
        ],
        layout: "fitColumns",
        pagination: "local",
        paginationSize: "15",
        tooltips:true,
        tooltipsHeader:true,
        reactiveData:true, //turn on data reactivity
    }
);

Answer 1

我一直在寻找 Tabulator 组件对象模型的解决方案，当时 DOM 最好地回答了它。

假设：

• 为操作按钮列分配了“id”字段 - 这不会影响动态表的布局或交互

使用上述代码的片段作为起点，解决方案是：

var actButton = (cell, params, onRendered) => {                        
    var myId = cell.getRow().getData().id;
    clickFunction = (p_id) => {  
        cell.getTable().updateData(
          [
            { id: p_id
             , completed_at: '2021-12-31 13:59:00'
             , completed_by: 'Womble'
             , completed_by_email: 'wimbledon@common.org.uk'
            }
          ]
        ).then (
          () => {
             /**
              * Remove the action button
              */
            [...document.querySelectorAll("div.tabulator-cell")]
                .filter(item => item.getAttribute('title')==p_eventId)[0]
                    .childNodes[0].remove();
          }
        );
    };
    /**
     * This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
     */
    if ( null == cell.getRow().getData().completed_at ) {
        return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
    } else {
        return "";
    }                
};