制表符在每行中添加带有按钮的列
Tabulator Add column with button in each row
我正在使用名为 Tabulator 的 javaScript 库尝试添加列并允许用户能够在每行中上传 1 个图像文件。
(我只用JavaScript 不Jquery)我看到这个link https://github.com/olifolkerd/tabulator/issues/153
这有很大帮助,但并没有涵盖所有内容。
我已经在每行中添加一个带有按钮的新列,但我需要能够为每一行添加某种 ID,以便我可以 select 它并将其连接到表单 将post 图像发送到我的后端服务器。
我找不到任何关于如何使用该库执行此操作的文档,但我找到了一些让我了解这一点的答案。
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
您不能将事件侦听器附加到字符串值。
您需要先通过将元素附加到另一个 DOM 元素的 .innerHTML
来创建该元素。
然后您需要在文档本身上附加一个点击事件侦听器,而不是您动态创建的元素,因为当 javascript 初始加载。
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>
我终于明白了
首先必须添加包含函数的变量
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);
}
这在 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>
我正在使用名为 Tabulator 的 javaScript 库尝试添加列并允许用户能够在每行中上传 1 个图像文件。
(我只用JavaScript 不Jquery)我看到这个link https://github.com/olifolkerd/tabulator/issues/153 这有很大帮助,但并没有涵盖所有内容。
我已经在每行中添加一个带有按钮的新列,但我需要能够为每一行添加某种 ID,以便我可以 select 它并将其连接到表单 将post 图像发送到我的后端服务器。
我找不到任何关于如何使用该库执行此操作的文档,但我找到了一些让我了解这一点的答案。
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
您不能将事件侦听器附加到字符串值。
您需要先通过将元素附加到另一个 DOM 元素的 .innerHTML
来创建该元素。
然后您需要在文档本身上附加一个点击事件侦听器,而不是您动态创建的元素,因为当 javascript 初始加载。
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>
我终于明白了
首先必须添加包含函数的变量
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);
}
这在 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>