我正在为小型Web应用程序使用c＃.net核心api和制表符
我在理解如何删除行时遇到了麻烦。该文档在与按钮相关联的演示中有特定的行。
这里是文档：
http://tabulator.info/examples/4.6?#adddel
该文档/交互式演示仅显示“删除行oli bob” ...它不显示用户只是单击该行并删除该行...所以我对如何进行临时删除感到困惑
我的用户想临时删除行。
这是我的课程文件/ html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Customers Admin Panel</title>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body onload="initTable()">
<button onclick="loadCustomers()">Refresh Data</button>
<table id="customers">
</table>
<script>
var table;
function handleCellUpdated (cell) {
console.log(cell);
console.log(cell.getRow());
console.log(cell.getRow().getData());
var record = cell.getRow().getData();
$.ajax({
url: "api/SalesTrackerCustomers/" + record.id,
data: JSON.stringify(record),
contentType: 'application/json',
type: "PUT",
success: function(response, textStatus, xhr){
console.log("success")
},
error: function(XMLHttpRequest, textStatus, error){
console.log("error")
}
});
}
function initTable() {
//Build Tabulator
table = new Tabulator("#customers", {
height: "90vh",
placeholder: "Loading...",
addRowPos: "bottom",
columns: [
{ title: "Customer ID", field: "custId", width: 150, editor: "input" },
{ title: "Customer Type", field: "custType", width: 130, editor: "input" },
{ title: "Customer Name", field: "customerName", editor: "input" },
{ title: "Group ID", field: "groupId", editor: "number" }
],
cellEdited: handleCellUpdated
});
loadCustomers();
}
function loadCustomers(){
console.log("loading data");
$.ajax({
url: "/api/SalesTrackerCustomers",
method: "GET"
}).done(function (result) {
table.setData(result);
});
}
</script>
</body>
</html>
您可以使用格式化程序按钮十字（http://tabulator.info/docs/4.6/format）创建删除按钮。因此您的代码将如下所示：
{formatter:"buttonCross", align:"center", title:"del", headerSort:false, cellClick:function(e, cell){
if(confirm('Are you sure you want to delete this entry?'))
cell.getRow().delete();
}
}