Kendo UI之ComboBox下拉列表_转载

2023-12-04 12:58
文章标签 ui 列表 转载 combobox 下拉 kendo

本文主要是介绍Kendo UI之ComboBox下拉列表_转载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 前言
  • ComboBox下拉列表
  • ComboBox配置项
      • 🚂动画 animation
      • 🚃自动绑定数据 autoBind
      • 🚄上级关联 cascadeForm
      • 🚅数据源 dataSource
      • 🚆文本字段 dataTextField
      • 🚇值字段 dataValueField
      • 🚈延时显示时间 delay
      • 🚉是否可用 enable
      • 🚊过滤规则 filter
      • 🚝过滤规则忽略大小写 ignoreCase
      • 🚞下拉列表高度 height
      • 🚋下拉列表第一个自动高亮 highlightFirst
      • 🚌最小长度minLength
      • 🚍占位符 placeholder
      • 🚎自动填充 suggest
      • 🚐模板template
      • 🚑绑定原始值 valuePrimitive
      • 🚒默认索引值 index
      • 🚓默认文本 text
      • 🚔设置值 value
  • ComboBox其它操作
      • 数据源操作 dataSource
      • 选项集 options
      • 列表集 list
      • 列表 ul
      • 输入框 input

前言

  本文转载自http://www.scscms.com/html/article/20131029-combobox.html
  在原文基础上做了部分修改。

ComboBox下拉列表

  ComboBox下拉列表是AutoComplete自动补齐和DropDownList 下拉框的综合体，它即可以下拉选择，也可以输入后自动匹配。下面是一个代码完整的示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Kendo UI combobox</title><link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" /><link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" /><script src="./js/kendojs/jquery.min.js"></script><script src="./js/kendojs/kendo.web.min.js"></script>
