通过url来读取数据源。数据格式如下:

{"list":[

{"key":"小陈","value":"1"},

{"key":"访客","value":"2"},

{"key":"小李","value":"3"},

{"key":"小张","value":"4"},

{"key":"小王","value":"5"},

{"key":"小赵","value":"6"},

{"key":"小钱","value":"7"},

{"key":"小孙","value":"8"}

]}

Ø  数据默认的前缀是list,可以通过dataRoot属性指定。

Ø  下拉框的prompt设置下拉框的提示项显示文本,如果不设置则没有提示项

Ø  选中下拉框后,可通过其value得到所选值,另外还有三个属性与值有关:relValue等同于valuerelText代表选中项的文本,editValue代表编辑后的值(下拉框可编辑时有效)。

API说明:

参数名

默认值

说明

prompt

下拉框提示项

value

下拉框选中项的值

relValue

下拉框选中项的值

relText

下拉框选中项的文本

editValue

编辑后的值(下拉框可编辑时有效)

name

提交表单时使用

url

以路径的方式指定下拉框数据源

params

设置url时需要传递的参数,为json格式的字符串

data

json格式的字符串的方式

disabled

false

是否禁用

selWidth

120

下拉框的宽度

boxWidth

自适应

下拉列表的宽度,默认会根据选项自适应,但不会小于下拉框的宽度。

可通过设置该值来自定义下拉列表宽度

boxHeight

自适应

下拉列表高度,默认会根据浏览器可见高度和组件当前的位置来自适应,放不下自动出现滚动条。

可通过设置该值来自定义下拉列表高度

openDirection

自动判断

下拉列表展开方向,可选值:topbottom

默认智能判断上面下面哪个方向能放得下就向哪里展开。

可通过设置该值来强制下拉列表向上或向下展开

editable

false

是否可编辑

colNum

1

自定义显示列数

colWidth

100

自定义列宽,与colNum连用

childId

联动时使用,指定下一个要联动的下拉框

childDataPath

联动时使用,设置下一个要联动下拉框的数据,与当前选中项的value来拼出url路径

selectedValue

 

用于设置初始时选中值

selectedIdx

 

用于设置初始时选项索引

keepDefaultStyle

false

设为true,将会变为浏览器原始的下拉框

change事件

 

下拉框选择事件,需要使用bind方式来绑定

onchange事件

 

下拉框选择事件,直接写在标签里

ajaxInit事件

 

当下拉框数据加载完后触发,一般用在多级联动里,用来重置其他下拉框的数据

data()

 

为下拉框动态设置数据源,以json数据的格式

setValue()

参数为该项的value

选中某一项

addItem()

参数格式如:

{key: "新增项", value: "100"}

添加一项,添加到最末尾

removeItem()

参数为该项的value

移除某一项

resetValue()

 

下拉框重置值

render()

 

当动态创建下拉框或改变下拉框属性时,最后需要调用render()来更新。

参数说明

Ø  json格式的字符串跟json数据的区别在于,json数据的key可以不加引号,而json格式字符串的keyvalue都要加双引号;

Ø  同一个组件不要既设置selectedIdx又设置selectedValue

下载代码说明
X关闭

javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可)

我在很久以前曾发布过一个美化的单选下拉框组件,一度很火爆。相信现在读我帖子的人里面仍然有在用这个组件的。这次给大家介绍一款非常好用的树形下拉框组件:QUI树形下拉框。特点1:美化的并且可自定义的外观该下拉框使用JS进行渲染。下拉框样式如下:该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。QUI树形下拉框不存在IE6中无法被浮动层遮住等问题。特点2:使用简单引入脚本和相应的CS