KendoUI目前最新提供KendoUIforjQuery、KendoUIforAngular、KendoUISupportforReact和KendoUISupportforVue四个控件。KendoUIforjQuery是创建现代Web应用程序的完整UI库。
KendoUIFilter小部件是一个统一的控件,用于筛选具有数据源的数据绑定组件。
Filter提供用于定义将在过滤下拉列表中显示哪些过滤器运算符的选项。operators字段采用带有每种字段类型可用操作符的文字,您可以列出所需的操作符及其文本。
下面的示例演示如何设置等于和包含字符串字段的过滤器运算符,以及如何将数字字段的大于和小于过滤器运算符设置为字符串字段。
divid="filter"/divulid="listView"/ul
scripttype="text/x-kendo-template"id="item"listrong#=name#/strong,aged#=age#,isonvacation:#=isOnLeave#/li/script
script$(document).ready(function(){vardataSource=newkendo.data.DataSource({data:[{name:"JaneDoe",age:"25",isOnLeave:false},{name:"JohnDoe",age:"33",isOnLeave:true},{name:"JohnSmith",age:"37",isOnLeave:true},{name:"NathanDoe",age:42,isOnLeave:false}],schema:{model:{fields:{name:{type:"string"},age:{type:"number"},isOnLeave:{type:"boolean"}}}}});
$("#filter").kendoFilter({dataSource:dataSource,
operators:{string:{eq:kendo.ui.Filter.fn.options.operators.string.eq,//TakethedefaultKendoUItext.contains:"PartiallyMatches"//Defineacustomtext.},number:{gte:"LargerThan",//Defineacustomtext.lt:kendo.ui.Filter.fn.options.operators.number.lt//TakethedefaultKendoUItext.}},
expressionPreview:true,//Showsatextpreviewofthefilterexpression.applyButton:true,//Showsthebuilt-inApplybutton.fields:[//Definingthefieldsisnotmandatory.Otherwise,theywillbetakenfromthedatasourceschema.//Ifyoudefinethefields,theirnamesandtypesmustmatchthedatasourcedefinition.{name:"name",type:"string",label:"Name"},{name:"age",type:"number",label:"Age"},{name:"isOnLeave",type:"boolean",label:"OnVacation"}],expression:{//Defininganinitialfilterexpressionisnotrequired.logic:"and",filters:[{field:"age",value:30,operator:"gte"},{field:"name",value:"Doe",operator:"contains"}]}}).data("kendoFilter").applyFilter();//Chainthemethodcalltoimmediatelyapplyfilteringafterthewidgetinitializationbecauseaninitialfilterisset.
$("#listView").kendoListView({dataSource:dataSource,template:kendo.template($("#item").html())});});/script
公司名称:北京哲想软件有限公司
北京哲想软件官方网站:cogitosoft.