本文对比了Easyui-combobox和select组件在后台页面搭建中的应用。Easyui-combobox适合动态查询和搜索数据，其使用流程包括在页面声明input标签、设置属性，并通过控制器获取数据。而select组件在数据条件固定时更为便捷。Easyui-combobox提供多种搜索功能实现方式，但最简单的是直接通过url获取数据。
***********************************************************************************************************************************
在用html或者jsp搭建后台页面的时候，总会用到下拉框选择，当然，你可能想，用select组件不是很方便吗，使用起来也很顺手。一般的这两个组件都用于搜索选择，我们就以搜索条件为例，接下来就给大家把Easyui-combobox和select组件做一下比较:
(一)先来看一下Easyui-combobox的使用流程吧:
a.在jsp或者html页面通过input标签声明你要搜索的条件，具体以下代码:
list.html <span style="font-family: FangSong_GB2312;"> </span><img src="https://img-blog.youkuaiyun.com/20160615102015587?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="font-family: FangSong_GB2312;" alt="" />搜索条件以form形式提交，name属性为提交的字段标识，class为input标签的类型;由于产品的id和值都是一一对应的，valueField为id，testField为 产品的值，即在界面上显示的数据，这个尤其重要，如果和返回的bean类中的字段不是完全一致的话，则界面上不能获取到值;url为你在controller中设置的地址，页面在初始化的时候，会通过这个地址，寻找需要的bean数据。
b.通过中的地址，查找相应的返回数据
ProductController.java@RequestMapping("/products/searchProducts.htm")
public @ResponseBody List<ProductCeShi> searchProducts(){
return productsService.findProducts();
}
ProductsServiceImp.java @Override
public List<ProductCeShi> findProducts() {
StringBuffer hql = new StringBuffer("from <span style="font-family: FangSong_GB2312;">ProductCeShi </span>a where a.id>0 and a.online=1 ");
Map<String, Object> param = new HashMap<String, Object>();
hql.append(" order by id desc ");
List<<span style="font-family: FangSong_GB2312;">ProductCeShi</span><span style="font-family: FangSong_GB2312;">> list =productsDao.searchResult(hql.toString(), param);</span>
if (list!=null&&list.size()>0) {
return list;
} else {
return null ;
}
}
(二)下面再来聊聊select控件，
a. 同样以form表单形式在jsp中使用select组件
list.html <pre name="code" class="html"> <form id="position_search" method="post" style="padding: 5px;">
<!-- 测试类型类型：<input type="text" name="positionName" style="width: 160px;" class="easyui-validatebox"/> -->
<select id="cc" name="dept" style="width: 160px;" class="easyui-validatebox"">
<option value="">全部</option>
<option value="1">测试1</option>
<option value="2"><span style="font-family: Arial, Helvetica, sans-serif;">测试2</span><span style="font-family: Arial, Helvetica, sans-serif;"></option></span>
<option value="3"><span style="font-family: Arial, Helvetica, sans-serif;">测试3</span><span style="font-family: Arial, Helvetica, sans-serif;"></option></span>
<option value="4"><span style="font-family: Arial, Helvetica, sans-serif;">测试4</span></option>
</select>
<a id="mcphonePosition_search" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclic k="position_search()">查询</a>
</form>b. 点击搜索提交form表单
list.html //搜索
function mcphonePosition_search(){
$('#<span style="font-family: Arial, Helvetica, sans-serif;">position</span><span style="font-family: Arial, Helvetica, sans-serif;">_grid').datagrid('reload',{pageNumber:1});</span>
} $(function(){
$('#position_grid').datagrid({
rownumbers: true,
title:'ceshi列表',
animate: true,
collapsible: true,
fitColumns: true,
pagination:true,
singleSelect:true,
sortName:'id',
sortOrder:'desc',
url: '../position/search.htm',
loader: function (param, success, error){
var that = $(this);
var opts = that.datagrid('options');
if (!opts.url) {
return false;
}
var searchParam = $('#position_search').form('getData');
param.others = searchParam;
$.toPost(opts.url, param, success, error);
},
columns: [[
{field:'id',hidden:true},
{field:'name',title:'测试名称',width:15},
{field:'operate',title:'操作',width:15,formatter:format}
]],
toolbar: [
{
text:'返回',
iconCls: 'icon-back',
handler: function(){
window.history.go(-1);
}
},
{
text:'新增测试',
id:'newAdd',
iconCls: 'icon-add',
handler: function(){
position_addObj();
}
}
]
});
}); c. controller中的方法
/**
* grid数据查询
* @param req
* @return
* @throws ParseException
*/
@SuppressWarnings("unchecked")
@RequestMapping("search.htm")
public @ResponseBody GridData positionList(GridReq req) throws ParseException{
GridData gd=new GridData();
PositionReq param=new PositionReq();
param.setPageIndex(req.getPage());
param.setPageSize(req.getRows());
param.setOrderByStr(req.getSortColumn());
String name = null;
String type = null;
if(req.getOthers() != null){
if(req.getOthers().get("title")!=null&&!"".equals(req.getOthers().get("title"))){
name=req.getOthers().get("title").toString();
param.setName(name);
}
}
PageBaseRes res = positionService.search(param);
if(ResultBase.RESULT_SUCC.equals(res.getResult())){
gd.setRows((List<JSONObject>)res.getObj());
gd.setTotal(res.getTotal());
}
return gd;
}
public PageModel search(PositionReq req) {
if(req == null){
return new PageModel();
}
StringBuffer hql = new StringBuffer("from Position a where a.id>0");
Map<String, Object> param = new HashMap<String, Object>();
if(CommonUtil.notEmpty(req.getName())){
hql.append(" and a.name like:name ");
param.put("name", "%"+req.getName()+"%");// 对名称实现模糊搜索
}
hql.append(" order by id desc ");
return searchPaginatedResult(hql.toString(), param, req.getPageIndex(), req.getPageSize());
} Easyui-combobox组件使用比较灵活，多用于动态查询、搜索数据，select则在数据搜索条件固定的时候运用比较方便一些，当然在Easyui-combobox的网站 http://www.jeasyui.net/plugins/169.html 还有其他实现搜索功能的方法，个人感觉，第一种方法是最简便的。
***********************************************************************************************************************************
扫一扫
1639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
