Question

我在页面上有Ajndo绑定的Kendo UI MVC网格。用户可以单击行以查看产品详细信息页面上的产品详细信息。

问题是，如果用户移动到网格页面3并转到“产品详细信息”页面，然后单击“返回”按钮网格刷新并向其显示第一个网格页面。

在第3页点击后退按钮之后是否可以停留？

Answer 1

你可以通过这种方式转到第3页：$（'＃grid'）。data（）。kendoGrid.dataSource.page（3）; 所以，你只需要在cookie中保存“当前页面”，或者保存URL（这个更好）。然后你转到第3页dater kendo-Grid dataBound :) ...我还没有测试过，但我认为它有效：）

Answer 2

实际上你必须实现网格寻呼机的更改监听器：

$('#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调用的' success '处理程序中）：

    $(window).trigger('hashchange');

Answer 3

您可以在转到详细信息页面之前保持网格状态

在详细说明之前：

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));
});

Demo

Answer 4

var selectedPage=1;    
    $('#grid').kendoGrid({

        pageSize: 10,
        page: selectedPage,
        ... 
        pageable: {         
            change: function (e){
                selectedPage = e.index;            
            }           
        },
    });

Kendo UI Grid - 如何保持选定的网格页面

4 个答案: