Asp.net mvc 3 使用Razor在Telerik MVC3网格中选择过滤器选项

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

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

允许使用以下各项对每列进行筛选非常简单：

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

然而，当我启用它时，似乎我没有选择向用户显示哪些选项。无论字段是什么，我都会在过滤器下拉列表中看到以下内容：

---

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

如果可能，我怀疑您需要查看telerik.grid.filtering.js javascript文件并根据自己的意愿编辑它。

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

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

---

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

我的解决方案如下：

Telerik网格代码：

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

$(".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();
    });
});

JavaScript代码：

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

$(".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();
    });
});

$（“.filteronon\u包含.t-filter”）。单击（函数（）{
setTimeout（函数（）{
//删除所有现有选项并添加“Contains”
var filterOptions1=$（“.t-filter-operator”）.first（）；
filterOptions1.empty（）；
filterOptions1.append（$（“”）.val（“substringof”）.text（“Contains”）；
//删除第二部分（选项+文本+输入）
var filterOptions2=$（“.t-filter-operator”）.last（）；
过滤器选项2.hide（）；
$（“.t-filter-help-text”）.text（“”）；
$（“输入[类型=文本]”）.last（）.hide（）；
});
});

结果看起来像：

---

Stef提供的答案是在我们的应用程序中实现的，但我注意到它不适用于多列可过滤的情况。我对JS做了一个小改动，允许使用Stef的解决方案进行多列过滤。本质上，它是相同的代码（所以所有的UPF都投票给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();
        });
    });
});

$（“.filteronon\u包含.t-filter”）。单击（函数（）{
setTimeout（函数（）{
var$animationContainers=$（“.t-animation-container”）；
$animationContainers.each（函数（）{
//删除所有现有选项并添加“Contains”
var filterOptions1=$（this.find（“.t-filter-operator”）.first（）；
filterOptions1.empty（）；
filterOptions1.append（$（“”）.val（“substringof”）.text（“Contains”）；
//删除第二部分（选项+文本+输入）
var filterOptions2=$（this.find（“.t-filter-operator”）.last（）；
过滤器选项2.hide（）；
$（“.t-filter-help-text”）.text（“”）；
$（“输入[类型=文本]”）.last（）.hide（）；
});
});
});

---

在提出这个解决方案之后，我发现了另一个问题。它不再以“t-animation-container”为目标，该容器已连接到“FilterOnlion\u Contains”过滤器。它会影响所有过滤器，因此会编辑我们不希望的元素。我不知道这种关系是如何建立的，我猜telerik js文件中有js dom引用。

我只希望我能多次投票。非常准确地找到了我发布的问题的解决方案，谢谢。这个解决方案只适用于我筛选的第一列。看起来每次单击时telerik filter html都会添加到dom中，因此第一次和最后一次都会停止以正确的为目标。