（6）kendo UI使用基础介绍与问题整理—

项目最近属于第一阶段的中后期，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