如何在排序和筛选后重新检查剑道网格中的复选框？ [英] How can I re-check a checkbox in a kendo grid after sorting and filtering?

问题描述

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

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

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

  $（'＃grid'）。kendoGrid（{
 dataSource：{data：[{id ：3，test：'sort checkbox'unchecked upon sorting'}]}，
 sortable：true，
 columns：[
 {
 field：'< input id = masterCheckclass =checktype =checkbox/>< label for =masterCheck>< / label>'，
 template：'< input id =$ {id} type =checkbox/>'，
可过滤：false，
宽度：33，
 sortable：false //可能希望稍后将此排序。分类器。
}，
 {field：'test'，
 sortable：true} 
]}）; 
  

解决方案

基本上每次选择都会被清除，因为Grid是重绘。您可以将检查项目存储在一个数组或对象中，当Grid重新绘制时（dataBound事件），您可以将它们再次标记为已检查。

为了简化这里的事情，你的代码的更新版本。也可以使用headerTemplate选项来设置标题模板 - 不要将您的字段命名为模板，而是将其命名为

  var array = {}; 
 $（'＃grid'）。kendoGrid（{
 dataSource：{data：[{id：3，test：'sort checkbox will unchecked upon sort'}]}，
 sortable ：true，
 dataBound：function（）{
 for（f in array）{
 if（array [f]）{
 $（'＃'+ f）.attr （'checked'，'checked'）; 
} 
} 
}，
列：[
 {
 headerTemplate：'< input id = masterCheckclass =checktype =checkbox/>< label for =masterCheck>< / label>'，
 template：'< input id =$ {id} type =checkbox/>'，
可过滤：false，
宽度：33，
 sortable：false //可能希望稍后将此排序。分类器。
}，
 {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; 
} 
}）
  

将链接到小提琴

I have a checkbox for each row within a kendo grid. If the user sorts or filters the grid, the checkmarks are cleared from the checkboxes. How can I prevent the checkboxes from unchecking or re-check them after the sort or filter occurs? Please refer to the following js fiddle to observe the behavior during sorting:

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

Here's the code on the jsfiddle for reference (...needed to ask this question):

$('#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}
]});

解决方案

basically the selection is cleared each time because the Grid is redrawn. You can store the check items in an array or object and when the Grid is redrawn (dataBound event) you can mark them again as checked.

To simplify things here is an updated version of you code. Also use the headerTemplate option to set header template - do not name your field like template instead.

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 to the fiddle

这篇关于如何在排序和筛选后重新检查剑道网格中的复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！