Kendo UI Grid編輯問題

Question

我嘗試過使用Kendo Grid並發現一些問題。

按鈕動作「編輯」和「刪除」當我點擊時不做任何事情，但如果我把「創建」命令放入傳輸中，當我單擊刪除時，網格會發送大量POSTS用於創建URL命令或點擊編輯>取消（更新按鈕不做任何事情）。

我做錯了什麼？

我的代碼：

<div id="grid"></div> 
<script type="text/x-kendo-template" id="template"> 
    <div class="toolbar">  
    <input type="number" min="0" id="item-id" maxlength="10" /> 
    <input type="text" id="name" class="k-textbox" placeholder="..." /> 
    <button style="width: 100px" id="btn-grid-filtrar" class="k-button" >Filter</button> 
</div> 
</script> 

<script> 
    $(document).ready(function() { 

     var dataSource = new kendo.data.DataSource(
     { 
      schema: 
      { 
       data: "data", 
       total: "total", 
       model: 
       { 
        id: "data", 
        fields: 
        { 
         id: { editable: false, nullable: false }, 
         nome: { type: "string", validation: { required: true} }, 
         ativo: { type: "boolean" } 
        } 
       } 
      },     
      transport: 
      { 
       read: 
       { 
        url: "page", 
        dataType: "json", 
        type: "POST", 
        data: additionalData 
       }, 
       update: { 
        url: "update", 
        dataType: "jsonp" 
       }, 
       destroy: { 
        url: "delete", 
        dataType: "jsonp" 
       } 
       /*, 
       create: { 
        url: "add", 
        dataType: "jsonp"     
       } 
       */ 
      }, 
      pageSize: 5, 
      serverSorting: true, 
      serverPaging: true, 
     }); 

     var grid = $("#grid").kendoGrid({ 
      dataSource: dataSource, 
      sortable: true, 
      pageable: { 
       input: true, 
       numeric: false 
      }, 
      batch: true, 
      columns: [ 
       { field: "id", title: "#", width: "60px" }, 
       { field: "nome", title: "Nome" }, 
       { field: "ativo", title: "Ativo", width: "60px", template: "#= ativo ? 'Sim' : 'Não' #" }, 
       { command: ["edit", "destroy"], title: "Ações", width: "200px" } 
      ], 
      editable: "inline", 
      toolbar: kendo.template($("#template").html()),    
     }); 

     kendo.bind($(".toolbar")); 

     $("#id").kendoNumericTextBox({ 
      format: "##########", 
      placeholder: "..." 
     }); 

     $("#btn-grid-filtrar").click(function() { 
      grid.data("kendoGrid").dataSource.read(); 
     }); 
    }); 

    function additionalData() { 
     return { 
      filtro_id: $("#item-id").val(), 
      filtro_nome: $("#name").val() 
     }; 
    } 

</script> 

Answer 1

首先，我假設你服務器在爲一個JSON格式如下：

{ 
    "total": 2, 
    "data" : [ 
     { 
      "data" : 23, 
      "id" : 1, 
      "ativo": true, 
      "nome" : "stock-1" 
     }, 
     { 
      "data" : 34, 
      "id" : 2, 
      "ativo": false, 
      "nome" : "stock-2" 
     } 
    ] 
} 

正確？

因此，第一件事是將每行data上的「數據」更改爲不叫data的東西。事實證明，data是KendoUI一種-的保留字碼結構常用的：

with (data) { 
    // Expanded code coming from a grid row data 
} 

凡本data是您的網格引用行的變量。因此，在這種情況下，data既是行本身，也是該行中的字段，然後JavaScript無法正確解決該問題。

所以，你可以定義你的架構爲：

schema  : { 
    data : "data", 
    total: "total", 
    model: { 
     id : "_data", 
     fields: { 
      id : { editable: false, nullable: false }, 
      nome : { type: "string", validation: { required: true} }, 
      ativo: { type: "boolean" } 
     } 
    } 
}, 

注：我已經_data更換data。

傳輸的數據爲：

{ 
    "total": 2, 
    "data" : [ 
     { 
      "_data" : 23, 
      "id" : 1, 
      "ativo": true, 
      "nome" : "stock-1" 
     }, 
     { 
      "_data" : 34, 
      "id" : 2, 
      "ativo": false, 
      "nome" : "stock-2" 
     } 
    ] 
} 

只是這個小小的改變，你的Edit按鈕將開始工作。

Answer 2

你不應該定義傳輸級的本地數據源，如果理解正確的話你的代碼，你是不是在任何地方發佈 - 你是不是有約束力的任何遠程的數據，我不能看到任何網址？按照此示例http://demos.kendoui.com/web/datasource/index.html。