Tabulator在每行中添加带按钮的列-Java 学习之路

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

（我只使用JavaScript not Jquery ）我看到了这个链接https://github.com/olifolkerd/tabulator/issues/153，它帮助了很多，但没有涵盖所有 .

我已经走了添加一个新列，每行有一个按钮，但我需要能够为每一行添加某种ID，所以我可以选择它并将其连接到 Form ，将图像发布到我的背面 - 服务器端 .

我找不到任何关于如何使用这个库来做这个的文档，但我找到了一些让我理解这一点的答案 .

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

我一直在我的控制台上收到错误 button.addEventListener is not a function

2 回答

您无法将事件侦听器附加到字符串值 .

您需要先将元素附加到另一个DOM元素的 .innerHTML 来创建元素 .

然后，您需要在文档本身附加一个click事件侦听器，而不是动态创建的元素，因为addEventListener仅适用于最初加载javascript时属于HTML树的一部分的元素 .

function add_button() {

var uid = "btn_" + document.querySelectorAll("button").length;
var button ='<button id='+ uid +'>upload ID </button>';
document.getElementById("buttons").innerHTML += button;


document.addEventListener('click',function(e){
    if(e.target && e.target.id== uid){
       console.log("button " + uid + " is working");
    }
});
}

add_button();
add_button();

<div id="buttons">
</div>

回复于 2024-05-04T12:18:57+08:00

我终于明白了

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

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

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

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


}

回复于 2024-05-04T12:18:57+08:00

Tabulator在每行中添加带按钮的列

2 回答

相关问题