单击完成后如何在 kendo ui 网格中捕获破坏事件？答案

【问题标题】：How capture destroy event in kendo ui grids when click is done?单击完成后如何在 kendo ui 网格中捕获破坏事件？
【发布时间】：2013-01-25 15:09:30
【问题描述】：

我想在网格中删除按钮的单击事件完成时执行一个动作。我怎么知道什么时候在 Javascript 中被点击？

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

（阅读重要在最后）

用途：

$("tr .k-grid-delete", "#grid").on("click", function(e) {
    alert("deleted pressed!");
})

#grid 是网格的 ID。

如果你想知道你可以做的数据项：

var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));

或者，您可以将grid.columns 中的command 定义为：

{
    command: [
        "edit",
        {
            name : "destroy",
            text : "remove",
            click: myFunction
        }
    ],
    title  : "Commands",
    width  : "210px" 
}

myFunction 在哪里：

function myFunction(e) {
    alert("deleted pressed!");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    // item contains the item corresponding to clicked row
}

重要提示：您可能希望定义自己的destroy 按钮，其中仅从原始样式复制样式（没有其他操作/检查）。如果是这样，请将您的 grid.columns.command 定义为：

{
    command: [
        "edit",
        {
            name     : "destroy",
            text     : "remove",
            className: "ob-delete"
        }
    ],
    title  : "&nbsp;",
    width  : "210px"
}

然后定义：

$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
    e.preventDefault();
    alert("deleted pressed!");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    // item contains the item corresponding to clicked row
    ...
    // If I want to remove the row...
    $("#grid").data("kendoGrid").removeRow($(this).closest("tr"));
});

【讨论】：

点击事件完成后如何获取要删除数据库的行数据？
确实如此！您使用的是哪个版本的剑道 UI？
我使用的是 v2012.3.1315。在grid.columns 我有{ command: "destroy", title: " ", width: "110px" }，如果我添加你的代码：[ "edit", { name : "destroy", text : "remove", click: myFunction } ] 它不起作用
是的。它是一组按钮。在示例中，我进行了编辑和销毁。
好的！这里 (jsfiddle.net/OnaBai/8Nq8X/4) 使用 v2012.3.1315 和 jQuery 1.83。我不得不改变live 事件的设置方式。这里 (jsfiddle.net/OnaBai/8Nq8X/3) 与 jQuery 1.72 相同。

【解决方案2】：

简单。您可以使用remove: 来捕获剑道中的破坏事件。

$('#grid').kendoGrid({
        dataSource: gridDataSource,
        scrollable: true,
        sortable: true,
        toolbar: ['create'],
        columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
            { command: ['edit', 'destroy'], title: '&nbsp;', width: '172px' }
        ],
        editable: {
            mode: 'inline',
            confirmation: false
        },
        save:function(e){
          alert("save event captured");
          //Do your logic here before save the record.
        },       
        remove:function(e){ 
          alert("delete event captured");
          //Do your logic here before delete the record.
        }
    });

$(document).ready(function() {  
    var gridDataSource = new kendo.data.DataSource({
        data: [
            { id: 1, description: 'Test 1', begin: new Date() }
        ],
        schema: {
            model: {
                id: 'id',
                fields: {
                    id: { type: 'number' },
                    description: { type: 'string' },
                    begin: { type: 'date' }
                }
            }
        }
    });

    $('#grid').kendoGrid({
        dataSource: gridDataSource,
        scrollable: true,
        sortable: true,
        toolbar: ['create'],
        columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
            { command: ['edit', 'destroy'], title: '&nbsp;', width: '172px' }
        ],
        editable: {
            mode: 'inline',
            confirmation: false
        },
        save:function(e){
          alert("save event captured");
        },       
        remove:function(e){
          alert("delete event captured");
        }
    });
      });

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="grid"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

【讨论】：

如果你需要恢复被删除的行，使用这个：$("#grid").data("kendoGrid").cancelChanges();