简体   繁体   English

制表符删除行 c#

[英]tabulator delete row c#

I am using c# .net core api and tabulator for a small web app我正在使用 c# .net 核心 api 和制表器用于小型 Z2567A5EC9705EB7AC2C984033ZE

I am having trouble understanding how to delete a row.我无法理解如何删除一行。 The documentation has a specific row in the demo associated with the button.该文档在与该按钮关联的演示中具有特定行。

here's the documentation:这是文档:

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

the documentation/interactive demo shows just "remove row oli bob"...it does not show the user just clicking on the row and deleting the row...so I'm confused on how to go about an ad hoc delete文档/交互式演示仅显示“删除行 oli bob”...它不显示用户只是单击该行并删除该行...所以我对如何 go 关于临时删除感到困惑

My user wants to delete rows ad hoc.我的用户想要临时删除行。

Here's my class file/html:这是我的 class 文件/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>

You can use formatter buttonCross ( http://tabulator.info/docs/4.6/format ) to create delete button.您可以使用格式化程序 buttonCross ( http://tabulator.info/docs/4.6/format ) 创建删除按钮。 So your code will be like this:所以你的代码将是这样的:

{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();
  }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM