制表符添加每行带有按钮的列

dia*_*ond 3 javascript image-uploading tabulator

我正在使用名为Tabulator的 javaScript 库尝试添加列并允许用户能够在每行中上传 1 个图像文件。

(我只使用JavaScript而不是Jquery)我看到这个链接https://github.com/olifolkerd/tabulator/issues/153 ,它有很大帮助,但没有涵盖全部。

我已经在每行中添加一个带有按钮的新列,但我需要能够为每行添加某种 ID,以便我可以选择它并将其连接到将图像发布到我的背面的表单端服务器。

我找不到任何关于如何使用这个库执行此操作的文档,但我找到了一些答案,让我达到了这一点。

var openButton = function(value, data, cell, row, options){ //plain text value
var button ='<button>upload ID </button>';

    button.addEventListener('click',function(){
    console.log("button is working");
});

return button;
};
Run Code Online (Sandbox Code Playgroud)

我的控制台上不断出现错误button.addEventListener is not a function

dia*_*ond 7

我终于想通了

首先必须添加包含该函数的变量

var the_Function = function(cell, formatterParams, onRendered){ //plain text value

  //var formA = '<form class="" action="/upload" method="post">'
  //var inputFn = '<input type="file" id="imgupload" />' ;
  //var uploadBtnn = '<button type="submit" id="OpenImgUpload">ID upload</button></form>'
//return uploadBtnn
return "<i class='fa fa-print'>function_trigger</i>";
};
Run Code Online (Sandbox Code Playgroud)

那么我们必须将格式化程序添加到列的

table.addColumn({title:"ID", field: "ID" ,formatter:the_Function,width:100, align:"center",cellClick:function(e, cell){ 

//button's function for example 
var Btn = document.createElement('Button');
Btn.id = "Btn_Id";
console.log(Btn);


}
Run Code Online (Sandbox Code Playgroud)