保留剑道网格状态

Question

我有一个网格，服务器操作标志设置为 false。我可以对网格的列（现在我只有一个）进行排序和过滤：

@(Html.Kendo().Grid<Models.ItemModel>()
            .Name("Grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(r => r.Id);
                    model.Field(r => r.Name)
                         .Editable(false).DefaultValue("");
                })
                .Read(read => read
                    .Action("Grid_Read", "Home")
                    .Type(HttpVerbs.Get)))
            .Columns(columns =>
            {
                columns.Bound(r => r.Id).Hidden();
                columns.Bound(r => r.Name);
            })
            .Sortable()
            .Filterable()
            .Scrollable(scrollable => scrollable.Virtual(true))
            .Resizable(resizable => resizable.Columns(true))
            .AutoBind(false))

我的目标是确保在重新加载页面时保留所有排序和过滤。为了实现这一点，我以 JSON 对象的形式获取网格状态，并将其存储在浏览器的 localStorage 中。为了实现这一点，我创建了两个javascript函数。一个保存状态：

function saveGridState(gridId) {
        var grid = this.data("kendoGrid"),
            dataSource = grid.dataSource,
            state = {
                columns: grid.columns,
                page: dataSource.page(),
                pageSize: dataSource.pageSize(),
                sort: dataSource.sort(),
                filter: dataSource.filter(),
                group: dataSource.group()
            },
            json = JSON.stringify(state);
        localStorage[gridId] = json;
}

第二个检索它并应用于网格：

function loadGridState(gridId) {
      var json = localStorage[gridId];
      if (!json) { return; }
      var grid = $('#'+gridId).data('kendoGrid'),
          gridState = JSON.parse(json);
      grid.dataSource.sort(gridState.sort);
      grid.dataSource.filter(gridState.filter);
      grid.dataSource.group(gridState.group);
      grid.dataSource.page(gridState.page);
      grid.dataSource.pageSize(gridState.pageSize);
 }

在 razor 视图中，我加载状态，将其应用于网格并将 dataBound 事件绑定到在排序或筛选发生更改时保存更新的声明。

<script>
 loadGridState('grid');
 $('#grid').data('kendoGrid').data('kendoGrid').dataSource.read();
 $('#grid').data('kendoGrid').dataSource.bind('dataBound',function(){
    saveGridState('grid');
});
</script>

该机制工作正常，除了行为中的一个我无法摆脱的小不良工件。 也就是说，我注意到网格的读取操作总是被调用两次。第一次加载页面时，第二次调用 loadGridState 时。

我的想法是，由于服务器操作设置为 false，应用分页、过滤和排序，不应该执行 AJAX 调用。但它仍然如此。

任何建议将不胜感激。

Answer 1

剑道演示页 （http://demos.telerik.com/kendo-ui/grid/persist-state） 有一个持久状态的示例：

localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());

同样，要加载状态：

var options = localStorage["kendo-grid-options"];
if (options) {
   grid.setOptions(JSON.parse(options));
}

这应该是您所需要的。在自定义函数的上下文中，它们类似于：

function saveGridState(gridId) {
   var grid = $('#' + gridId).data("kendoGrid");
   localStorage[gridId] = kendo.stringify(grid.getOptions());
}
function loadGridState(gridId) {
   var grid = $('#' + gridId).data("kendoGrid");
   var options = localStorage[gridId];
   if (options) {
      grid.setOptions(JSON.parse(options));
   }
}

若要在初始读取操作中执行此操作，可能需要使用 Data 方法指定调用的 JavaScript 方法，该方法可以检索存储的设置并将其作为DataSourceRequest对象传递给控制器方法。

您的Read方法如下所示

.Read(read => read
     .Action("Grid_Read", "Home")
     .Type(HttpVerbs.Get)
     .Data("getGridState")
))

getGridState将类似于：

function getGridState() {
   var grid = $('#' + gridId).data("kendoGrid");
   var options = localStorage[gridId];
   if (options) {
      return { request: JSON.parse(options)) };
   }
   return { request: "" };
}

最后，控制器方法如下所示：

public ActionResult Grid_Read([DataSourceRequest]DataSourceRequest request)
{
     ...
     DataSourceResult result = res.ToDataSourceResult(request);
     return Json(result, JsonRequestBehavior.AllowGet);
}