2

私は現在、剣道グリッドを実装しており、ローカル データを入力しています。あれは; アクションから 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 を実装するためにトランスポートを宣言する必要があることに気付きました。ただし、「データ」を宣言する必要があります。transport と data の両方を宣言してみました。それはうまくいかないようです。

4

3 に答える 3

7

はい、できます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"}
    ]
});
于 2012-10-22T12:25:00.320 に答える
3

ローカルデータをバインドするとき、グリッドウィジェットはローカルトランスポートを表す抽象化を利用します。したがって、カスタムトランスポートは必要ありません。グリッドで行われた変更は、バインドされたデータソースに反映されます。これには、キャンセルによるロールバックが含まれます。

于 2011-12-18T19:56:20.567 に答える