Question

我在kendo网格中的每一行都有一个复选框。如果用户对网格进行排序或过滤，则会从复选框中清除复选标记。如何在排序或过滤发生后阻止复选框取消选中或重新检查它们？请参考以下js小提琴来观察排序过程中的行为：

以下是jsfiddle上的代码供参考（......需要提出这个问题）：

$('#grid').kendoGrid({
    dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
    sortable: true,
    columns:[
{
    field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>', 
    template: '<input id="${id}" type="checkbox" />',
    filterable: false,
    width: 33,
    sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
    {field: 'test',
     sortable: true}
]});

Answer 1

基本上每次都清除选择，因为重绘了网格。您可以将检查项存储在数组或对象中，并在重绘网格时（dataBound事件），您可以再次将它们标记为已选中。

为简化起见，这里是您的代码的更新版本。还可以使用headerTemplate选项设置标题模板 - 不要将字段命名为模板。

var array = {};
$('#grid').kendoGrid({
    dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
    sortable: true,
    dataBound:function(){
        for(f in array){
            if(array[f]){
                $('#'+f).attr('checked','checked');
            }
        }
    },
    columns:[
    {
        headerTemplate:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>', 
        template: '<input id="${id}" type="checkbox" />',
        filterable: false,
        width: 33,
        sortable: false // may want to make this sortable later. will need to build a custom sorter.
    },
        {field: 'test',
         sortable: true}
    ]});

var grid = $('#grid').data().kendoGrid;
$('#grid tbody').on('click',':checkbox',function(){   
    var id = grid.dataItem($(this).closest('tr')).id;
    if($(this).is(':checked')){        
        array[id] = true;
    }else{
        array[id] = false;
    }
})

Link小提琴

Answer 2

如果您不太关心旧浏览器，HTML5存储可能对您有用 http://www.w3schools.com/html/html5_webstorage.asp 当然，jQuery还有自己的数据存储功能。

如何在排序和过滤后重新检查kendo网格中的复选框？

2 个答案: