4

我正在使用Kendo UI 2013.2.716 和JQuery 2.0.3，我在我的页面上放置了一个网格，我的问题是：

有谁知道如何判断网格中的destroy命令破坏了什么？

例如：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo.common.min.css" rel="stylesheet" />
    <link href="kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">
    $(document).ready(function() {    
        var products = [];
        for(var i = 1; i <= 40; i++) {
            products.push({
                ProductId: i,
                ProductName: "Product " + i
            });
        }    
        $("#grid").kendoGrid({
            dataSource: {
                data: products,
                schema: {
                    model: {
                        id: "ProductId",
                        fields: {
                            ProductName: { type: "string" },
                        }
                    }
                },
                requestEnd: function (e) {
                    if (e.type === "destroy") {
                        alert("OK, so something got destroyed, but what??");
                    }
                }
            },
            editable: "inline",
            columns: [
                "ProductName",
                { command: "destroy", title: " ", width: "100px" }
            ]
        });
    });
</script>
</body>
</html>

我在文档中找到了requestEnd回调，但我完全不知道被销毁的项目在哪里。我只需要该项目的 ID，以便我可以适当地更新页面的其他部分。

我想知道是否需要事先以某种方式捕获它。

4

2 回答 2

2

您需要transport在数据源上配置对象。在您当前的配置中，是否真的有任何东西被破坏了？当然，该项目可能会从您的网格中消失，但我想知道它是否仍然存在于数据源中。也许这就是你的意图。

http://docs.kendoui.c​​om/api/framework/datasource#configuration-transport.destroy

如果您只是在寻找一种方法来获取正在被破坏的数据，请挂钩到对象的parameterMap()功能transport。在那里，您可以在执行操作之前操纵正在删除的对象。

http://docs.kendoui.c​​om/api/framework/datasource#configuration-transport.parameterMap

于 2013-08-22T19:35:06.987 回答
1

感谢@Brett 指出运输中的破坏属性。这段代码可以解决问题 - 让我能够捕获被破坏的内容（参见 transport.destroy 部分）：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo.common.min.css" rel="stylesheet" />
    <link href="kendo.default.min.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>            
<div id="grid"></div>
<script type="text/javascript">
    $(document).ready(function() {    
        $("#grid").kendoGrid({
            dataSource: {
                schema: {
                    model: {
                        id: "ProductId",
                        fields: {
                            ProductName: { type: "string" },
                        }
                    }
                },
                transport: {
                    read: function (options) {
                        var products = [];
                        for(var i = 1; i <= 40; i++) {
                            products.push({
                                ProductId: i,
                                ProductName: "Product " + i
                            });
                        }    
                        options.success(products);
                    },
                    destroy: function (options) {                        
                        var data = $("#grid")
                            .data("kendoGrid").dataSource.data();
                        var products = [];
                        for(var i = 0; i < data.length; i++) {
                            if (data[i].ProductId !== options.data.ProductId) {
                                products.push(data[i])
                            }
                        }
                        options.success(products);

                        alert("Woo hoo - the product with the ID: " 
                            + options.data.ProductId + " was destroyed!");
                    }
                }
            },
            editable: "inline",
            columns: [
                "ProductName",
                { command: "destroy", title: " ", width: "100px" }
            ]
        });
    });
</script>
</body>
</html>
于 2013-08-23T06:04:57.133 回答