复选框状态在剑道网格的分页上消失
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");
【讨论】:
以上是关于复选框状态在剑道网格的分页上消失的主要内容,如果未能解决你的问题,请参考以下文章