使用 Razor 在 Telerik MVC3 网格中选择过滤器选项答案

【问题标题】：Choosing Filter Options in a Telerik MVC3 Grid using Razor使用 Razor 在 Telerik MVC3 网格中选择过滤器选项
【发布时间】：2014-02-12 19:16:13
【问题描述】：

我正在玩 Telerik MVC3 扩展，尤其是 Grid，可以看到 here

我正在使用自定义分页并对过滤选项感兴趣。

允许使用以下内容过滤每列很容易：

.Columns(x =>
{
    x.Bound(col => col.Id).Filterable(false);

但是，当我启用它时，似乎我无法选择向用户显示哪些选项。无论是哪个领域，我都会在过滤器下拉列表中得到以下信息：

理想情况下，我只想要“包含” - 这可能吗？

【问题讨论】：

标签： asp.net-mvc-3 razor filtering telerik-grid telerik-mvc

【解决方案1】：

我的解决办法是这样的：

Telerik GRID 代码：

columns.Bound(o => o.MRUCode).HeaderHtmlAttributes(new { @class = "FilterOnlyOn_Contains" });

JavaScript 代码：

$(".FilterOnlyOn_Contains .t-filter").click(function () {
    setTimeout(function () {
        // Remove all existing options and add 'Contains'
        var filterOptions1 = $(".t-filter-operator").first();
        filterOptions1.empty();
        filterOptions1.append($("<option />").val("substringof").text("Contains"));

        // Remove second part (options + text + input)
        var filterOptions2 = $(".t-filter-operator").last();
        filterOptions2.hide();
        $(".t-filter-help-text").text("");
        $("input[type=text]").last().hide();
    });
});

结果看起来像：

【讨论】：

我只希望我能多次对此表示赞同。绝对可以解决我发布的问题，谢谢。
此解决方案仅适用于过滤的第一列。看起来 Telerik 过滤器 html 在每次点击时都会添加到 dom 中，因此 First 和 Last 停止定位正确的。

【解决方案2】：

Stef 提供的答案是在我们的应用程序中实现的答案，但我注意到它不适用于可过滤多个列的情况。我对 JS 做了一个小改动，以允许使用 Stef 的解决方案进行多列过滤。本质上，它的代码相同（所以所有人都赞成 Stef）。它只是进一步按“t-animation-container”（因为这是过滤器被渲染到的元素）进行分组，并像 Stef 的代码对页面所做的那样分别对每个元素进行操作。

$(".FilterOnlyOn_Contains .t-filter").click(function () {
    setTimeout(function () {

        var $animationContainers = $(".t-animation-container");
        $animationContainers.each(function () {
            // Remove all existing options and add 'Contains'
            var filterOptions1 = $(this).find(".t-filter-operator").first();
            filterOptions1.empty();
            filterOptions1.append($("<option />").val("substringof").text("Contains"));

            // Remove second part (options + text + input)
            var filterOptions2 = $(this).find(".t-filter-operator").last();
            filterOptions2.hide();
            $(".t-filter-help-text").text("");
            $("input[type=text]").last().hide();
        });
    });
});

在提出这个解决方案之后，我发现了另一个问题。它不再以加入“FilterOnlyOn_Contains”过滤器的“t-animation-container”为目标。它会影响所有过滤器，因此会编辑我们不想要的元素。不知道这个关系是怎么产生的，估计是telerik js文件做的js dom引用。

【讨论】：

【解决方案3】：

我不知道如何删除其他选项，但您可以通过将以下代码放入您的 grid_load 客户端事件中，将“包含”选项设置为默认项：

  $("#gridId").find(".t-filter").click(function () {
        setTimeout(function () {
            $(".t-filter-operator").each(function () {
                $(this).val("substringof");
            });
        });

我认为您可以通过在 FireBug 或 Chrome 开发者工具中跟踪上述代码来轻松删除其他项目。

【讨论】：

【解决方案4】：

如果可能的话，我怀疑您需要查看 telerik.grid.filtering.js javascript 文件并根据您的意愿对其进行编辑。

【讨论】：