在上一篇文章的最后,我们使用了一个kendo的日期控件,本篇我们将更进一步地介绍kendo的组件调用
组件初始化
所有Kendo UI的的组件都会被注册成Jquery插件并且支持链式调用。例如:
<button>Foo</button> | <button>Bar</button>
<script>
$(function() {
$("button").kendoButton().css("color", "red");
});
</script>
这段代码初始化了一个按钮,并且将他的颜色设为了红色
配置
在初始化的时候,传入一个js对象可以对组件进行配置。
例如下面这个例子,在初始化grid组件的时候,指定了grid的高度、列、数据。
这些配置项目在api中可以查到,建议大家平时使用的时候多仔细阅读,很多时间中遇到的莫名其妙的问题,其实在api文档中可以都找到答案。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
height: 200,
columns:[
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}
],
dataSource: {
data: [
{
FirstName: "John",
LastName: "Doe"
},
{
FirstName: "Jane",
LastName: "Doe"
}
]
}
});
</script>
获取已初始化好的组件的引用
有时候一个组件已经初始化好了,我们想根据他们dom元素拿到对应的kendo对象,我们可以通过对jquery对象调用data(“xxxx”)拿到,”xxxx”即使组件的名称,例如
<input id="autocomplete" />
<script>
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
</script>
不要重复初始化
如果对一个dom对象多次初始化为kendo组件,会发生意想不到的错误,例如下面的代码
<input id="autocomplete" />
<script>
// 初始化了一次
$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
// 又初始化了一次
var duplicate = $("#autocomplete").kendoAutoComplete().data("kendoAutoComplete");
</script>
这段代码,在第二次的时候原本的用以是获取组件的引用,却再次初始化了一次组件,会发生不可预期的错误,大家在编码时一定要注意规避这个问题。