kendo UI使用基础介绍与问题整理——dropdownlist/基础问题整理

Posted 2020-10-21 菜的代码

   项目最近属于第一阶段的中后期，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，大家可以参考。