我在带有 Ajax 绑定的页面上有 Kendo UI MVC 网格。用户可以单击行查看产品详细信息页面上的产品详细信息。
问题是,如果用户移动到网格页面 3 并转到产品详细信息页面,然后单击返回按钮网格刷新并向他们显示第一个网格页面。
是否有可能在单击后退按钮后网格停留在第 3 页上?
我在带有 Ajax 绑定的页面上有 Kendo UI MVC 网格。用户可以单击行查看产品详细信息页面上的产品详细信息。
问题是,如果用户移动到网格页面 3 并转到产品详细信息页面,然后单击返回按钮网格刷新并向他们显示第一个网格页面。
是否有可能在单击后退按钮后网格停留在第 3 页上?
实际上,您必须实现网格寻呼机的更改侦听器:
$('#grid').kendoGrid({
...
pageable: {
change: function (e){
location.hash = e.index; // or set the cookie
}
},
});
然后监听位置(或cookie)的变化。位置示例:
$(window).on('hashchange', function() {
var gridPager = $('#grid').data("kendoGrid").pager;
var gridPage = gridPager.page(), currentPage = getPageFromBrowserWithSomeDefault();
// Update only if necessary since kendo does not do extra comparison
// UPD: if server returns no results gridPage would be 0 instead of 1
if (gridPage > 0 && gridPage != currentPage) {
gridPager.page(currentPage);
}
});
棘手的是使直接导航成为可能。由于一开始数据源对项目的数量一无所知,因此它不允许请求除第一个以外的页面。所以一定要请求它:
$('#grid').kendoGrid({
...
autoBind: true,
});
一旦获得并处理了响应,您就可以触发“ hashchange ”处理程序来更新网格(例如在您的 ajax 调用的“成功”处理程序中):
$(window).trigger('hashchange');
您可以在转到详细信息页面之前保留网格状态
在详细介绍之前:
var grid = $("#grid").data("kendoGrid");
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
文件加载时:
$(document).ready(function() {
var grid = $("#grid").data("kendoGrid");
var options = localStorage["kendo-grid-options"];
if (options)
grid.setOptions(JSON.parse(options));
});
您可以通过这种方式移至第 3 页: $('#grid').data().kendoGrid.dataSource.page(3); 因此,您只需将“当前页面”保存在 cookie 或 URL 中(这个更好)。然后你转到第 3 页 dater kendo-Grid dataBound :) ...我还没有测试过,但我认为它有效 :)
var selectedPage=1;
$('#grid').kendoGrid({
pageSize: 10,
page: selectedPage,
...
pageable: {
change: function (e){
selectedPage = e.index;
}
},
});