Kendo UI Web Grid、虚拟滚动和动态复选框

Posted 2023-05-07

【中文标题】Kendo UI Web Grid、虚拟滚动和动态复选框

【英文标题】：Kendo UI Web Grid, Virtual Scrolling and dynamic checkbox

【发布时间】：2013-04-30 20:12:10

【问题描述】：

我正在使用 kendo UI Web Grid 来显示一些数据。 由于我要处理大量数据，我决定使用网格虚拟滚动功能，效果很好。

现在，我需要添加一个非数据绑定列，该列将填充一个复选框，以便我可以选中/取消选中网格中的记录以进行进一步处理。

我可以通过简单地使用模板来添加复选框列：

columns: [
            
                field: "",
                width:'3%',
                title: " ",
                hidden: false,
                template: "<input type=\"checkbox\" />"
            ,

我遇到的问题是，当启用虚拟滚动时，如果我选中其中一个复选框，然后滚动网格，当我返回到已检查的记录时，它不再被选中。

如何在使用虚拟滚动的同时保持选中复选框？

谢谢

【参考方案1】：

当您传递与 pageSize 一样多的记录时，总是会重新创建行。但是，如果您确实将该复选框绑定到底层模型，则更改将被保留，并且一旦您返回同一页面，您将看到已选中的项目。

使复选框反映模型更改的一种方法如下：

grid.tbody.on('click',':checkbox',function(e)
  var row = $(this).closest('tr');
  grid.dataItem(row).set('isAdmin',$(this).is(':checked'));

)

其中 isAdmin 是复选框绑定到的字段的名称。

Here 是一个活生生的例子。