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