复选框状态在剑道网格的分页上消失

Question

不确定我是否正确执行此操作。但是我将剑道网格与对象的数组数据绑定(bind)在一起，其中每个对象都有一个 bool 属性(即真或假)。

对于用户，我将其显示为复选框，选中状态显示 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: fiddle 使用: http://jsfiddle.net/deostroll/2SGyV/3/

Answer 1

那是因为您所做的更改只保留在网格中 - 而不是在 kendoDataSource 中。 .这里MVVM没有完成。所以你必须在 dataSource 中更改适当的值每次点击checkbox .

当您在 kendoGrid 中选择另一个页面时，它从 dataSource 获取数据，然后将其显示为网格。除非直到that dataSource已更改，您无法在网格中看到所做的更改。

PS:如果有 Id 的任何字段在 dataSource我会自己更新 jsfiddle

更新

检查此 Updated 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
});