制表符将元素添加到列并执行操作

问题描述

使用Tabulator插件时，我遇到了一个非常糟糕的问题。我有一列包含标题。现在我想在另一列中放置3个按钮。

一个<a>标签按钮可转到链接。
一个按钮进行编辑；我想给我看一个模态并调用ajax。
我已经有一个切换按钮插件。我不知道如何将其添加到此列并激活它。

我在制表器文档中找不到答案。

解决方法

您需要使用自定义格式程序。

首先定义单元格格式化程序功能，在这种情况下，它将创建按钮元素（您可以在此处添加其他功能以自定义按钮的内容/外观）一些事件监听器来处理被单击的按钮，然后将它们附加到单元格

function buttonFormatter(cell){
    var cellEl = cell.getElement(); //get cell DOM element

    // create elements
    var linkBut document.createElement("button");
    var edtiBut document.createElement("button");
    var otherBut document.createElement("button");

    //add event bindings
    linkBut.addEventListener("click",function(e){
        //do something when link button clicked
    });

    //add buttons to cell
    cellEl.appendChild(linkBut);
    cellEl.appendChild(edtiBut);
    cellEl.appendChild(otherBut);
}

然后，您使用列定义中的 formatter 属性将格式化程序功能绑定到该列：

   {title:"buttons",formatter:buttonFormatter),

有关使用自定义格式化程序的详细信息，请参见Formatter Documentation

javascript jquery tabulator