2013-04-11 134 views
3

Kendo UI中有一个奇怪的问题 - 我不明白。Kendo UI DataSource销毁函数调用多次记录多次

这是我的代码。

$(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行。这两行从网格中消失。

但是,我看到一些奇怪的 -

whhen 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'];   
} 

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

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

可能吗?

任何帮助将不胜感激。

回答

3

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

+0

你好谢谢你的回复, 我改变了自动同步为false, 我只是封闭的循环后,编辑这样的代码, ,我加入这行代码 kendo_dataSource.sync( ); 但我得到这个错误 - TypeError:t是undefined 我是否在正确的位置调用同步方法? – 2013-04-11 11:50:19

+0

@AjeeshJoshy不要忘记标记为有帮助的答案。 – 2013-04-11 11:51:54

0

好的,所以我想我已经找到了问题的根源。

我订阅了数据源错误事件,并在JSon解析(parseerror)期间看到错误。所以dataItem不会从数据源中删除。 (为什么数据源不能很好地同步,我在这一点上是正确的)。

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

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

1

我有一个类似的问题。

我正在使用数据源的destroy属性的函数。我的问题是,每连续删除一行,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); 
     } 
     }); 
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" 
    } 
}; 

它工作!