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

在剃刀视图中，我加载状态，将其应用于网格并绑定dataBound事件，以便在排序或过滤发生更改时保存更新的声明。

<script>

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

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

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

任何建议都将不胜感激。

Answer 1

Kendo演示页面（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方法，该方法可以检索存储的设置并将其作为{传递给控制器方法{1}}对象。

您的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: "" };
}

保持Kendo Grid状态

1 个答案: