Question

不确定我是否正确这样做。但我用一个对象的数组数据绑定一个kendo网格，其中每个对象都有一个布尔属性（即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/

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 });

Answer 2

在kendo Grid中使用数据绑定事件。

不确定以下代码是否适用于您。但类似的代码对我有用

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");
        }
    }
}

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

2 个答案: