kendoUI之combobox下拉列表框

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对象。