为 Kendo UI Grid 设置默认过滤器

Posted 2023-05-07

【中文标题】为 Kendo UI Grid 设置默认过滤器

【英文标题】：Set default filter for Kendo UI Grid

【发布时间】：2012-12-28 14:06:59

【问题描述】：

我有一个使用 javascript 呈现的 Kendo UI 网格。我希望字符串列有一个选项（“包含”）并且没有第二个过滤器。到目前为止一切顺利，我写了

        $("#MyGrid").kendoGrid(
            // other bits of configuration here
            filterable: 
                extra:false, 
                operators: 
                    string: contains: "Contains"
                
            ,
            // more bits of configuration here
        );

作为网格定义的一部分。结果看起来不错（我只有一个选项，所以下拉菜单是多余的）。

然而，不管怎样，过滤器仍然执行等于操作而不是包含操作（这是它唯一可用的操作）。

我花了一段时间试图弄清楚这一点，但我一直在兜圈子，因为我发现的代码要么不起作用，要么没有意义，或两者兼而有之。

谁能告诉我如何将过滤器默认为“包含”而不是“等于”？

【问题讨论】：

尝试更新到最新的内部版本，据我所知，这已修复。

@Pechka 这行得通-如果您将其作为答案，我会将其标记为已接受的答案。作为参考 v2012.3.1114（这是 11 月的版本）不起作用。该错误已由 v2012.3.1304 修复，并且根据将于 2013 年 2 月完全发布的另一项搜索。

感谢您提供的其他信息，我发布了一个对其他用户也有帮助的答案。

【参考方案1】：

当您只有一个选项或者您对布局不满意时，您可以使用更高版本的 Kendo（例如 v2013 .1.319)

columns : [
     field: "MyCity", width: 80, title : "City", filterable: customTextFilter ,
     field: "CreatedAt", width: 72, title: "Created", filterable: $scope.customDateFilter 
]

下面是自定义外观的函数：

var customTextFilter =
    
        extra : false,
        operators :  string :  contains : "Contains",
        ui : function( element )
        
            var parent = element.parent();
            while( parent.children().length > 1 )
                $(parent.children()[0]).remove( );

            parent.prepend( "<input data-bind=\"value:filters[0].value\" class=\"k-textbox\" type=\"text\">" );
        
    

以下是两个 GTE/LTE 格式的日期框示例：

var customDateFilter =
    
        extra : true,
        operators :  ,
        ui : function( element )
        
            var parent = element.parent();
            while( parent.children().length > 1 )
                $(parent.children()[0]).remove( );

            parent.prepend(
                "On or after:<br/><span class=\"k-widget k-datepicker k-header\">" +
                "<span class=\"k-picker-wrap k-state-default\">" +
                "<input data-bind=\"value:filters[0].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" +
                " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-disabled=\"false\" " +
                " aria-readonly=\"false\" aria-label=\"Choose a date\">" +
                "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" +
                "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" +

                "<br/>On or before:<br/>" +
                "<span class=\"k-widget k-datepicker k-header\"><span class=\"k-picker-wrap k-state-default\">" +
                "<input data-bind=\"value: filters[1].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" +
                " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" " +
                " aria-disabled=\"false\" aria-readonly=\"false\" aria-label=\"Choose a date\">" +
                "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" +
                "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>"
            );
        
    ;

显然，您可以根据自己的喜好进行模板化，并为日期、布尔值等创建不同的自定义过滤器——请注意，对于上面的日期版本，如果您想正确设置操作符来表示过滤器的“gte”和“lte” [0].operator 和 filter[1].operator 你可以像这样在 dataSource.filter 属性上设置它：

    dataSource: 
        transport :
        
            read : function( context )
            
                //note that here context.filter.filters has the array
                //of applied filters -- you can write a custom RESTful call
                //such as angular $http.get( ) or use Kendo native format to
                //send filter options to server.
            
        ,
        //filter settings here initialize filter[0], filter[1], etc.
        filter : [ 
            field : "CreatedAt", operator : "gte" ,
            field : "CreatedAt", operator : "lte" ]
   

【参考方案2】：

为所有实例更改默认运算符的最佳方法：

kendo.ui.FilterMenu.prototype.options.operators =           
  $.extend(kendo.ui.FilterMenu.prototype.options.operators, 
  string: 
      contains: "Contains",
      startswith: "Starts with",
      eq: "Is equal to",
      neq: "Is not equal to",
      doesnotcontain: "Does not contain",
      endswith: "Ends with"
  
);

以及完整的脚本：

kendo.ui.FilterMenu.prototype.options.operators =           
  $.extend(kendo.ui.FilterMenu.prototype.options.operators, 

/* FILTER MENU OPERATORS (for each supported data type) 
 ****************************************************************************/   
  string: 
      contains: "Contains",
      startswith: "Starts with",
      eq: "Is equal to",
      neq: "Is not equal to",
      doesnotcontain: "Does not contain",
      endswith: "Ends with"
  ,
  number: 
      eq: "Is equal to",
      neq: "Is not equal to",
      gte: "Is greater than or equal to",
      gt: "Is greater than",
      lte: "Is less than or equal to",
      lt: "Is less than"
  ,
  date: 
      eq: "Is equal to",
      neq: "Is not equal to",
      gte: "Is after or equal to",
      gt: "Is after",
      lte: "Is before or equal to",
      lt: "Is before"
  ,
  enums: 
      eq: "Is equal to",
      neq: "Is not equal to"
  
 /***************************************************************************/   
);

【讨论】：

在使用这个脚本之前一定要包含正确的 JS 脚本，f.e.如果你不包含特定于网格的 JS，上面的脚本会产生错误......

我想要两个用于日期列的过滤器文本框和一个用于字符串列的过滤器框。我怎样才能做到这一点？

【参考方案3】：

尝试更新到最新的内部版本。 2012.3.1304 之后的版本应该包含修复。

【讨论】：

@Petur Subev 下载并安装了最新版本，对我不起作用。

【参考方案4】：

我遇到了同样的问题，我明白了，它需要 .Clear() 选项！

我正在使用 Razor 中的 MVC Wrapper 构建我的网格：

@(html.Kendo().Grid<LocationViewModel>()
    .Name("locationGrid")
    // other bits of configuration here
    .ColumnMenu()
    .Filterable(f => f.Operators(o => o.ForString(s => s
        .Clear()
        .Contains("Contains")
        .DoesNotContain("Does not contain")
        .EndsWith("Ends with")
    )))
    // other bits of configuration here
)

总结：

.Clear() 是必需的！ 排序是必须的！将.Contains() 放在.Clear() 之后，然后默认为包含！

其他信息： 我正在使用剑道 UI 2013.1.514

【讨论】：

在我的情况下它工作正常，但是无论我按什么顺序放置“等于”过滤器都不存在

【参考方案5】：

filterable: operator: number: gte: "大于或等于"