</head>
<body><div class="demo-section"><h2>View Order Details</h2><p><label for="categories">Categories:</label><input id="categories" style="width: 300px" /></p><p><label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" /></p><p><label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 300px" /></p><button class="k-button" id="get">View Order</button></div><script>$(document).ready(function () {// 分类的本地数据源var categoryData = [{ CategoryName: "水果", CategoryID: 1 },{ CategoryName: "蔬菜", CategoryID: 2 },{ CategoryName: "电子产品", CategoryID: 3 }];var categoryDs = new kendo.data.DataSource({data: categoryData});// 分类下拉框初始化var categories = $("#categories").kendoComboBox({filter: "contains",placeholder: "Select category...",dataTextField: "CategoryName",dataValueField: "CategoryID",dataSource: categoryDs}).data("kendoComboBox");// 产品的本地数据源var productData = [{ ProductName: "苹果", ProductID: 1, CategoryID: 1 },{ ProductName: "香蕉", ProductID: 2, CategoryID: 1 },{ ProductName: "西红柿", ProductID: 3, CategoryID: 2 },{ ProductName: "菠菜", ProductID: 4, CategoryID: 2 },{ ProductName: "手机", ProductID: 5, CategoryID: 3 },{ ProductName: "电脑", ProductID: 6, CategoryID: 3 }];var productDs = new kendo.data.DataSource({data: productData});// 产品下拉框初始化var products = $("#products").kendoComboBox({autoBind: false,cascadeFrom: "categories",filter: "contains",placeholder: "Select product...",dataTextField: "ProductName",dataValueField: "ProductID",dataSource: productDs}).data("kendoComboBox");// 订单本地数据源var orderData = [{ ShipCity: "北京", OrderID: 1, ProductID: 1 },{ ShipCity: "上海", OrderID: 2, ProductID: 1 },{ ShipCity: "西安", OrderID: 3, ProductID: 2 },{ ShipCity: "天津", OrderID: 4, ProductID: 2 },{ ShipCity: "广州", OrderID: 5, ProductID: 3 },{ ShipCity: "新疆", OrderID: 6, ProductID: 3 },{ ShipCity: "太原", OrderID: 7, ProductID: 4 },{ ShipCity: "内蒙", OrderID: 8, ProductID: 4 },{ ShipCity: "青岛", OrderID: 9, ProductID: 5 },{ ShipCity: "广西", OrderID: 10, ProductID: 5 },{ ShipCity: "甘肃", OrderID: 11, ProductID: 6 },{ ShipCity: "四川", OrderID: 12, ProductID: 6 }];var orderDs = new kendo.data.DataSource({data: orderData});// 订单下拉框初始化var orders = $("#orders").kendoComboBox({autoBind: false,cascadeFrom: "products",filter: "contains",placeholder: "Select order...",dataTextField: "ShipCity",dataValueField: "OrderID",dataSource: orderDs}).data("kendoComboBox");$("#get").click(function () {var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";alert("Order details:\n" + categoryInfo + productInfo + orderInfo);});});</script>
</body>
</html>

  运行效果如下图所示：
combobox

ComboBox配置项


  ComboBox的配置项有：

  • 🚂动画 animation
  • 🚃自动绑定数据 autoBind
  • 🚄上级关联 cascadeForm
  • 🚅数据源 dataSource
  • 🚆文本字段 dataTextField
  • 🚇值字段 dataValueField
  • 🚈延时显示时间 delay
  • 🚉是否可用 enable
  • 🚊过滤规则 filter
  • 🚝过滤规则忽略大小写 ignoreCase
  • 🚞下拉列表高度 height
  • 🚋下拉列表第一个自动高亮 highlightFirst
  • 🚌最小长度minLength
  • 🚍占位符 placeholder
  • 🚎自动填充 suggest
  • 🚐模板template
  • 🚑绑定原始值 valuePrimitive
  • 🚒默认索引值 index
  • 🚓默认文本 Text
  • 🚔设置值 value

🚂动画 animation

<<返回目录🏡
  配置打开或者关闭下拉列表的特效。如果设值为false，打开或者关闭列表时将无动画。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({animation: {close: {effects: "fadeOut zoom:out",// 持续时间，单位毫秒duration: 300},open: {effects: "fadeIn zoom:in",duration: 300}}});  
</script>

🚃自动绑定数据 autoBind

<<返回目录🏡
  表示初始化时是否自动绑定到数据源，默认值是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({autoBind: false});  
</script>

🚄上级关联 cascadeForm

<<返回目录🏡
  指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。代码片断如下：

<input id="parent" />
<input id="child" />
<script>$("#parent").kendoComboBox({dataTextField: "parentName",dataValueField: "parentId",dataSource: [{ parentName: "Parent1", parentId: 1 },{ parentName: "Parent2", parentId: 2 }]});$("#child").kendoComboBox({cascadeFrom: "parent",//关联id=parent 的下拉框  dataTextField: "childName",dataValueField: "childId",dataSource: [{ childName: "Child1", childId: 1, parentId: 1 },{ childName: "Child2", childId: 2, parentId: 2 },{ childName: "Child3", childId: 3, parentId: 1 },{ childName: "Child4", childId: 4, parentId: 2 }]});  
</script>

🚅数据源 dataSource

<<返回目录🏡
  指定下拉列表的数据来源，可以是对象或者数据，或者是kendo的数据源。代码片断如下：

<script>//数组型数据源  $("#id").kendoComboBox({dataSource: {data: ["One", "Two"]}});//kendo的数据源  var dataSource = new kendo.data.DataSource({transport: {read: {url: "http://demos.kendoui.com/service/products",dataType: "jsonp"}}});$("#id").kendoComboBox({dataSource: dataSource,dataTextField: "ProductName",dataValueField: "ProductID"});  
</script>

🚆文本字段 dataTextField

<<返回目录🏡
  ComboBox下拉菜单类似于<select>的<option>需要text与value。

🚇值字段 dataValueField

<<返回目录🏡
  ComboBox下拉菜单类似于<select>的<option>需要text与value，是必须要指定的。dataTextField和dataValueField的代码片断如下：

<input id="combobox" />
<script>$("#comboBox").kendoComboBox({dataSource: [{ Name: "Parent1", Id: 1 },{ Name: "Parent2", Id: 2 }],dataTextField: "Name",dataValueField: "Id"});  
</script>

🚈延时显示时间 delay

<<返回目录🏡
  当按下键盘与下拉列表出现的时间间隔，单位为毫秒，默认值是200毫秒。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({delay: 500});  
</script>

🚉是否可用 enable

<<返回目录🏡
  设置输入框与下拉列表是否可用，默认是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({enable: false});  
</script>

🚊过滤规则 filter

<<返回目录🏡
  过滤规则是决定下拉列表与输入字符串的关系。默认是“startswith”表示下拉列表的开头字符与输入框的字符一致。还支持的规则有endswith（末尾匹配）和contains（包含）。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({filter: "contains"});  
</script>

🚝过滤规则忽略大小写 ignoreCase

<<返回目录🏡
  过滤搜索时是否忽略大小写，设置为false将区分大小写过滤搜索，默认是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({ignoreCase: false});  
</script>

🚞下拉列表高度 height

<<返回目录🏡
  定义下拉列表的高度，单位是像素(px)，默认是200px。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({height: 500});  
</script>

🚋下拉列表第一个自动高亮 highlightFirst

<<返回目录🏡
  定义下拉列表的第一个选项是否自动高亮（表示已经选择，回车即可选取），默认是true。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({highlightFirst: false});  
</script>

🚌最小长度minLength

<<返回目录🏡
  需要输入至少多少个字符才启用搜索生成下拉列表，默认是输入1个字符。为了匹配更精确与减少服务器请求建议不要设置太小的值。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({minLength: 3});  
</script>

🚍占位符 placeholder

<<返回目录🏡
  当输入框为空时显示的提示内容。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({placeholder: "Enter value ..."});  
</script>

🚎自动填充 suggest

<<返回目录🏡
  当生成下拉列表时，是否自动填写第一个选项内容到输入框里，默认为false。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({suggest: true});  
</script>

🚐模板template

<<返回目录🏡
  自定义下拉列表模板，比如生成带相片的名单。代码片断如下：

<!-- 方式一 -->
<input id="combobox" />
<script id="template" type="text/x-kendo-template"><span>  <img src="/img/#: id #.png" alt="#: name #" />  #: name #  </span>  
</script>
<script>$("#combobox").kendoComboBox({dataSource: [{ id: 1, name: "Apples" },{ id: 2, name: "Oranges" }],dataTextField: "name",dataValueField: "id",template: kendo.template($("#template").html())});  
</script><!-- 方式二 -->
<input id="combobox" />
<script>$("#combobox").kendoComboBox({dataSource: [{ id: 1, name: "Apples" },{ id: 2, name: "Oranges" }],dataTextField: "name",dataValueField: "id",template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'});  
</script>

🚑绑定原始值 valuePrimitive

<<返回目录🏡
  当为true时，表示使用dataValueField对应的值（它比较简单、原始，所以叫primitive），而当它为false时，表示使用一个比较复杂的值（一个即包含dataValueField，也包含dataTextField的对象）。完整代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Kendo UI combobox</title><link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" /><link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" /><script src="./js/kendojs/jquery.min.js"></script><script src="./js/kendojs/kendo.web.min.js"></script>
</head>
<body><form id="myform" action="" method="get"><input id="combobox" data-bind="value:v, source: products" name="productId" /><button type="button" id="form_btn" class="k-button" data-bind="click: btn">提交</button></form><hr />【动态展示】<br />comboBox.options.valuePrimitive = <span data-bind="text: primitive"></span><br />&emsp;&emsp;true表示使用简单的value，false表示使用复杂形式的value<br /><br />viewModel.v = <span data-bind="text: v"></span><br />每次点击提交，即可查看请求参数：<br />&emsp;&emsp;<span data-bind="text: req"></span><hr /><script>$("#combobox").kendoComboBox({// 这里的true和false要手动改valuePrimitive: false,dataTextField: "name",dataValueField: "id"});var comboBox = $("#combobox").data("kendoComboBox");console.log("comboBox =>");console.log(comboBox);var viewModel = kendo.observable({v: null,req: null,btn: function () {this.set("req", $("#myform").serialize());console.log("viewModel.v =>");console.log(viewModel.v);},primitive: comboBox.options.valuePrimitive,products: [{id: 1,name: "Coffee"},{id: 2,name: "Tea"},{id: 3,name: "Juice"}]});kendo.bind($("#combobox"), viewModel);kendo.bind($("span"), viewModel);kendo.bind($("#form_btn"), viewModel);</script>
</body>
</html>

  运行效果如下图所示：
combobox_primitive

🚒默认索引值 index

<<返回目录🏡
  初始化时自动设值的索引值，索引值是从0开始的，相当于数组下标，默认值为-1，代表没有初值。代码片断如下：

<input id="combobox" />
<script>var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];$("#combobox").kendoComboBox({dataTextField: "text",dataValueField: "value",dataSource: items,index: 1//默认选中{ text: "Item 2", value: "2" }  });  
</script>

🚓默认文本 text

<<返回目录🏡
  当自动绑定数据为false才可设置默认文本。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({autoBind: false,text: "Chai"});  
</script>

🚔设置值 value

<<返回目录🏡
  设置默认值。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({dataSource: ["Item1", "Item2"],value: "Item1"});  
</script>

ComboBox其它操作

数据源操作 dataSource

  通过它可操作数据项。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox({dataSource: [{ name: "Apples" },{ name: "Oranges" }],dataTextField: "name",dataValueField: "name"});var combobox = $("#combobox").data("kendoComboBox");combobox.dataSource.add({ name: "Appricot" });combobox.search("A");  
</script>

选项集 options

  获取选项集对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var options = combobox.options;  
</script>

列表集 list

  获取下拉列表jquery对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var list = combobox.list;  
</script>

列表 ul

  获取下拉列表父框架ul的jquery对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var ul = combobox.ul;
</script>

输入框 input

  获取下拉列框inputl的jquery对象。代码片断如下：

<input id="combobox" />
<script>$("#combobox").kendoComboBox();var combobox = $("#combobox").data("kendoComboBox");var input = combobox.input;  
</script>

这篇关于Kendo UI之ComboBox下拉列表_转载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/453529。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
c++的初始化列表与const成员

c++的初始化列表与const成员

初始化列表与const成员 const成员 使用const修饰的类、结构、联合的成员变量，在类对象创建完成前一定要初始化。 不能在构造函数中初始化const成员，因为执行构造函数时，类对象已经创建完成，只有类对象创建完成才能调用成员函数，构造函数虽然特殊但也是成员函数。 在定义const成员时进行初始化，该语法只有在C11语法标准下才支持。 初始化列表 在构造函数小括号后面，主要用于给
阅读更多...
Spring+MyBatis+jeasyui 功能树列表

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent
阅读更多...
Golang GUI入门——andlabs ui

Golang GUI入门——andlabs ui

官方不提供gui标准库，只好寻求第三方库。 https://github.com/google/gxui 这个gui库是谷歌内部人员提供的，并不是谷歌官方出品，现在停止维护，只好作罢。 第三方gui库 找了好多，也比较了好多，最终决定使用的是还是 https://github.com/andlabs/ui 相信golang gui还会发展的更好，期待更优秀的gui库 由于andlabs
阅读更多...
Exchange 服务器地址列表的配置方法与注意事项

Exchange 服务器地址列表的配置方法与注意事项

Exchange Server 是微软推出的一款企业级邮件服务器软件，广泛应用于企业内部邮件系统的搭建与管理。配置 Exchange 服务器地址列表是其中一个关键环节。本文将详细介绍 Exchange 服务器地址列表的配置方法与注意事项，帮助系统管理员顺利完成这一任务。 内容目录 1. 引言 2. 准备工作 3. 配置地址列表 3.1 创建地址列表 3.2 使用 Exchange
阅读更多...
提问的智慧(转载)

提问的智慧(转载)

此文让我受益良多。值得一读，大家如果也觉得不错就一起来推~~~ 　　--------------------------------- 　　 　　在黑客世界里，当提出一个技术问题时，你能得到怎样的回答？这取决于挖出答案的难度，同样取决于你提问的方法。本指南旨在帮助你提高发问技巧，以获取你最想要的答案。  　　 　　首先你必须明白，黑客们只偏爱艰巨的任务，或者能激发他们
阅读更多...
Struts2常用标签总结--转载

Struts2常用标签总结--转载

Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题、模板支持，极大地简化了视图页面的编写，而且，struts2的主题、模板都提供了很好的扩展性。实现了更好的代码复用。Struts2允许在页面中使用自定义组件，这完全能满足项目中页面显示复杂，多变的需求。 Struts2的标签库有一个巨大的改进之处，struts2标签库的标签不依赖于
阅读更多...
Python--列表简介

Python--列表简介

列表是什么 列表让你能够在⼀个地方存储成组的信息，其中既可以只包含几个元素，也可以包含数百万个元素。列表是新手可直接使用的最强大的Python 功能之⼀。 列表（list）是一种可变的序列类型，用于存储一系列有序的元素。这些元素可以是任何类型，包括整数、浮点数、字符串、其他列表（即嵌套列表）等。列表是动态的，可以在运行时增加或删除元素。 用方括号（[ ]）表示列表，用逗号分隔其中的元素。
阅读更多...
【转载】ACM感悟

【转载】ACM感悟

今天看了一篇我们学校前辈的ACM的感悟，觉得写的十分有道理，这里转载，文章还会不断的改进和更新。 原文链接：http://www.cnblogs.com/Chierush/p/3760870.html?ADUIN=1339764596&ADSESSION=1401536826&ADTAG=CLIENT.QQ.5329_.0&ADPUBNO=26349 声明：本文是写给弱校ACM新手的一点
阅读更多...
移动UI：分类列表页、筛选页的设计揭秘。

移动UI：分类列表页、筛选页的设计揭秘。

移动UI的列表页设计需要考虑用户体验和界面美观性，以下是一些建议的设计要点： 1. 列表项的展示： 列表页应该清晰地展示各个列表项，包括标题、副标题、缩略图等内容，以便用户快速浏览和识别。可以使用卡片式布局或者简洁的列表布局。 2. 搜索和筛选： 如果列表项较多，应该提供搜索和筛选功能，方便用户查找感兴趣的内容。搜索框和筛选条件可以放置在页面顶部或者底部，以便用户方便操作。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2