kendo UI控件的初始化有很多种方式,不过我习惯按钮和普通文本框采用在html代码里进行初始化,其余的比如下拉框、日期控件、表格,还有 一些比 较特殊的数字文本框之类的,我就习惯在jquery代码里进行初始化。我只写出几种常用控件的初始化,更多的控件初始化方式其实大同小异了,大家可以查阅 kendo的官方文档。
kendo普通文本框的初始化:
<input id="你的文本框ID" type="text" class="k-input k-textbox"/>
当然,你也可以在里面用style属性加一些元素样式,比如宽度width之类的,全部可以使用px单位进行表示。
kendo按钮的初始化:
<input id="你的按钮ID" type="button" value="你的按钮显示文本" class="k-button k-primary" />
以上两种控件我喜欢在html里就把它们初始化好,那下面的就是采用js进行初始化操作:
kendo下拉框的初始化:
<select id="xxx"></select>
$("#xxx").kendoDropDownList();
同样,在这个选择器里,除了ID选择器,你还可以使用标签选择器、class选择器、属性选择器等等,当然,采用ID选择器是最准确的,不过在初始化的时候,推荐加上一句全局下拉框初始化的js代码,使用的是标签选择器:
$("select").kendoDropDownList();
kendo日期选择控件的初始化:
<input id="你的日期控件ID" value="" placeholder="不选择视为所有时间" />
$("#你的日期控件ID").kendoDatePicker();
这里,placeholder属性是设置这个文本框或日期框的默认提示语,也就是那个灰色字体的提示语,可以不写这个属性。
kendo数字文本框控件的初始化:
<input id="你的数字文本框的ID" type="number" value="0" min="0" max="10"/>
$("#txtTrans_Money").kendoNumericTextBox({format: "c"});
其 中,min是这个文本框可以输入的最小值,max是可以输入的最大值,js代码里的format是规定这个文本框数字的格式,比如带不带小数点,是否只 能输整数之类的,关于kendoUI的kendoNumericTextBox控件的一些详细说明,大家可以阅读下这两个网站:
kendo表格的初始化:
<div id="mytb"></div>
$("#mytb").kendoGrid();
kendo的grid表格是kendo所有控件里最麻烦也是最难操作的一个控件,里面包含着很多属性,比如分页的属性、数据源的属性,如果你想学好kendo,首先要突破的就是kendo的grid,在后面的博文里,我会慢慢地详细介绍grid的一些使用方式。