当前位置: 首页 > 工具软件 > KendoUI > 使用案例 >

kendoUI之combobox下拉列表框

武彭薄
2023-12-01

kendoUI之combobox下拉列表框

一、Configuration配置项

<input id="combobox" />  
<script>  
$("#parent").kendoComboBox({
  // 动画 animation
  animation: {  
   close: {  
     effects: "fadeOut zoom:out",  
     duration: 300  
   },  
   open: {  
     effects: "fadeIn zoom:in",  
     duration: 300  
   }  
  },
  // 自动绑定数据 autoBind
  autoBind: true,
  // 展示值
  dataTextField: "name", 
  // 绑定值
  dataValueField: "value", 
  // 数据源
  dataSource: [  
      { name: "Parent1", value: 1 },  
      { name: "Parent2", value: 2 }  
  ],
  // 当按下键盘与下拉列表出现的时间间隔,单位为毫秒
  delay: 500,
  // 设置输入框与下拉列表是否可用
  enable: false,
  // 过滤规则 filter
  filter: "contains",
  // 过滤规则忽略大小写 ignoreCase
  ignoreCase: false,
  // 下拉列表高度 height
  height: 500,
  // 下拉列表第一个自动高亮 highlightFirst
  highlightFirst: false,
  // 忽略大小写 ignoreCase
  ignoreCase: false,
  // 最小长度minLength
  minLength: 3,
  // 占位符 placeholder
  placeholder: "Enter value ...",
  // 自动填充 suggest
  suggest: true,
  // 绑定原始值  valuePrimitive
  valuePrimitive: true,
  // 默认索引值 index
  index: 1,
  // 默认文本 Text
  text: "默认占位",
  // 设置值 value
  value: "value1",
    
}); 
 // 联动数据
$("#child").kendoComboBox({  
    cascadeFrom: "parent",//关联id=parent 的下拉框  
    dataTextField: "childName",  
    dataValueField: "childId",  
    dataSource: [  
        { childName: "Child1", childId: 1, parentId: 1 },  
        { childName: "Child2", childId: 2, parentId: 2 }, 
    ]  
});
</script> 
1.1 动画 animation

类型: Object

说明: 配置打开或者关闭下拉列表的特效。如果设值为false,打开或者关闭列表时将无动画。

1.2 自动绑定数据 autoBind

类型: Boolean

默认: true

说明: 初始化时是否自动绑定到数据源

1.3 上级关联 cascadeForm

类型: String

说明: 指定本下拉框的上级关联是谁。这在制作类似省市县联动菜单时非常必要。

1.4 数据源 dataSource

类型: Object|Array|kendo.data.DataSource

说明: 指定下拉列表的数据来源,可以是对象或者数据,或者是kendo的数据源。

1.5 文本字段 dataTextField

类型: String

默认:“”

说明: ComboBox下拉菜单类似select的option需要text与value。必须指定。

1.6 值字段 dataValueField

类型: String

默认:“”

说明: ComboBox下拉菜单类似select的option需要text与value。如果没有指定自动获取dataTextField。

1.7 延时显示时间 delay

类型: Number

默认: 200

说明: 当按下键盘与下拉列表出现的时间间隔,单位为毫秒。

1.8 是否可用 enable

类型: Boolean

默认: true

说明: 设置输入框与下拉列表是否可用。

1.9 过滤规则 filter

类型: String

默认: startswith

说明:过滤规则是决定下拉列表与输入字符串的关系。默认是“startswith”表示下拉列表的开头字符与输入框的字符一致。还支持的规则有endswith(末尾匹配)和contains(包含)。

1.10 过滤规则忽略大小写 ignoreCase

类型: Boolean

默认: true

说明: 过滤搜索时是否忽略大小写,设置为false将区分大小写过滤搜索。

1.11 下拉列表高度 height

类型: Number

默认: 200

说明: 定义下拉列表的高度,单位是像素(px)。

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

类型: Boolean

默认: true

说明: 定义下拉列表的第一个选项是否自动高亮(表示已经选择,回车即可选取)。

1.13 忽略大小写 ignoreCase

类型: Boolean

默认: true

说明: 过滤时是否忽略大小写,默认是忽略。

1.14 最小长度minLength

类型: Number

默认: 1

说明: 需要输入至少多少个字符才启用搜索生成下拉列表,默认是输入1个字符。为了匹配更精确与减少服务器请求建议不要设置太小的值。

1.15 占位符 placeholder

类型: String

默认:“”

说明: 当输入框为空时显示的提示内容。这本是html5的新属性。

1.16 自动填充 suggest

类型: Boolean

默认: false

说明: 当生成下拉列表时,是否自动填写第一个选项内容到输入框里。

1.17 绑定原始值 valuePrimitive

类型: Boolean

默认: false

说明: 当为true时输入框获取dataValueField对应的值,为false时获取dataTextField对应的值。(感谢:Yuliyana Kirova)

1.18 默认索引值 index

类型: Number

默认:-1

说明: 初始化时自动设值的索引值,数组是从0开始的。

1.19 默认文本 Text

类型: String

默认:“”

说明: 当自动绑定数据为false才可设置默认文本。

1.20 设置值 value

类型: String

默认:“”

说明: 设置默认值。

二、Fields 其他属性

<input id="combobox" />  
<script>  
$("#combobox").kendoComboBox({  
  // 1.dataSource数据源
  dataSource: [  
    { name: "value1" },  
    { name: "value2" }  
  ],  
  dataTextField: "name",  
  dataValueField: "name"  
});  
var combobox = $("#combobox").data("kendoComboBox");  
combobox.dataSource.add({ name: "Appricot" });  
combobox.search("A");
// 2.获取选项集对象
var options = combobox.options;
// 3.获取下拉列表jquery对象
var list = combobox.list;
// 4.获取下拉列表父框架ul的jquery对象
var ul = combobox.ul;
// 5.获取下拉列框inputl的jquery对象
var input = combobox.input;
</script>  
2.1 数据源操作 dataSource

类型: kendo.data.DataSource

说明: 通过它可操作数据项。

2.2 选项集 options

类型: Object

说明: 获取选项集对象。

2.3 列表集 list

类型: JQuery

说明: 获取下拉列表jquery对象。

2.4 列表 ul

类型: JQuery

说明: 获取下拉列表父框架ul的jquery对象。

2.5 输入框 input

类型: JQuery

说明: 获取下拉列框inputl的jquery对象。

 类似资料: