KendoUI的web组件——DropDownLIst用法

web开发趋势，组件化咯。

个人接触最早的web组件，就是asp.net的web控件。效果还可以，还能直接于后台绑定数据源。个性化配置，基本通过IDE的可视化菜单完成，或者微软自己封装的接口（个人感觉接口很烂）。但整个开发思想，确实超前，MVVM，微软很早就搞。

而jQueryUI和KendoUI的组件， 前端json格式配置咯，数据绑定，自然也有json。

KendoUI比jQueryUI更高级一点，体现在KendoUI有自己的模版语言，有自己的MVVM思想。这说明KendoUI在组件逻辑和组件效果可以更加自定义，或者更优雅的自定义。

KendoUI的DropDownList所需引入js文件列表如下：

DropDownList

1. jquery-1.7.1.js
2. kendo.core.js
3. kendo.data.odata.js (if binding to OData)
4. kendo.model.js (if binding to XML)
5. kendo.data.xml.js (if binding to XML)
6. kendo.data.js
7. kendo.fx.js (if animation is enabled)
8. kendo.popup.js
9. kendo.list.js
10. kendo.dropdownlist.js

 

1.基本使用：

先创建个input框

< input  id ="dropDownList"   />

有id就好办，直接写js咯，各项配置不解释

$(document).ready( function() {
    $("#dropDownList").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Item1", value: "1" },
            { text: "Item2", value: "2" }
        ]
    });
});

 

2.已经是的select元素，直接上

< select  id ="dropDownList" >
     < option >Item 1 </ option >
     < option >Item 2 </ option >
     < option >Item 3 </ option >
</ select >

< script >
   $(document).ready( function (){
      $( " #dropDownList " ).kendoDropDownList();
   });
</ script >

 

3.绑定远程数据源，是微软的Odata格式

$(document).ready( function() {
    $("#titles").kendoDropDownList({
        index: 0,
        dataTextField: "Name",
        dataValueField: "Id",
        filter: "contains",
        dataSource: {
            type: "odata",
            serverFiltering:  true,
            serverPaging:  true,
            pageSize: 20,
            transport: {
                read: "http://odata.netflix.com/Catalog/Titles"
            }
        }
    });
});

 

4.自定义下拉列表的选项显示，用了它的模板语言哦，MVVM的体现哦

<!-- HTML -->
<input id="titles" />

<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
    #  if (data.BoxArt.SmallUrl) { #
        <img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
    # }  else { #
        <img alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
    # } #
</script>

<!-- DropDownList initialization -->
<script type="text/javascript">
    $(document).ready( function() {
        $("#titles").kendoDropDownList({
            autoBind:  false,
            dataTextField: "Name",
            dataValueField: "Id",
            template: $("#scriptTemplate").html(),
            dataSource: {
                type: "odata",
                serverFiltering:  true,
                serverPaging:  true,
                pageSize: 20,
                transport: {
                    read: "http://odata.netflix.com/Catalog/Titles"
                }
            }
        });
    });
</script>

5.获取已存在的下拉列表项

var dropDownList = $("#dropDownList").data("kendoDropDownList");

 

该组件的配置选项：

动画Animation，自动绑定autoBind，数据源dataSource(有xml，json，微软的odata)，列表项的索引dataTextField，列表的值dataValueField，延迟delay，列表是否可用enable，高度height，默认选中项index，列表初始化的文字optionLabel，列表项的显示模板template

 

该组件公开的方法：

关闭列表close()， 获取选中的列表项内容dataItem()，禁用组件enable()，打开列表open(),刷新组件refresh()，列表项搜索search(word)，通过列表项的值获取列表项的索引select()，获取或设置列表项的文本text()，获取或设置列表项的值value()，打开关闭列表toggle()

 

该组件公开的事件：

选择列表项时change，关闭列表时close，打开列表时open，选择了某个列表时open

 

最完善的就是其官网，对该组件的解释了：

http://demos.kendoui.com/web/dropdownlist/index.html