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

2つのこと：

最初: 返された配列でデータを「手動で」上書きすることにより、成功ハンドラーでグリッドの dataSource トランスポートを壊しています。これが、読み取りが 2 回目に発生しない理由です...データは、リモート トランスポートではなく、通常の配列になりました。成功ハンドラーを文書化された処理に変更します (例 - SET READ AS A FUNCTION )

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

2 つ目: 関数とオブジェクト トランスポートの定義を一緒に混在させることで、問題が発生しています。それらはすべて、すべての関数またはすべてのオブジェクトとして定義する必要があります。そうしないと、イベントが発生しないという問題が発生します。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 に答える