剑道网格中是否可以使用本地数据拥有完整的CRUD功能

Question

我目前正在实现一个剑道网格，并用本地数据填充它。 那是;我已根据操作生成了一个 JSON 字符串，并在视图页面上提供了该字符串。

最后我想知道是否可以用本地数据实现完整的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。但是，我需要声明“数据”。我尝试声明传输和数据。这似乎不起作用。

Answer 1

是的，你可以这里是 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"}
    ]
});

Answer 2

绑定本地数据时，Grid 小部件使用表示本地传输的抽象。因此，不需要海关运输；在网格中所做的修改将反映到绑定的数据源。这包括通过取消进行回滚。

Answer 3

telerik 文档

您需要定义 transport具有自定义 CRUD 功能的 dataSource 对象中的块更新本地源。

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);
          },
        }