天天看點
傳回

DropDownList下拉菜單Configuration配置項

DropDownList其實就是select，隻有下拉選擇。可以把現有的select或者input渲染成下拉菜單：

<input id="color" value="1" />  
<select id="size">  
    <option>S - 6 3/4"</option>  
    <option>M - 7 1/4"</option>  
    <option>L - 7 1/8"</option>  
    <option>XL - 7 5/8"</option>  
</select>  
<script>  
    $(document).ready(function() {  
        var data = [  
            { text: "Black", value: "1" },  
            { text: "Orange", value: "2" },  
            { text: "Grey", value: "3" }  
        ];  
        $("#color").kendoDropDownList({  
            dataTextField: "text",  
            dataValueField: "value",  
            dataSource: data,  
            index: 0  
        });  
        $("#size").kendoDropDownList();  
    });  
</script>  

Configuration配置項

1、動畫 animation

類型：Object

說明：配置打開或者關閉下拉清單的特效。如果設值為false，打開或者關閉清單時将無動畫。 

<input id="dropdownlist" />  
<script>  
$("#dropdownlist").kendoDropDownList({  
  animation: {  
   close: {  
     effects: "fadeOut zoom:out",  
     duration: 300  
   },  
   open: {  
     effects: "fadeIn zoom:in",  
     duration: 300  
   }  
  }  
});  

2、自動綁定資料 autoBind

類型：Boolean 

預設：true 

說明：初始化時是否自動綁定到資料源。 

<input id="dropdownlist" />  
<script>  
$("#dropdownlist").kendoDropDownList({  
    autoBind: false  
});  
</script>  

3、上級關聯 cascadeForm

類型：String 

說明：指定本下拉框的上級關聯是誰。這在制作類似省市縣關聯菜單時非常必要。 

<input id="parent" />  
<input id="child" />  
<script>  
$("#parent").kendoDropDownList({  
    dataTextField: "parentName",  
    dataValueField: "parentId",  
    dataSource: [  
        { parentName: "Parent1", parentId: 1 },  
        { parentName: "Parent2", parentId: 2 }  
    ]  
});  
  
$("#child").kendoDropDownList({  
    cascadeFrom: "parent",//關聯id=parent 的下拉框  
    dataTextField: "childName",  
    dataValueField: "childId",  
    dataSource: [  
        { childName: "Child1", childId: 1, parentId: 1 },  
        { childName: "Child2", childId: 2, parentId: 2 },  
        { childName: "Child3", childId: 3, parentId: 1 },  
        { childName: "Child4", childId: 4, parentId: 2 }  
    ]  
});  
</script>  

4、資料源 dataSource

類型：Object|Array|kendo.data.DataSource

說明：指定下拉清單的資料來源，可以是對象或者資料，或者是kendo的資料源。

<script>  
//數組型資料源  
$("#id").kendoDropDownList<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  dataSource: {  
    data: ["One", "Two"]  
  }  
});  
//kendo的資料源  
var dataSource = new kendo.data.DataSource({  
  transport: {  
    read: {  
      url: "http://demos.kendoui.com/service/products",  
      dataType: "jsonp"  
    }  
  }  
});  
$("#id").kendoDropDownList<span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  dataSource: dataSource,  
  dataTextField: "ProductName",  
  dataValueField: "ProductID"  
});  
</script>  

5、文本字段 dataTextField

類型：String

預設：""

說明：DropDownList下拉菜單的option需要text與value。必須指定。

6、值字段 dataValueField

類型：String

預設：""

說明：DropDownList下拉菜單t的option需要text與value。如果沒有指定自動擷取dataTextField。 

<input id="dropdownlist" />  
<script>  
$("#dropdownlist").kendoDropDownList({  
    dataSource: [{  
        { Name: "Parent1", Id: 1 },  
        { Name: "Parent2", Id: 2 }  
    }]  
    dataTextField: "Name",  
    dataValueField: "Id"  
});  
</script>  

7、延時顯示時間 delay

類型：Number

預設：200

說明：當使用者清除搜尋文本之後下拉清單消除的時間，機關為毫秒。 

<input id="dropdownlist" />  
<script>  
$("#dropdownlist").kendoDropDownList({  
  delay: 500  
});  
</script>  

8、是否可用 enable

類型：Boolean

預設：true

說明：設定下拉菜單是否可用。 

<input id="dropdownlist" />  
<script>  
$("#dropdownlist").kendoDropDownList({  
  enable: false  
});  
</script>  

9、過濾規則忽略大小寫 ignoreCase

類型：Boolean

預設：true

說明：過濾搜尋時是否忽略大小寫，設定為false将區分大小寫過濾搜尋。 

<input id="dropdownlist" />  
<script>  
$("#dropdownlist").kendoDropDownList({  
  ignoreCase: false  
});  
</script>  

