javascript - Kendo 网格取消导致删除行

Question

我正在使用剑道网格和网格。在特定情况下，我使用 grid.dataSource.add() 方法将数据添加到网格的数据源。以下是配置我的网格。

var itemcodedataSource = new kendo.data.DataSource({
            dataType: "json",
            transport: {
                    read: function(o){
                       o.success([]);
                    },
                    create: function(o) {                      
                        var item = o.data;
                            //assign a unique ID and return the record
                            item.id =  len;
                            o.success(item);
                            len++;
                    },
                    destroy: function(o) {
                          o.success();
                    },
                    update: function(o){
                          o.success();
                    }         
            },                      
            autoSync: true,
            schema: {                       
            model: {
                id    : "id",
                fields: {
                        type_flag: {validation: {}},
                        item_code:{validation:{}},
                        bill_no:{validation:{}},
                        item_code_desc: {validation: {},editable:false},
                        line_balance:{validation:{},type:"number",editable:false},
                        collection_status:{validation:{},editable:false},
                        amount:{validation:{required:false},type:"number",nullable:false },
                        item_detail:{},
                        total_balance:{type:"number",nullable:false},
                        total_due:{type:"number",nullable:false},
                        amt_edit_flag:{},
                    }   
                }
            },
        });

        $("#itemcode_grid").kendoGrid({
                dataSource: itemcodedataSource,
                selectable: "multiple",
                change     : calcTotals,
                toolbar: ["create"],
                    columns:[
                                { field: "type_flag", width: "90px", title: "Type",sortable:false,
                                },
                                { field: "item_code", width: "80px", title: "Item Code",sortable:false
                                },
                                { field: "bill_no", width: "80px", title: "Bill Number",sortable:false
                                },
                                { field: "line_balance", width: "50px", title: "Deferrals",sortable:false
                                },
                                { field: "collection_status", width: "50px", title: "Hold",sortable:false
                                },
                                { field: "amount", width: "70px", title: "Payment",sortable:false
                                },
                                { command: ["edit", "destroy"], title: "Options", width: "130px"},
                            ],
                    editable: "inline",
                });

我正在通过这种方式将数据添加到数据源

var gridDs      =   $("#itemcode_grid").data("kendoGrid").dataSource;
            for (var i = 0; i < gridData.length; i++) {
                gridDs.add({
                    type_flag           : gridData[i].type_flag, 
                    item_code           : gridData[i].item_code,
                    bill_no             : detailsData[i].bill_no, 
                    item_code_desc      : detailsData[i].itemcode_details.item_code_desc,
                    line_balance        : gridData[i].line_deferred, 
                    collection_status   : detailsData[i].collection_status,
                    amount              : parseFloat(gridData[i].amount),
                    qty_pricing_type    : detailsData[i].itemcode_details.qty_pricing_type,
                    item_detail         : res[0][i],
                    total_balance       : parseFloat(detailsData[i].line_balance),
                    total_due           : detailsData[i].line_due,
                    id                  : gridDs._data.length+1,
                });

                gridDs.sync();
            }

detailsData 和 gridData 是 ajax 的响应。我的问题是此方法将新数据添加到网格。但是单击编辑和取消删除从网格中选择的行。通常当网格中的项目没有唯一的 id 时会发生这种情况。但是我检查过并且所有项目都有一个唯一的 id。这段代码有什么问题。如何解决这个错误。提前致谢.

Answer 1

您的记录正在被删除，因为您取消编辑时刚刚添加的数据正在被销毁。

跟踪 destroy 方法，您会看到它在您点击 cancel 时被调用，而 destroy 被调用，因为实际上从未在服务器中创建(在 create 处理程序上放置一个跟踪，您将看到它没有被调用)。

并且 create 没有被调用，因为当您将它们添加到 for 循环中时，您分配了一个 id。

按如下方式尝试 for 循环:

var gridDs      =   $("#itemcode_grid").data("kendoGrid").dataSource;
for (var i = 0; i < gridData.length; i++) {
    gridDs.add({
        type_flag           : gridData[i].type_flag,
        item_code           : gridData[i].item_code,
        bill_no             : detailsData[i].bill_no,
        item_code_desc      : detailsData[i].itemcode_details.item_code_desc,
        line_balance        : gridData[i].line_deferred,
        collection_status   : detailsData[i].collection_status,
        amount              : parseFloat(gridData[i].amount),
        qty_pricing_type    : detailsData[i].itemcode_details.qty_pricing_type,
        item_detail         : res[0][i],
        total_balance       : parseFloat(detailsData[i].line_balance),
        total_due           : detailsData[i].line_due
    });

    gridDs.sync();
}

结论:id不赋值不好，早赋值不好。