Javascript 为 Kendo UI Grid 设置默认过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14321414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set default filter for Kendo UI Grid
提问by Colin Mackay
I have a Kendo UI grid that is rendered with javaScript. I want the string columns to have a single option ("Contains") and without the second filter. So far so good, I wrote
我有一个使用 javaScript 呈现的 Kendo UI 网格。我希望字符串列有一个选项（“包含”）并且没有第二个过滤器。到目前为止一切顺利，我写了
$("#MyGrid").kendoGrid({
// other bits of configuration here
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
// more bits of configuration here
});
As part of the definition of the grid. And the result looks good-ish (I only have one option, so the drop down is redundant).
作为网格定义的一部分。结果看起来不错（我只有一个选择，所以下拉是多余的）。
However, regardless of this, the filter still performs the equals operation rather than the contains operation (which is the only one available to it).
然而，无论如何，过滤器仍然执行等于操作而不是包含操作（这是它唯一可用的操作）。
I've spent a while trying to figure this out and I keep going around in circles because the code I found either does not work, or doesn't make sense, or both.
我花了一段时间试图弄清楚这一点，但我一直在兜圈子，因为我发现的代码要么不起作用，要么没有意义，或者两者兼而有之。
Can anyone tell me how to default the filter to "Contains" and not "Is Equal To"?
谁能告诉我如何将过滤器默认为“包含”而不是“等于”？
采纳答案by Petur Subev
Try to update to latest internal build. Version later than 2012.3.1304should contain the fix.
尝试更新到最新的内部版本。2012.3.1304之后的版本应该包含修复。
回答by Matthew Erwin
When you only have a single option or you are not happy with the layout you can completely customize the filter control using the "ui : func( element ) { }" overload which is present in the later versions of Kendo (e.g. v2013.1.319)
当您只有一个选项或者您对布局不满意时，您可以使用 Kendo 更高版本（例如 v2013.1.319）中存在的“ui : func( element ) { }”重载来完全自定义过滤器控件
columns : [
{ field: "MyCity", width: 80, title : "City", filterable: customTextFilter },
{ field: "CreatedAt", width: 72, title: "Created", filterable: $scope.customDateFilter }
]
Here is the function that then customizes the look:
这是自定义外观的函数：
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\">" );
}
}
Here is an example of having two date boxes with GTE/LTE format:
这是具有两个 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>"
);
}
};
Obviously you can template out however you like and create different custom filters for Date, Boolean, etc -- note that for the Date version above if you want to set the operators correctly to say "gte" and "lte" for filter[0].operator and filter[1].operator you can just set that on the dataSource.filter attribute like so:
显然，您可以根据自己的喜好进行模板化，并为日期、布尔值等创建不同的自定义过滤器——请注意，对于上面的日期版本，如果您想正确设置运算符以对过滤器 [0] 说“gte”和“lte” .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" }]
}
回答by Salar
The best way to change the default operator for allof the instances:
更改所有实例的默认运算符的最佳方法：
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"
}
});
and the complete script:
和完整的脚本：
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"
}
/***************************************************************************/
});
回答by florian.isopp
I had the same problem and I got it, that it needs the .Clear()option!
我遇到了同样的问题，我明白了，它需要.Clear()选项！
I am building my Grid with the MVC Wrapper in Razor:
我正在使用 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
)
Summary:
概括：
- .Clear()is needed!
- Sortingis necessary! Put
.Contains()first after.Clear()then the default is Contains!
- .Clear()是需要的！
- 排序是必要的！
.Contains()先放后.Clear()然后默认是包含！
Additional Info:I am using Kendo UI 2013.1.514
附加信息：我使用的是 Kendo UI 2013.1.514
回答by Brono The Vibrator
filterable: { operators: { number: { gte: "greater than or equal to" } } }
filterable: { 运算符: { number: { gte: "大于或等于" } } }