10、下拉清單高度 height

類型：Number

預設：200

說明：定義下拉清單的高度，機關是像素(px)。

<input id="dropdownlist" />  
<script>  
$("#dropdownlist").kendoDropDownList({  
  height: 500  
});  
</script>  

11、預設索引值 index

類型：Number

預設：0

說明：初始化時自動設值的索引值，數組是從0開始的。 

<input id="dropdownlist" />  
<script>  
    var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];  
    $("#dropdownlist").kendoDropDownList({  
        dataTextField: "text",  
        dataValueField: "value",  
        dataSource: items,  
        index: 1  
    });  
</script>  

12、optionLabel

類型：String | Object

預設：""

說明：下拉菜單預設選項，預設選項資料必須與資料源格式一緻。如果要求必須含有dataValueField 和 dataTextField，預設選項值就必須是Object。 

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.     dataSource: ["Apples", "Oranges"],  
  5.     optionLabel: "Select a fruit..." //此情況可以是文本，表示值與文本一樣  
  6. });  
  7. </script>  

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.     dataSource: [  
  5.         { productName: "Product 1", productId: 1 },  
  6.         { productName: "Product 2", productId: 2 }  
  7.     ],  
  8.     dataTextField: "productName",  
  9.     dataValueField: "productId",  
  10.     optionLabel: {  
  11.         productName: "Select a product...",  
  12.         productId: ""  
  13.     }//因資料源是對象，是以預設選項也必須是對象  
  14. });  
  15. </script>  

13、忽略大小寫 ignoreCase

類型：Boolean

預設：true

說明：過濾時是否忽略大小寫，預設是忽略。 

原碼 列印 關于

  1. <input id="<span style="font-family: arial, helvetica, sans-serif, ����;">dropdownlist</span><span style="font-family: arial, helvetica, sans-serif, ����;">" /></span>  
  2. <script>  
  3.     $("#<span style="font-family: arial, helvetica, sans-serif, ����;">dropdownlist</span><span style="font-family: arial, helvetica, sans-serif, ����;">").</span><span style="font-family: arial, helvetica, sans-serif, ����;">kendoDropDownList</span><span style="font-family: arial, helvetica, sans-serif, ����;">({</span>  
  4.         ignoreCase: false  
  5.     });  
  6. </script>  

14、template

類型：String|Function

說明：自定義下拉清單模闆，比如生成帶相片的名單。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script id="template" type="text/x-kendo-template">  
  3.   <span>  
  4.     <img src="/img/#: id #.png" alt="#: name #" />  
  5.     #: name #  
  6.   </span>  
  7. </script>  
  8. <script>  
  9. $("#dropdownlist").kendoDropDownList({  
  10.   dataSource: [  
  11.     { id: 1, name: "Apples" },  
  12.     { id: 2, name: "Oranges" }  
  13.   ],  
  14.   dataTextField: "name",  
  15.   dataValueField: "id",  
  16.   template: kendo.template($("#template").html())  
  17. });  
  18. </script>  

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   dataSource: [  
  5.     { id: 1, name: "Apples" },  
  6.     { id: 2, name: "Oranges" }  
  7.   ],  
  8.   dataTextField: "name",  
  9.   dataValueField: "id",  
  10.   template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'  
  11. });  
  12. </script>  

16、綁定原始值  valuePrimitive

類型：Boolean

預設：false

說明：當為true時輸入框擷取dataValueField對應的值，為false時擷取dataTextField對應的值。(感謝：Yuliyana Kirova) 

原碼 列印 關于

  1. <input id="dropdownlist" data-bind="value: selectedProductId, source: products" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   valuePrimitive: true,  
  5.   dataTextField: "name",  
  6.   dataValueField: "id"  
  7. });  
  8. var viewModel = kendo.observable({  
  9.   selectedProductId: null,  
  10.   products: [  
  11.     { id: 1, name: "Coffee" },  
  12.     { id: 2, name: "Tea" },  
  13.     { id: 3, name: "Juice" }  
  14.   ]  
  15. });  
  16. kendo.bind($("#dropdownlist"), viewModel);  
  17. </script>  

18、預設文本 Text

類型：String

預設：""

說明：當自動綁定資料為false才可設定預設文本。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.      autoBind: false,  
  5.      text: "Chai"  
  6. });  
  7. </script>  

19、設定值 value

類型：String

預設：""

說明：設定預設值。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.      dataSource: ["Item1", "Item2"],  
  5.      value: "Item1"  
  6. });  
  7. </script>  

Fields 其他屬性

1、資料源操作 dataSource

類型：kendo.data.DataSource

