0

我有一个剑道 UI 网格并从 ajax 调用方法加载数据。第一次单击按钮时，数据加载没有任何问题，但是当我再次单击按钮时，数据未加载。有什么问题。请帮我。

<body>
    <div id="example">
      <button id="primaryTextButton" class="k-primary">Submit</button>
     <div id="grid"></div>     </div>
</body>

$(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            transport: {
                /*read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                },*/
                 read: function(options) {
                                           $.ajax({
                                               type: "POST",
                                               url: crudServiceBaseUrl + "/Products",
                                              // contentType: "application/json; charset=utf-8",
                                               dataType: 'jsonp',
                                               //data: JSON.stringify({key: "value"}),
                                              // data: JSON.stringify(_traceInput),
                                               success: function(data) {

                                                   var grid = $('#grid').getKendoGrid();
                                                   if (grid == undefined) {
                                                       grid.empty();
                                                   }
                                                   else {

                                                       grid.dataSource.data(data);
                                                       grid.refresh();
                                                   }

                                               }
                                           });
                                       },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        autoBind : false,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });



 $('.k-primary').click(function (e) {
    // do something else

    dataSource.read();
});
});

http://jsfiddle.net/qoxvaayn/40

4

2 回答 2

1

两件事情：

首先：您正在通过“手动”用返回的数组覆盖数据来破坏成功处理程序中网格的 dataSource 传输。这就是为什么第二次读取没有触发的原因……您的数据现在是常规数组，不再是远程传输。将您的成功处理程序更改为记录的处理方式（示例 - 将读取设置为函数）

    success: function(data) {
      // notify the data source that the request succeeded
      options.success(data);
    }

第二：您通过将函数和对象传输定义混合在一起来自找麻烦。它们必须全部定义为所有函数或所有对象，否则您将遇到事件未触发的问题。http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read

所有传输操作（读取、更新、创建、销毁）必须以相同的方式定义，即作为函数或对象。混合不同的配置选项是不可能的。

于 2016-12-13T14:38:32.637 回答
0

我已经重新调整了您的代码并更新了小提琴。希望这能满足您的要求。

$(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            data:[],
            batch: true,
            pageSize: 20
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        autoBind : false,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });



 $('.k-primary').click(function (e) {
   var grid = $('#grid')
  // show loading indicator
    kendo.ui.progress(grid, true);
    $.ajax({
       type: "POST",
       url: crudServiceBaseUrl + "/Products",
       dataType: 'jsonp',
       success: function(data) {       
          $("#grid").data("kendoGrid").dataSource.data(new kendo.data.ObservableArray(data));
          // hide loading indicator
            kendo.ui.progress(grid, false);
       }
    });
 });
});

http://jsfiddle.net/qoxvaayn/40/

于 2016-12-13T12:38:20.270 回答