使用easyui-combobox生成下拉框时的总结(2)
2017-05-24 09:50
295 查看
通过学习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>';
}
});
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>';
}
});
相关文章推荐
- 使用easyui-combobox生成下拉框时的总结(1)
- EasyUI使用combobox的下拉框,显示第一个option的值,而不是text的问题
- 如何使用easyUI来隐藏下拉框combobox的下拉箭头(附带效果图)?
- 使用easyUI的combobox下拉框控件实现输入提示功能(google suggest)
- Openssl使用生成CA总结
- itext5 生成pdf 使用总结
- ASP.NET MVC 使用总结(二)——扩展HtmlHelper实现动态生成title及meta
- 转载--.net使用DotNetCharting控件生成报表统计图总结
- .NET使用DotNetCharting控件生成报表统计图总结
- 使用jxl生成Excle文件的代码总结
- net使用DotNetCharting控件生成报表统计图总结
- .net使用DotNetCharting控件生成报表统计图总结 (转地址)
- 使用iText生成PDF的一些实践和总结
- Javascript验证码的生成 和 C#生成验证码 以及 iframe的使用——模仿京东网练习的总结
- 使用Asp.net动态生成控件的使用总结
- ASP.NET MVC 使用总结(二)——扩展HtmlHelper实现动态生成title及meta
- .net使用DotNetCharting控件生成报表统计图总结
- java开发技术总结-----使用poi生成excel文件
- StatSVN插件使用方法总结-项目代码分析工具 工作量图表生成工具