是否可以在具有本地数据的剑道网格中具有完整的CRUD功能 [英] Is it possible to have full CRUD functions in kendo grid with local data

问题描述

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

I'm currently implementing a kendo grid and i'm populating it with local data. That is; I have generated a JSON string from my action and supplying that string on the view page.

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

In the end i would like to know if it is possible to implement full CRUD functions with local data?

这是到目前为止编写的代码示例；

here's a sample of the code written so far;

 <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.但是，我需要声明数据".我尝试声明传输和数据.这似乎行不通.

I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.

推荐答案

是的，这里是 JSFiddle 希望如此将为您提供帮助.

Yes you can Here is JSFiddle Hope this will help you.

// 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"}
    ]
});

这篇关于是否可以在具有本地数据的剑道网格中具有完整的CRUD功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！