Question

我正在使用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);
}

请帮忙！

Answer 1

没有一件简单的衣服。您将数据存储在本地存储中，但仍然在网格中保留旧的dataSource。这里：

.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

kendo网格自定义过滤器与本地存储

1 个答案: