Kendo UI DataSource Destroy 函数多次调用多条记录

Question

我在 Kendo UI 中有一个奇怪的问题 - 我不明白。

这是我的代码。

$(document).ready(function() {
    var kendo_dataSource = new kendo.data.DataSource({
        autoSync: true,
        batch: true,
        transport: {
            read: {
                url: "<?php echo BASE_URL . 'kendo/kendo_grid_read' ?>",
                dataType: "json"
            },
            destroy: {
                url: "<?php echo BASE_URL . 'kendo/kendo_grid_destroy' ?>",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(data, type) {
                if (type == "destroy") {
                    return {models: data.models}
                }
            }
        },
        serverFiltering: true,
        serverGrouping: true,
        serverPaging: true,
        page: 1,
        pageSize: 5,
        schema: {
            data: "results",
            total: "total",
            model: {
                id: "field1"
            }
        }
    });

    $("#kendo_grid2").kendoGrid({
        dataSource: kendo_dataSource,
        height: 300,
        filterable: true,
        sortable: true,
        pageable: true,
        selectable: "multiple row",
        columns: [
            {
                field: "field1"
            },
            {
                field: "field2"
            },
            {
                field: "field3"
            }
        ]
    });

    $("#test_button").on("click", function() {
        var selectedRows = $("#kendo_grid2").data("kendoGrid").select();
        if (selectedRows.length > 0) {
            for (var i = 0; i < selectedRows.length; i++) {
                var dataItem = $("#kendo_grid2").data("kendoGrid").dataItem(selectedRows[i]);
                console.log(dataItem);
                kendo_dataSource.remove(dataItem);
            }
        }
    });

});

情况就是这样。

当$("#test_button").on("click", function() 被触发时，它会检查网格中的选定行 - 并删除这些行。

如果我选择 2 行，它会删除 2 行。并且 2 行从网格中消失了。

但是，我看到了一些奇怪的东西 -

当 2 行被删除时，有 2 个 POST 请求 - 这很好。

但是第一个POST请求的参数是

models[0][field1]   3
models[0][field2]   poioioi
models[0][field3]   oiuoiuuigbhkjh
models[0][field4]   kjh kjhkjhyt

第二个POST请求的参数是

models[0][field1]   3
models[0][field2]   poioioi
models[0][field3]   oiuoiuuigbhkjh
models[0][field4]   kjh kjhkjhyt
models[1][field1]   4
models[1][field2]   kjhk hkiui
models[1][field3]   khkj
models[1][field4]   mkhkhkhkjhghgfgdf

我明白，我可以像这样访问服务器中的数据

foreach ($_POST['models'] as $model) {
            echo $model['field1'];           
}

我想知道是否可以只发送一个请求 - 可能只发送第二个 POST 请求，因为我可以在一个请求中删除 2 行。

或者发送 2 个单独的请求但一次只有一个模型？

有可能吗？

任何帮助将不胜感激。

Answer 1

这是由autoSync 设置引起的。当您将其设置为 true 时，数据源会在每次更改后调用 sync 方法。将autoSync 设置为false 并手动调用sync() 方法将导致数据源仅对所有已删除的数据项发出一个请求。

Answer 2

就我而言，我手动删除 _destroyed 数据：

event.sender._destroyed = [];

 var gridOptions = {
    dataSource: {
        transport: {
            read: {
                url: crudServiceBaseUrl + "gettransactions",
                type: "GET"
            },
            destroy: {
                url: crudServiceBaseUrl + "delete",
                dataType: "jsonp",
                type: "POST"
            },
            parameterMap: function (models, operation) {
                if (operation == "destroy" && models)
                    return { models: kendo.stringify(models) };
            }
        },
        requestEnd: function (event) {
            event.sender._destroyed = [];
            grid.data('kendoGrid').refresh();
        },
        schema: {
            data: "listTransaction",
            total: "total",
            model: {
                id: "TransactionCustomerID",
                fields: {
                    TransactionCustomerID: { editable: false, nullable: true },
                    TransactionTime: { type: "date", editable: false }
                }
            },
            errors: "Errors"
        },
        change: function (event, abc) {
            //todo change fucntion              
        },
        serverPaging: false,
        serverFiltering: false,
        error: function (e) {
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        }
    },
    batch: true,
    editable: "popup",
    autoSync: true,
    resizable: true,
    columns: columnOptions,
    sortable: { mode: "single", allowUnsort: true },
    filterable: false,
    pageable: {
        pageSize: 20,
        pageSizes: [20, 50, 100],
        refresh: true
    },
    cancel: function () {
        grid.data('kendoGrid').dataSource.read();
        grid.data('kendoGrid').refresh();
    },
    dataBound: function (e) {
        hideGridButtonText(".k-delete");
        handleEmptyData(e);
    },
    excel: {
        fileName: "Transaction List.xlsx",
        filterable: true,
        allPages: false,
        downloadElement: "#exportexcel"
    }
};

它正在工作！

Answer 3

我遇到了类似的问题。

我正在为 dataSource 的 destroy 属性使用一个函数。我的问题是，每次连续删除一行时，销毁函数都会以累积的方式被调用一次。这意味着对于第一次删除，该函数被调用一次，对于第二次删除，它被调用两次，依此类推。

就我而言，问题是因为我没有通知数据源删除成功。下面是来自 Kendo UI 的documentation 的相关代码部分。我错过了成功的部分。

    destroy: function (options) {
      $.ajax({
        url: "http://demos.kendoui.com/service/products/destroy",
        dataType: "jsonp",
        data: {
          models: kendo.stringify(options.data.models)
        },
        success: function(result) {
          // notify the data source that the request succeeded
          options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
        }
      });

Answer 4

好的，我想我已经找到了问题的根源。

我订阅了数据源错误事件，我看到在 JSon 解析期间发生错误（parseerror）。因此 dataItem 不会从数据源中删除。 （这就是为什么数据源没有很好地同步，我在这一点上是对的）。

发生解析错误是因为我的删除网络服务返回一个空字符串。

现在我需要找到解决它的方法......

Answer 5

对我来说，它只是将 autoSync 设置为 false！试试看。