zoukankan      html  css  js  c++  java
  • (6)kendo UI使用基础介绍与问题整理——dropdownlist/基础问题整理

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

  • 相关阅读:
    The formatter threw an exception while trying to deserialize the message in WCF
    通过Web Deploy方式部署WCF
    The Managed Metadata Service or Connection is currently not available
    How to create Managed Metadata Column
    冒泡算法
    asp.net core 实战项目(一)——ef core的使用
    Vue学习笔记入门篇——安装及常用指令介绍
    Vue学习笔记入门篇——数据及DOM
    Vue学习笔记目录
    Chart.js在Laravel项目中的应用
  • 原文地址:https://www.cnblogs.com/lindaCai/p/8310643.html
Copyright © 2011-2022 走看看