1

2 つの列を表示する単純な (少なくともそれが目標だった) 剣道 UI グリッドを実装しています。checkbox列には単純なテンプレートがあり、のが更新されるようchange() eventにcheckboxが処理されます。私はこれを確認しました、そしてそれは動作します。modeldatasource

データ ソースは 用に構成されており、 および 用に定義batchされています。どちらも ajax 呼び出しを実行する関数を呼び出します。前に言ったように、関数は期待どおりに処理されます。ただし、 で定義されている関数はそうではありません。データソースのは、 (または)を呼び出す関数にイベントがフックされた単純なボタンでトリガーされます。transportreadupdatereadupdatetransportsync()clickdatasource.sync()grid.saveChanges()

transport: {
            read: function(options) {
                return loadStuff(options);
            },
            update: function (options) {
                return updateStuff(options);
            }
}

Kendo UI コードでデバッグすると、ModelSet のモデル属性が常に空のように見えるため、sync()同期するものがないと判断されます。ここで何が起こっているのか、誰にもわかりませんか？

更新:checkチェックボックス/ を処理するときに何か問題があるようですuncheck。どうやら私は次のようなものを使用する必要があります

$('#divGrid').on('click', '.chkbx', function() {
    var checked = $(this).is(':checked');
    var grid = $('#divGrid').data().kendoGrid;
    var dataItem = grid.dataItem($(this).closest('tr'));
    dataItem.set("Selected", checked);
});

残念ながら、set()データ項目にメソッドが定義されていないようです。デバッグ時には、 のみが含まれ、メソッドdataを持つ Model オブジェクトは含まれません。set()

更新 2: で定義されたモデルで ajax 呼び出しから返されたデータをラップしようとしましたModel.define()。モデルの _modified プロパティがtrue. ただし、ModelSet のモデル配列は空のままです。これは Kendo UI のバグですか、それとも間違った方向に進んでいますか?

4

1 に答える 1

1

bind実際に でclickイベントを行う必要はありませんcheckboxes。

JSFiddleでの使用例を投稿し、実行中の様子を確認できます。この例では、グリッドに 2 つの列を表示しています。更新はバッチです（つまり、あなたが持っているものにかなり近いです）。

留意すべき質問は次のとおりです。

編集モードでないときにチェックボックスを表示するには、次のようなテンプレートを定義する必要があります。disabledチェックボックスを他のフィールドと同じように編集したい (最初にセルを選択する)ため、チェックボックスはデフォルトで状態になっていることに気付くかもしれません。これにより、モデルが正しく更新されることも保証されます。

{
    field   : "selected",
    title   : "Selected",
    template: "<input type='checkbox' name='selected' #= selected ? 'checked' : '' # disabled/>"
}

このフィールドがブール値であることをモデルで定義します。

schema   : {
    id   : "id",
    model: {
        fields: {
            symbol  : { type: "string" },
            selected: { type: "boolean" }
        }
    }
},

transport.update次のような関数を定義します。

transport: {
    read  : function (operation) {
        // Your function for reading
    },
    update: function (operation) {
        // Display modified data in an alert
        alert("update" + JSON.stringify(operation.data.models, null, 4));
        // Invoke updating function
        // that should ends with an operation.success(the_new_data)
        // In this example just say ok
        operation.success(operation.data.models)
    }
}

EDIT :最初にモードcheckboxに入らずに状態を変更できるようにしたい場合は、次のようにする必要があります。edit

disabledテンプレートから を削除します。

{
    field     : "selected",
    title     : "Selected",
    template  : "<input type='checkbox' name='selected' #= selected ? 'checked' : '' #/>"
},

click次に、チェックボックスのイベントを次のハンドラー関数にバインドします。

$("#stocks_tbl").on("click", "input:checkbox", function(ev) {
    var dataItem = grid.dataItem($(this).closest('tr'));
    dataItem.set("selected", this.checked);
});

を含む のはどこ#stocks_tblにありますか。ここで実行されているのを見るかもしれません。iddivgrid

注on：それを作成するための3つのパラメータを使用することが重要ですlive

于 2013-01-05T15:06:21.143 に答える