制表符删除行c#

Question

我正在使用 c# .net 核心 api 和一个小型网络应用程序的制表符

我无法理解如何删除一行。该文档在与按钮关联的演示中有特定的行。

这是文档：

http://tabulator.info/examples/4.6?#adddel

documentation/interactive 演示仅显示 "remove row oli bob"...它不显示用户只需单击该行并删除该行...所以我对如何进行感到困惑临时删除

我的用户想临时删除行。

这是我的 class file/html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Customers Admin Panel</title>
    <link href="https://unpkg.com/tabulator-tables@4.6.2/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/tabulator-tables@4.6.2/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>

Answer 1

您可以使用 formatter buttonCross (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();
  }
}

制表符删除行c#

tabulator delete row c#

c#

tabulator