Easyui-combobox使用
***********************************************************************************************************************************
在用html或者jsp搭建后台页面的时候，总会用到下拉框选择，当然，你可能想，用select组件不是很方便吗，使用起来也很顺手。一般的这两个组件都用于搜索选择，我们就以搜索条件为例，接下来就给大家把Easyui-combobox和select组件做一下比较:
(一)先来看一下Easyui-combobox的使用流程吧:
a.在jsp或者html页面通过input标签声明你要搜索的条件，具体以下代码:
list.html 
搜索条件以form形式提交，name属性为提交的字段标识，class为input标签的类型;由于产品的id和值都是一一对应的，valueField为id，testField为 产品的值，即在界面上显示的数据，这个尤其重要，如果和返回的bean类中的字段不是完全一致的话，则界面上不能获取到值;url为你在controller中设置的地址，页面在初始化的时候，会通过这个地址，寻找需要的bean数据。
b.通过中的地址，查找相应的返回数据
ProductController.java@RequestMapping("/products/searchProducts.htm")
public @ResponseBody List searchProducts(){
return productsService.findProducts();
}
ProductsServiceImp.java @Override
public List findProducts() {
StringBuffer hql = new StringBuffer("from ProductCeShi a where a.id>0 and a.online=1 ");
Map param = new HashMap();
hql.append(" order by id desc ");
List<ProductCeShi> list =productsDao.searchResult(hql.toString(), param);
if (list!=null&&list.size()>0) {
return list;
} else {
return null ;
}
} 
(二)下面再来聊聊select控件，
a. 同样以form表单形式在jsp中使用select组件
list.html
b. 点击搜索提交form表单
list.html //搜索
function mcphonePosition_search(){
$('#position_grid').datagrid('reload',{pageNumber:1});
} $(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)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 param = new HashMap();
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 还有其他实现搜索功能的方法，个人感觉，第一种方法是最简便的。
***********************************************************************************************************************************