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

 

 

 

posted @ 2012-04-01 14:38  草珊瑚  阅读(10791)  评论(0编辑  收藏  举报