-1

剣道グリッドを使ってみたところ、いくつか問題が見つかりました。

ボタン アクション「編集」と「削除」はクリックしても何もしませんが、「作成」コマンドをトランスポートに入れると、削除をクリックするか編集でクリックすると、グリッドは URL 作成コマンドの多数の POSTS を送信します >キャンセルします (更新ボタンも何もしません)。

私が間違っていることは何ですか？

私のコード:

<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
    <div class="toolbar">      
    <input type="number" min="0" id="item-id" maxlength="10"  />
    <input type="text" id="name" class="k-textbox" placeholder="..." />
    <button style="width: 100px" id="btn-grid-filtrar" class="k-button" >Filter</button>
</div>
</script>

<script>
    $(document).ready(function() {

        var dataSource = new kendo.data.DataSource(
        {
            schema: 
            {
                data: "data",
                total: "total",
                model: 
                {
                    id: "data",
                    fields: 
                    {
                        id: { editable: false, nullable: false },
                        nome: { type: "string", validation: { required: true} },
                        ativo: { type: "boolean" }
                    }
                }
            },                  
            transport: 
            {
                read: 
                {
                    url: "page",
                    dataType: "json",
                    type: "POST",
                    data: additionalData
                },
                update: {
                    url: "update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "delete",
                    dataType: "jsonp"
                }
                /*,
                create: {
                    url: "add",
                    dataType: "jsonp"                   
                }
                */
            },
            pageSize: 5,
            serverSorting: true,
            serverPaging: true,
        });

        var grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            sortable: true,
            pageable: {
                input: true,
                numeric: false
            },
            batch: true,
            columns: [
                { field: "id", title: "#", width: "60px" }, 
                { field: "nome", title: "Nome" }, 
                { field: "ativo", title: "Ativo", width: "60px", template: "#= ativo ? 'Sim' : 'Não' #" },
                { command: ["edit", "destroy"], title: "Ações", width: "200px" }
            ],
            editable: "inline",
            toolbar: kendo.template($("#template").html()),             
        });

        kendo.bind($(".toolbar"));

        $("#id").kendoNumericTextBox({
            format: "##########",
            placeholder: "..."
        });

        $("#btn-grid-filtrar").click(function() {
            grid.data("kendoGrid").dataSource.read();
        });
    });

    function additionalData() {
        return {
            filtro_id: $("#item-id").val(),
            filtro_nome: $("#name").val()
        };
    }

</script>
4

2 に答える 2

4

まず、サーバーが次の形式の JSON を提供していると想定しています。

{
    "total": 2,
    "data" : [
        {
            "data" : 23,
            "id"   : 1,
            "ativo": true,
            "nome" : "stock-1"
        },
        {
            "data" : 34,
            "id"   : 2,
            "ativo": false,
            "nome" : "stock-2"
        }
    ]
}

正しい？

したがって、最初に、各行の「データ」をdata呼び出されていないものに変更しdataます。は、コード構造で一般的に使用されるKendoUIdataの一種の予約語です。

with (data) {
    // Expanded code coming from a grid row data
}

これdataは、グリッド内の行を参照する変数です。したがって、このコンテキストdataでは、行自体とその行のフィールドの両方があり、JavaScript はそれを正しく解決できません。

したがって、スキーマを次のように定義できます。

schema       : {
    data : "data",
    total: "total",
    model: {
        id    : "_data",
        fields: {
            id   : { editable: false, nullable: false },
            nome : { type: "string", validation: { required: true} },
            ativo: { type: "boolean" }
        }
    }
},

注: に置き換えdataました_data。

送信されるデータは次のとおりです。

{
    "total": 2,
    "data" : [
        {
            "_data" : 23,
            "id"   : 1,
            "ativo": true,
            "nome" : "stock-1"
        },
        {
            "_data" : 34,
            "id"   : 2,
            "ativo": false,
            "nome" : "stock-2"
        }
    ]
}

この小さな変更だけで、Editボタンが機能し始めます。

于 2013-05-30T22:12:03.597 に答える