說明：通過它可操作資料項。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   dataSource: [  
  5.     { name: "Apples" },  
  6.     { name: "Oranges" }  
  7.   ],  
  8.   dataTextField: "name",  
  9.   dataValueField: "name"  
  10. });  
  11. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  12. dropdownlist.dataSource.add({ name: "Appricot" });  
  13. dropdownlist.search("A");  
  14. </script>  

2、選項集 options

類型：Object

說明：擷取選項集對象。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var options = dropdownlist.options;  
  6. <script>  

3、清單集 list

類型：JQuery

說明：擷取下拉清單jquery對象。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var list = dropdownlist.list;  
  6. <script>  

4、清單 ul

類型：JQuery

說明：擷取下拉清單父架構ul的jquery對象。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var ul = dropdownlist.ul;  
  6. <script>  

5、輸入框檔案對象 span

類型：JQuery

說明：顯示被選擇文本的jquery對象。 

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList();  
  4. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  5. var span = dropdownlist.span;  
  6. span.css("background-color", "red");  
  7. <script>  

Motheds 方法

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   dataSource: [  
  5.     { id: 1, name: "Apples" },  
  6.     { id: 2, name: "Oranges" }  
  7.   ],  
  8.   dataTextField: "name",  
  9.   dataValueField: "id",  
  10.   index: 1  
  11. });  
  12. var dataSource = new kendo.data.DataSource({  
  13.   data: [ "Bananas", "Cherries" ]  
  14. });  
  15. var dropdownlist = $("#dropdownlist").data("kendoDropDownList");  
  16. dropdownlist.search("A");//搜尋"A"将彈出下拉菜單Apples  
  17. dropdownlist.close();//關閉下拉菜單  
  18. dropdownlist.open();//打開下拉菜單  
  19. dropdownlist.toggle();//自動切換打開還是關閉下拉菜單  
  20. dropdownlist.readonly(true);//設為隻讀，将不能開下拉菜單  
  21. var dataItem = dropdownlist.dataItem();//擷取已經選擇項的Item對象  
  22. var dataItem = dropdownlist.dataItem(0);//擷取指定下标的Item對象  
  23. dropdownlist.focus();//自動擷取焦點  
  24. dropdownlist.setDataSource(dataSource);//設定資料源  
  25. dropdownlist.refresh();//重新整理控件  
  26. dropdownlist.select(dropdownlist.ul.children().eq(0));//選擇下拉菜單，支援幾種形式  
  27. dropdownlist.select(1);  
  28. dropdownlist.select(function(dataItem) {  
  29.     return dataItem.text === "Apples";  
  30. });  
  31. var selectedIndex = dropdownlist.select();//擷取已經選擇的下标  
  32. dropdownlist.text("Apples");//設定下拉菜單文本，将自動選擇對應的Item  
  33. dropdownlist.value("Oranges");//設定下拉菜單的值，如果不存在此值将設定不成功  
  34. dropdownlist.destroy(); //銷毀下拉菜單  
  35. </script>  

Events 事件

原碼 列印 關于

  1. <input id="dropdownlist" />  
  2. <script>  
  3. $("#dropdownlist").kendoDropDownList({  
  4.   change: function(e) {  
  5.     var value = this.value();//打開下拉菜單時觸發  
  6.   },  
  7.   close: function(e) {  
  8.     // 關閉下拉菜單時觸發  
  9.   },  
  10.   open: function(e) {  
  11.     // 打開下拉菜單時觸發  
  12.   },  
  13.   dataBound: function(e) {  
  14.       // 綁定資料時觸發  
  15.   },  
  16.   select: function(e) {  
  17.     var item = e.item;  
  18.     var text = item.text();  
  19.     // 選擇下拉菜單時觸發  
  20.   },cascade: function() {  
  21.     // Handle the event  
  22.   }  
  23. });  
  24. </script>  

例子

  var JX_TYPE = $("#aint0");

        JX_TYPE.kendoDropDownList({

            dataTextField: "text",//json傳回的name

            dataValueField: "value",

            dataSource: data,

            value: "@Model.aint0",

            index:0,

            change: onChange,

        });

  dept.kendoDropDownList({

            cascadeFrom: "P_ORG_ID",//父id

            cascadeFromField: "PARENT_ID",//子資料中的key名稱

            dataTextField: "NAME",//json傳回的name

            dataValueField: "ID",

            value: "@Model.S_ORG_ID",

            index: 0,

            dataSource: obj_dict_dept

        });

   org_id.kendoDropDownList({

            dataTextField: "NAME",//json傳回的name

            dataValueField: "ID",

            dataSource: obj_org_id,

            change: function (e) {

                so_change(this.value(), $("#TITLE").val());

            }

        });

Kendo UI jquery
上一篇: 類别關聯下拉菜單
下一篇: MVC 給DropDownList下拉框指派

繼續閱讀