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

Posted

技术标签:

【中文标题】复选框状态在剑道网格的分页上消失【英文标题】:checkbox states disappear on pagination of kendo grid 【发布时间】:2013-09-06 10:27:03 【问题描述】:

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

对于用户,我将其显示为复选框,选中状态显示true 状态,反之亦然。如果您检查第 1 页中的内容;转到第 3 页;检查几行;并返回第 1 页,复选框的状态默认为加载时的状态。

这是我使用的代码 sn-p。

$(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/

【问题讨论】:

【参考方案1】:

这是因为您所做的更改仅保留在网格中 - 而不是 kendoDataSource。这里MVVM 没有完成。因此,每次单击checkbox 时,您都必须更改dataSource 中的适当值。

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

PS:如果dataSource 中有 Id 的任何字段,我会自己更新 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
);

【讨论】:

有任何声明方式吗?喜欢添加data-bind 语法?【参考方案2】:

在剑道网格中使用数据绑定事件。

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

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

【讨论】:

以上是关于复选框状态在剑道网格的分页上消失的主要内容,如果未能解决你的问题,请参考以下文章

如何将复选框列添加到剑道网格

带有剑道网格的复选框列

检查剑道网格上的复选框时出错

从剑道网格中获取检查的行

剑道 UI 网格批量编辑需要显示布尔值 true(复选框需要选中) false(复选框需要取消选中)

带有选中复选框的分页。复选框仅适用于当前分页页面。 jQuery 数据表