使用easyui-combobox生成下拉框时的总结(2)
来源:互联网 发布:三网合一网络箱 编辑:程序博客网 时间:2024/06/16 18:02
通过学习easyui-combobox插件,我目前发现easyui-combobox和<select>有三点不一样:
1、<select>标签默认会把第一个<option>的文本内容作为默认值,如果要把其他的<option>值设为默认值,可以通过添加selected属性来实现,而easyui-combobox没有默认值;
2、<select>标签只能进行下拉选择操作,而easyui-combobx由于可以用<input>标签来模拟下拉框,所以自带模糊查询功能。当然,<select>也可以通过插件来增添用于模糊查询的输入框,比如基于BootStrap的select-picker插件;
3、<select>的分组是通过添加<optgroup label="groupName">来实现,在<optgroup>标签中插入本组的<option>,easyui-combobox的分组是通过groupField属性来指定用于分组的字段,这有点类似于单选按钮的name属性,值相同的被视为一组:
<lable><input type="radio" name="gender" value="M" />男</label><label><input type="radio" name="gender" value="F" />女</label>
那么,如何给easyui的下拉框设置默认值呢,我认为最简单的方法是在json文件中添加selected属性:
[{"id" : 1,"text" : "content1","selected" : true},{"id" : 2,"text" : "content2"},{"id" : 3,"text" : "content3"},{"id" : 4,"text" : "content4"},{"id" : 5,"text" : "content5"}]
easyui-combobox支持的模糊查询有两种方式:一、(默认)从本地加载列表数据;二、从服务器加载列表数据,参见帮助文档中easyui-combobox下的mode属性,默认值是“local”,当把mode值设为“remote”时,用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器,以获取新的数据。
如果要给列表数据分组,则需添加用于分组的字段:
[ {"id" : 1,"text" : "content1","selected" : true,"group":"group1"}, {"id" : 2,"text" : "content2","group":"group1"}, {"id" : 3,"text" : "content3","group":"group2"}, {"id" : 4,"text" : "content4","group":"group2"}, {"id" : 5,"text" : "content5","group":"group3"}, {"id" : 6,"text" : "content6","group":"group3"}]
然后在JS代码中定义groupField属性:
$('#test').combobox({url : 'test.json',method : 'get',valueField : 'id',textField : 'text',groupField : 'group'});
还可以对分组字段进行格式化,比如改变字体颜色为红色:
$('#test').combobox({url : 'test.json',method : 'get',valueField : 'id',textField : 'content',groupField : 'group',groupFormatter : function(group){return '<span style="color:red;">' + group + '</span>';}});
阅读全文
0 0
- 使用easyui-combobox生成下拉框时的总结(2)
- 使用easyui-combobox生成下拉框时的总结(1)
- 使用easyui-combobox生成下拉框时的总结(3)
- 如何使用easyUI来隐藏下拉框combobox的下拉箭头(附带效果图)?
- 使用easyUI的combobox下拉框控件实现输入提示功能(google suggest)
- EasyUi的ComboBox(下拉列表框)
- EasyUI ComboBox(下拉列表框)
- easyUI下拉框控件easyui-combobox使用后台json文件填充数据失败的问题
- easyui的下拉复选combobox
- 下拉框 ComboBox 的使用
- 下拉框 ComboBox 的使用
- easyui easyui-combobox select下拉框问题
- jQuery EasyUI详解-EasyUI下拉框combobox
- EasyUI使用心得:combobox下拉框自适应高度
- EasyUI使用combobox的下拉框,显示第一个option的值,而不是text的问题
- EasyUI combobox 的使用
- EasyUI的combobox使用
- easyui的combobox,自动搜索的下拉框
- 000033:比较一下这两个变量的区别添加注释
- spring配置多数据源踩过的坑
- 背景图片全屏拉伸显示
- 27.七-封装测试类setUp和tearDown
- 图像清晰度的评价指标
- 使用easyui-combobox生成下拉框时的总结(2)
- 数据仓库和OLAP技术回顾综述
- 无限“递归”的python程序
- android:ViewPager的无限多页数的设置
- spring aop的五种通知类型
- 【代码笔记】iOS-MBProgressHUD
- js取不到input的值
- IPV6网络管理
- win32(1)--基础