是否有可能在本地数据kendo网格中具有完整的增删改查功能

问题描述：

我目前正在实施一个kendo网格，并用本地数据填充它。就是这样;我从我的操作中生成了一个JSON字符串，并在视图页面上提供了该字符串。是否有可能在本地数据kendo网格中具有完整的增删改查功能

最后，我想知道是否有可能使用本地数据实现完整的CRUD功能？

这是目前编写的代码示例;

<div id="example" class="k-content">    
     <div id="grid"></div>    
     <script>     
      $(document).ready(function() { 
       var myData = ${coursemodules}, 
       dataSource = new kendo.data.DataSource({ 
        data: myData,       
        batch: true,        
        pageSize: 30,        
        schema: {         
         model: { 
          id: "id", 
          fields: {          
           id: { editable: false, nullable: true},           
           name: { type: "string", validation: { required: true }}, 
           qualificationLevel: { type: "string", validation: { required: true }}, 
           description: { type: "string", validation: { required: true }},           
           published: { type: "boolean" }, 
           gateApprove: { type: "boolean" }, 
           duration: { type: "number", validation: { min: 1, required: true } }, 
           academicBody: { type: "string" } 
          }         
         }        
        }       
       }); 

       $("#grid").kendoGrid({       
        dataSource: dataSource, 
        height: 350,       
        scrollable: true,       
        sortable: true,             
        pageable: true, 
        toolbar: ["create", "save", "cancel"], 
        columns: [        
         {         
          field: "id",         
          title: "ID", 
          width: '3%' 
         },        
         {         
          field: "name",         
          title: "Course Title", 
          width: '20%' 
         },        
         {         
          field: "description", 
          title:"Description", 
          width: '35%' 
         },        
         {         
          field: "published", 
          title: "Published", 
          width: '7%' 
         }, 
         {         
          field: "gateApprove", 
          title: "Gate Approve", 
          width: '7%' 
         }, 
         {         
          field: "duration", 
          title: "Duration", 
          width: '5%' 
         }, 
         {         
          field: "academicBody.shortName", 
          title: "Academic Body", 
          width: '10%' 
         } 
        ], 
        editable: true 
       });     
      });    
     </script>   
    </div>

我已经意识到，对于数据源，您必须声明传输来实现CRUD。但是，我需要声明“数据”。我试着声明传输和数据。这似乎并不奏效。

答

当绑定本地数据时，Grid小部件利用表示本地传输的抽象。因此，它不需要定制运输;在网格中进行的修改会反映到绑定的数据源中。这包括通过取消进行回滚。

答

是的，你可以这里是JSFiddle希望这会帮助你。

// this should be updated when new entries are added, updated or deleted 

var data = 
    [{ 
     "ID": 3, 
     "TopMenuId": 2, 
     "Title": "Cashier", 
     "Link": "www.fake123.com"}, 
    { 
     "ID": 4, 
     "TopMenuId": 2, 
     "Title": "Deposit", 
     "Link": "www.fake123.com"} 
    ]; 


$("#grid").kendoGrid({ 
    dataSource: { 
     transport: { 
      read: function(options) { 
       options.success(data); 
      }, 
      create: function(options) { 
       alert(data.length); 
      }, 
      update: function(options) { 
       alert("Update"); 
      }, 
      destroy: function(options) { 
       alert("Destroy"); 
       alert(data.length); 
      } 
     }, 
     batch: true, 
     pageSize: 4, 
     schema: { 
      model: { 
       id: "ID", 
       fields: { 
        ID: { 
         editable: false, 
         nullable: true 
        }, 
        TopMenuId: { 
         editable: false, 
         nullable: true 
        }, 
        Title: { 
         editable: true, 
         validation: { 
          required: true 
         } 
        }, 
        Link: { 
         editable: true 
        } 
       } 
      }, 
      data: "", 
      total: function(result) { 
       result = result.data || result; 
       return result.length || 0; 
      } 
     } 
    }, 
    editable: true, 
    toolbar: ["create", "save", "cancel"], 
    height: 250, 
    scrollable: true, 
    sortable: true, 
    filterable: false, 
    pageable: true, 
    columns: [ 
     { 
     field: "TopMenuId", 
     title: "Menu Id"}, 
    { 
     field: "Title", 
     title: "Title"}, 
     { 
     field: "Link", 
     title: "Link"}, 
    { 
     command: "destroy"} 
    ] 
});

答

有一个在telerik documentation

的这个功能齐全的例子中，你需要的是定制的CRUD funtions其更新本地源dataSource对象定义transport块。

transport: { 
      create: function(options){ 
      var localData = JSON.parse(localStorage["grid_data"]); 
      options.data.ID = localData[localData.length-1].ID + 1; 
      localData.push(options.data); 
      localStorage["grid_data"] = JSON.stringify(localData); 
      options.success(options.data); 
      }, 
      read: function(options){ 
       var localData = JSON.parse(localStorage["grid_data"]); 
       options.success(localData); 
      }, 
      update: function(options){ 
      var localData = JSON.parse(localStorage["grid_data"]); 

      for(var i=0; i<localData.length; i++){ 
       if(localData[i].ID == options.data.ID){ 
       localData[i].Value = options.data.Value; 
       } 
      } 
      localStorage["grid_data"] = JSON.stringify(localData); 
      options.success(options.data); 
      }, 
      destroy: function(options){ 
      var localData = JSON.parse(localStorage["grid_data"]); 
      for(var i=0; i<localData.length; i++){ 
       if(localData[i].ID === options.data.ID){ 
        localData.splice(i,1); 
        break; 
       } 
      } 
      localStorage["grid_data"] = JSON.stringify(localData); 
      options.success(localData); 
      }, 
     }

是否有可能在本地数据kendo网格中具有完整的增删改查功能

相关推荐