2

これを正しく行っているかどうかはわかりません。しかし、剣道グリッドをオブジェクトの配列データにバインドします。各オブジェクトにはブール型のプロパティ (つまり、true または false) があります。

ユーザーには、状態を示すチェック状態のチェックボックスとして表示し、trueその逆も同様です。ページ 1 で何かを確認すると、次のようになります。3 ページに移動します。いくつかの行を確認してください。1ページ目に戻ると、チェックボックスのデフォルトの状態は、ロードされたときの状態になります。

これが私が使用したコードスニペットです。

$(function () {
    var ds = new kendo.data.DataSource({
        transport: {
            read: {
                url: '/echo/json/',
                type: 'POST',
                data: {
                    json: JSON.stringify(students)                    
                }
            }
        },
        pageSize: 5
    });

    var kgrid = $("#grid").kendoGrid({
        columns: [

        {
            field: 'name',
            title: 'Name'
        }, {
            field: 'age',
            title: 'Age'
        }, {
            field: 'place',
            title: 'Place'
        }, {
            field: 'hasCar',
            title: 'Owns Car',
            template: function (data) {
                return '<input type="checkbox" ' + (data.hasCar ? 'checked' : '') + '/>';
            }
        }],
        height: 240,
        pageable: true
    });

    $('#btnload').click(function () {
        var grid = kgrid.data('kendoGrid');
        grid.setDataSource(ds);
        $('#grid-display').show();
    });

    $('#btnrefresh').click(function(){
       ds.read(); 
       console.log('refresh'); 
    });

    $('#btnlist').click(function(){
        var res = $('#result');
        kgrid.find('tr td:last input:checked').each(function(i, e){
           var name = $(e).closest('tr').children().first().text();
           res.append('<p>' + name + '</p>'); 
           console.log('execute');           
        });
    });
});

ページネーションの状態を保持するには?

Ps: 使用するフィドル: http://jsfiddle.net/deostroll/2SGyV/3/

4

2 に答える 2

3

これは、実行中の変更がグリッド内のみにとどまり、 内にとどまらないためkendoDataSourceです。ここMVVMでは行われていません。dataSourceそのため、 をクリックするたびに適切な値を変更する必要がありますcheckbox。

で別のページを選択するとkendoGrid、 からデータが取得dataSourceされ、グリッドに表示されます。and untillthat dataSourceが変更されない限り、グリッドで行われた変更を確認できません。

PS：フィールドがあれば、Id自分でjsfiddleをdataSource更新したでしょう

アップデート

この更新されたjsfiddleを確認してください

チェックボックスのテンプレートを更新しました

template: function (data) {
    return '<input type="checkbox" ' + (data.hasCar ? 'checked' : '') + ' data-name="'+ data.name + '"' +'/>';
}

チェックボックスにnameはデータが含まれます。で変更できますid。変更イベントでは、dataSourceチェックボックスのクリックごとに適宜更新します。

$('#grid-display input').live('change', function(){
    alert($(this).attr('data-name'));
    //update the data source here based on the data-name attribute u're getting
});
于 2013-09-03T09:38:01.170 に答える
0

剣道グリッドでデータバインドされたイベントを使用します。

以下のコードが機能するかどうかはわかりません。しかし、同様のコードが私のために働いた

function OnDataBoundEventMethod(e) {
    var view = this.dataSource.view();
    for (var i = 0; i < view.length; i++) {
        if ([view[i].hasCar]) {
            this.tbody.find("tr[data-uid='" + view[i].uid + "']")
                .addClass("k-state-selected")
                .find(".row-check-box")
                .attr("checked", "checked");
        }
    }
}
于 2016-06-21T05:07:36.400 に答える