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

Question

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

（我只使用 JavaScript 不是 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

Answer 1

我终于明白了

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

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


}

Answer 2

您不能将事件侦听器附加到字符串值。

您需要首先通过将其附加到另一个 DOM 元素的.innerHTML 来创建该元素。

然后您需要在文档本身上附加一个点击事件侦听器，而不是您动态创建的元素，因为 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>

Answer 3

这在 Tabulator 中有清楚的解释：http://tabulator.info/examples/3.1

//Generate print icon
var printIcon = function(cell, formatterParams){ //plain text value
    return "<i class='fa fa-print'></i>";
};

//Build Tabulator
$("#example-table").tabulator({
    height:"311px",
    fitColumns:true,
    rowFormatter:function(row){
        if(row.getData().col == "blue"){
            row.getElement().css({"background-color":"#A6A6DF"});
        }
    },
    columns:[
    {formatter:"rownum", align:"center", width:40},
    {formatter:printIcon, width:40, align:"center", cellClick:function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
    {title:"Name", field:"name", width:150, formatter:function(cell, formatterParams){
       var value = cell.getValue();
        if(value.indexOf("o") > 0){
            return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
        }else{
            return value;
        }
    }},
    {title:"Progress", field:"progress", formatter:"progress", sorter:"number", width:100},
    {title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, align:"center", width:120},
    {title:"Driver", field:"car", align:"center", formatter:"tickCross", width:50},
    {title:"Col", field:"col" ,formatter:"color", width:50},
    {title:"Line Wraping", field:"lorem" ,formatter:"textarea"},
    {formatter:"buttonCross", width:30, align:"center"}
    ],
});

这是我通过触发一个window.location到编辑页面来使用它的方式：

<script>
                        //Generate Edit icon
                        var editIcon = function(cell, formatterParams){ //plain text value
                            return "<i class='fas fa-pen-square'></i>";
                            };
                        //define data array
                        var tabledata = [
                                <?php echo $tableData; ?>
                            ];

                        var table = new Tabulator("#example-table", {
                            data:tabledata,           //load row data from array
                            layout:"fitColumns",      //fit columns to width of table
                            responsiveLayout:"hide",  //hide columns that dont fit on the table
                            tooltips:true,            //show tool tips on cells
                            addRowPos:"top",          //when adding a new row, add it to the top of the table
                            history:true,             //allow undo and redo actions on the table
                            pagination:"local",       //paginate the data
                            paginationSize:20,         //allow XX rows per page of data
                            movableColumns:false,      //allow column order to be changed ?
                            resizableRows:false,       //allow row order to be changed ?
                            initialSort:[             //set the initial sort order of the data
                                {column:"name", dir:"asc"},
                            ],
                            columns:[                 //define the table columns
                                
                                {title:"Department", field:"userDeptName", editor:false},
                                {title:"Description", field:"userDeptDesc", editor:false},
                                {formatter:editIcon, width:40, align:"center", cellClick:function(e, cell){
                                            alert("Going To: " + cell.getRow().getData().userDeptName);
                                            window.location = "/account-departments/"+ cell.getRow().getData().userDeptName;
                                            }},
                                ],
                            });
                        </script>