javascript - 是否可以在具有本地数据的剑道网格中拥有完整的 CRUD 功能

Question

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

最后我想知道是否可以用本地数据实现完整的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"}
    ]
});