码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-01-20 12:36:33      阅读:638      评论:0      收藏:0      [点我收藏+]

标签:head   target   选项   index   样式   turn   公众   列表   text   

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

 

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

标签:head   target   选项   index   样式   turn   公众   列表   text   

原文地址:https://www.cnblogs.com/lindaCai/p/8310643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!