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行。并且两行从Grid中消失了。

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

当删除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属性的函数。我的问题是，每次连续删除行时，销毁函数会以累积方式称为额外时间。这意味着对于第一次删除，该函数被调用一次，对于第二次删除，它被调用两次，依此类推。

在我的情况下，问题是因为我没有通知dataSource成功删除。以下是来自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。（这就是为什么数据源没有很好地同步，我在这一点上是正确的。）

发生了parseerror，因为我的删除webservice返回一个空字符串。

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

Answer 5

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

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

5 个答案: