具有本地存储的剑道网格自定义过滤器答案

【问题标题】：kendo grid custom filter with local storage具有本地存储的剑道网格自定义过滤器
【发布时间】：2016-01-05 09:32:23
【问题描述】：

我使用的是 Kendo UI 版本：“2015.1.318”，它设置为在消费者离线时使用本地存储。我的问题是，当我使用客户端自定义过滤器时，它总是请求服务器获取数据。如何使用网格的数据源进行过滤（现在是本地存储）。

这是我的网格：

@(Html.Kendo().Grid<InventoryModel>()
    .Name("InventoryIndexGrid")
    .HtmlAttributes(new { @class = "grid", key = "InventoryItemGrid", @style = "height:auto !important" })
    .Columns(columns =>
    {
        columns.Bound(o => o.ItemDateStr).Title("Inventory Date").HtmlAttributes(new
        { @style = "text-align: center" }).HeaderHtmlAttributes(new { @style = "text-align: center" })
    .ClientTemplate("<a onclick=\"onSelectDate('#=ItemDateStr#\','#=UserNameDisp#','#=TenantID#')\" class='' >#=ItemDateStr#</a>");
columns.Bound(p =>p.InventoryType).Title("Type").Sortable(false).Filterable(false).Width("8%").HtmlAttributes(new { @style = "text-align: center" }).HeaderHtmlAttributes(new {
@style = "text-align: center" });
    columns.Bound(p => p.UserName).Title("Created By").Sortable(false).Filterable(false).Width("82%").HtmlAttributes(new { @style = "text-align: left" }).HeaderHtmlAttributes(new { @style = "text-align: center"     });
    columns.Bound(p => p.UserNameDisp).Hidden(true);
    })
    .ToolBar(toolbar => toolbar.Custom()
    .Text("")
    .HtmlAttributes(new { @Title = "Create new Inventory", id = "btnAddNew", @class = "btn btn-default btn-crm btn-crm-action fa fa-plus-square-o", @style = "padding-top:10px;height:34px; width:40px" }))
    .AutoBind(true)
    .Reorderable(p => p.Columns(true))
    .Resizable(p => p.Columns(true))
    .Pageable(pageable => pageable.Refresh(true))
    .DataSource(dataSource => dataSource.Ajax().PageSize(1000).Model(model => model.Id(p => p.ItemID))
    .Create(update => update.Action("Save", "MealPeriod"))
    .Read(read =>
    {
        read.Action("GetIndex", "Inventory", new { type = "food" });
        read.Data("InventoryIndexGridAdditionalData");
    })).Events(c => c.DataBound("onDataBoundInventoryIndexGrid"))
    )

这就是我使用自定义过滤器的方式：

var gridInventory = $("#InventoryLocationGrid").data("kendoGrid");
var keyLocalStorage = 'offline_data_inventory_' + $('#TenantID').val() + '_'     + type + '_' + $('#ItemDate').val();
var tempDataInventory = setaJs.getLocalStorage(keyLocalStorage);
if (tempDataInventory) {
    var dataSourceInventory = tempDataInventory;
    gridInventory.dataSource.data(dataSourceInventory);

    var filter = new Array(),
        keyword = $('#Keyword').val(),
        category = $("#ChooseCategory").val();
    if (keyword) {
        filter.push({ field: "ItemName", operator: "contains", value: keyword });
    }

    gridInventory.dataSource.filter(filter);
}

请帮忙！

【问题讨论】：

您希望在用户下次访问页面时预先过滤网格？如果是这样，您可以使用filter 事件，因为您已经使用了本地存储。但是我不确定我是否正确理解了您的问题？
我想使用自定义过滤器来搜索该网格中的数据。网格数据现在从本地存储中加载。非常感谢

标签： kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

没有一个简单的答案。您将数据保存在本地存储中，但仍将旧数据源保留在网格中。这里：

.Read(read =>
    {
        read.Action("GetIndex", "Inventory", new { type = "food" });
        read.Data("InventoryIndexGridAdditionalData");
    })

您正试图从Inventory/GetIndex 获取数据，但您的 js 本地存储中已经有它，所以我认为它首先对相同数据提出了两个请求。

我建议用 JavaScript 重写您的网格并使用存储中的数据，如下所示：

var keyLocalStorage = 'offline_data_inventory_' + $('#TenantID').val() + '_'     + type + '_' + $('#ItemDate').val();
var tempDataInventory = setaJs.getLocalStorage(keyLocalStorage);

$("#InventoryIndexGrid  ").kendoGrid({
    dataSource: {
        data: tempDataInventory,
        ...
    },
   ...
});

否则，您将得到大量用于过滤和其他数据操作的难看的 JavaScript 代码，并且您将来更改/添加任何内容都会遇到问题。

这里是 JS 中本地数据网格的示例：http://demos.telerik.com/kendo-ui/grid/local-data-binding

【讨论】：