sorting - 排序和过滤后，如何重新选中剑道网格中的复选框？

Question

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

http://jsfiddle.net/e6shF/33/

这是 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

基本上每次都会清除选择，因为重新绘制了网格。您可以将检查项目存储在数组或对象中，当重绘 Grid（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;
    }
})

链接到小提琴

Answer 2

如果您不太在意旧浏览器 HTML5 存储可能适合您 http://www.w3schools.com/html/html5_webstorage.asp 当然 jQuery 具有自己的数据存储功能。