javascript - 使用网格外部的控件通过远程数据绑定(bind)在 MVC 中过滤 Kendo UI 网格

Question

我正在从事一个项目，其中客户希望能够在用户可以开始输入的页面上有一个“控件”，并且数据网格将随着每次击键进行过滤。

过滤器应使用以运算符开头的运算符，删除输入(“控制”)内的所有字符会将网格重置为其原始未过滤状态。

我的 Controller ，我不想修改它或添加额外的参数:

public JsonResult GetFoo([DataSourceRequest]DataSourceRequest request, bool active = true)
{
    List<Foo> model = FooContext.Foo.GetFoo(active);
    model = model.OrderBy(m => m.Name).ToList();
    return Json(model.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}

这是我现在的 Gird:

@(Html.Kendo().Grid<foo>()
    .Name("fooTable")
    .PrefixUrlParameters(Settings.Grid.PrefixUrlParameters)
    .Columns(columns =>
    {
        columns
            .Bound("fooName")
            .ClientTemplate("<a href='#= Id #'>#= fooName #</a>");
        columns
            .Bound("StateName")
            .Title("State").Width(120);
        columns.Bound("PreviousYearsHomes")
            .Title("Previous Years Homes")
            .Width(120); 
        columns.Bound("CurrentYearsHomes")
            .Title("Current Years Homes")
            .Width(120);
    .Sortable()
    .Resizable(q => q.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("GetBuilders", "Builders", new { Area = "Administrator", active = true }))
    )
)

过滤器应过滤“fooName”列。

Answer 1

例如，我建议指定数据源上可用的 .Data(string handler) 方法

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("GetBuilders", "Builders", new { Area = "Administrator", active = true })
        .Data("getDataParams")
    )
)

这允许您指定一个 javascript 函数，该函数返回一个 JSON 对象，定义附加参数以附加到 ajax 请求。

你可以这样使用:

var getDataParams = function (e) {
    var result = {
        name: $('#fooNameInput').val()
    }
    return result;
};

并触发网格的刷新(从按键事件或类似事件):

$("#fooTable").data("kendoGrid").dataSource.read();

一些帮助文档:

Kendo Forums working example

MVC Fluent docs