? ?項目最近屬于第一階段的中后期，dropdownlist用的也算不少，首先對它的基本用法做一個整理。

（插播一段：馬未都的八字方針：自信堅強、認真寬容。馬爺認為自信首先要擁有知識，然后要有勇氣在公眾面前表達。堅強是內心的感受。認真是所有成功者必備的素質。寬容別人在很多時候很大程度是善待自己。）

? ?因為最近在整理電腦里隨手記錄的一些東西，上面的話是曾經記下來的，這里插播一下，也用來勉勵自己不斷成長！

? 一、基本使用方法介紹

? ? 官網鏈接地址 demo：https://demos.telerik.com/kendo-ui/dropdownlist/index

? ? ? ? ? ? ? ? ? ? ? ? ? ?文檔：https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist

? ? 簡單demo：供參考

//html <input type="text" id="transitionPerson">//JS $("#transitionPerson").kendoDropDownList({dataSource: [{ Id: "1", Name: "張三" }, { Id: "2", Name: "李四" }], //數據dataTextField: "Name", //顯示的下拉文本dataValueField: "Id", //value值optionLabel: "選擇用戶...",//下拉選擇提示文字filter: "contains",//搜索noDataTemplate: '沒有找到相關數據!',height: 300,autoWidth: true });

?

1、加載dataSource：

（1）local數據 dataSource: [{ Id: "1", Name: "張三" }, { Id: "2", Name: "李四" }], //數據

（2）remote數據 dataSource: {type: "odata",serverFiltering: true,transport: {read: {url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products",}}}

?

（3）創建一個data，然后賦值的方式傳值（data可以是local data，也可以是remote data）

var dataSource = new kendo.data.DataSource({transport: {read: {url: "https://demos.telerik.com/kendo-ui/service/products",dataType: "jsonp"}} });

?

2、對數據源的操作

（1）設置data

var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.setDataSource(dataSource);

?

（2）添加數據

var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.dataSource.add({Id：“4”, Name: "Appricot" });

?

3、操作

（1）選中某一項

//方法1：通過Index var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.select(0);//方法2：通過可選項的name（可根據需求修改方法） var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.select(function(dataItem) {return dataItem.name === "Apples"; });

（2）搜索XX

var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.search("A");

（3）銷毀dropdownlist

var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.destroy();

?

3、顯示

（1）可否編輯，默認enable為true

//方法1： $("#dropdownlist").kendoDropDownList({enable: false }); //方法2 var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); dropdownlist.enable(true);

（2）只讀

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");// makes dropdownlist readonly dropdownlist.readonly();

（3）展開下拉選項

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");dropdownlist.toggle();

（4）關閉下拉選項

dropdownlist.close();

?

4、取值

（1）取出text

$("#dropdownlist").data("kendoDropDownList").text();

（2）取出value

$("#dropdownlist").data("kendoDropDownList").value();

?

kendo官網文檔對dropdownlist的說明還是很全面的，上面我寫的那些官網上都是有的，此外還有很多的event等其他的方法，建議大家參考官網。

網址：https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist

?

二、實際問題整理

先上一段代碼：

$("#dropdownlist").kendoDropDownList({dataSource: {transport: {read: {type: "post",url: "/Manage",dataType: "json"}},schema: {model: {fields: {Code: { type: "string" }}}},pageSize: 80,serverPaging: true,serverFiltering: true},valueTemplate: '<span>#:data.Name#</span>',headerTemplate: '<div class="dropdown-header k-widget k-header">' +'<span>編號</span>' +'<span>名稱</span>' +'</div>',template: '<span class="k-state-default" title="#= Code #">#= Code #</span>' +'<span class="k-state-default" title="#= Name #"><p>#= Name #</p></span>',dataTextField: "Code",dataValueField: "Id",filter: "startswith",optionLabel: "選擇...",noDataTemplate: '沒有找到相關數據!',height: 200,autoWidth: true});

上面的demo是一個帶有兩列顯示數據的可選項列表。

這里使用了template參數，自定義了下拉可選項的顯示樣式，這里在實際應用的時候需要自定義css顯示樣式。

官網也有類似的demo，大家可以參考。

?

轉載于:https://www.cnblogs.com/lindaCai/p/8310643.html

總結

以上是生活随笔為你收集整理的（6）kendo UI使用基础介绍与问题整理——dropdownlist/基础问题整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。