查询框效果如下
1.前端代码(有其他的业务代码,请自行略过....):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>管理分区</title> <!-- 导入jquery核心类库 --> <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script> <!-- 导入easyui类库 --> <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css"> <link rel="stylesheet" type="text/css" href="../../css/default.css"> <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script> <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script> <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript" src="../../js/jquery-custom.js"></script> <script type="text/javascript"> function doSearch(){ $('#searchWindow').window("open"); } //工具栏 var toolbar = [ { id : 'button-search', text : '查询', iconCls : 'icon-search', handler : doSearch }, { id : 'button-add', text : '增加', iconCls : 'icon-add', handler : doAdd }, { id : 'button-edit', text : '修改', iconCls : 'icon-edit', handler : doEdit },{ id : 'button-delete', text : '删除', iconCls : 'icon-cancel', handler : doDelete },{ id : 'button-import', text : '导入', iconCls : 'icon-redo', handler : doImport },{ id : 'button-export', text : '导出', iconCls : 'icon-undo', handler : doExport }]; // 定义列 var columns = [ [ { field : 'id', checkbox : true, }, { field : 'showid', title : '分区编号', width : 120, align : 'center' , formatter : function(data,row ,index){ return row.id; } },{ field : 'area.province', title : '省', width : 120, align : 'center', formatter : function(data,row ,index){ if(row.area != null ){ return row.area.province; } return "" ; } }, { field : 'area.city', title : '市', width : 120, align : 'center', formatter : function(data,row ,index){ if(row.area != null ){ return row.area.city; } return "" ; } }, { field : 'area.district', title : '区', width : 120, align : 'center' , formatter : function(data,row ,index){ if(row.area != null ){ return row.area.district; } return "" ; } }, { field : 'keyWords', title : '关键字', width : 120, align : 'center' }, { field : 'startNum', title : '起始号', width : 100, align : 'center' }, { field : 'endNum', title : '终止号', width : 100, align : 'center' } , { field : 'single', title : '单双号', width : 100, align : 'center', formatter: function(value,row,index){ if (row.single == '0'){ return "单双号"; } else if(row.single == '1'){ return "单号"; } else { return "双号"; } } } , { field : 'assistKeyWords', title : '辅助关键字', width : 100, align : 'center' } ] ]; $(function(){ // 分区管理数据表格 $('#grid').datagrid( { iconCls : 'icon-forward', fit : true, border : true, rownumbers : true, striped : true, pageList: [30,50,100], pagination : true, toolbar : toolbar, url:"../../subarea_listPage.action", idField : 'id', columns : columns, onDblClickRow : doDblClickRow }); // 查询分区 $('#searchWindow').window({ title: '查询分区', width: 400, modal: true, shadow: true, closed: true, height: 400, resizable:false }); $("#searchBtn").click(function(){ //将表单序列化为json对象 var paramJson = $("#searchForm").serializeJson(); $("#grid").datagrid("load",paramJson); //关闭查询窗口 $("#searchWindow").window("close"); }); $('#areaType').combobox({ formatter:function(row){ row.district = row.province+row.city+row.district; return row.district; } }) ; }); function doDblClickRow(){ alert("双击表格数据..."); } </script> </head> <body class="easyui-layout" style="visibility:hidden;"> <div region="center" border="false"> <table id="grid"></table> </div> <!-- 查询分区 --> <div class="easyui-window" title="查询分区窗口" id="searchWindow" modal="true" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px"> <div style="overflow:auto;padding:5px;" border="false"> <form id="searchForm"> <table class="table-edit" width="80%" align="center"> <tr class="title"> <td colspan="2">查询条件</td> </tr> <tr> <td>省</td> <td> <input type="text" name="area.province" /> </td> </tr> <tr> <td>市</td> <td> <input type="text" name="area.city"/> </td> </tr> <tr> <td>区(县)</td> <td> <input type="text" name="area.district" /> </td> </tr> <tr> <td>定区编码</td> <td> <input type="text" name="fixedArea.id" /> </td> </tr> <tr> <td>关键字</td> <td> <input type="text" name="keyWords" /> </td> </tr> <tr> <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td> </tr> </table> </form> </div> </div> </body> </html>
主要步骤是:(1)给查询按钮添加点击事件;(2).将表单序列化成json对象,指定组合条件分页查询action的url;
将表单序列化成json对象代码:
//将表单序列化为json对象 $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var str=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; };
2.后台代码
action
@Controller @Scope("prototype") public class SubAreaAction extends BaseAction<SubArea> { // 注入service @Autowired private SubAreaService subAreaService; /** * 组合条件+分页查询的方法 */ @Action("subarea_listPage") public String listPage() { //创建分页对象 Pageable pageable = new PageRequest(page - 1, rows); Specification<SubArea> spec = new Specification<SubArea>() { @Override public Predicate toPredicate(Root<SubArea> root, CriteriaQuery<?> query, CriteriaBuilder cb) { List<Predicate> andPredicate = new ArrayList<Predicate> (); List<Predicate> orPredicate = new ArrayList<Predicate> (); //先判断区域是否存在 if(model.getArea() != null ) { Join<Object, Object> areaJoin = root.join("area"); //判断省是否为空 if (StringUtils.isNotBlank(model.getArea().getProvince())) { Predicate p = cb.like(areaJoin.get("province").as(String.class),"%"+model.getArea().getProvince()+"%" ); andPredicate.add(p); } if(StringUtils.isNotBlank(model.getArea().getCity())) { Predicate p = cb.like(areaJoin.get("city").as(String.class), "%"+model.getArea().getCity()+"%"); andPredicate.add(p); } if( StringUtils.isNotBlank(model.getArea().getDistrict())) { Predicate p = cb.like(areaJoin.get("district").as(String.class), "%"+model.getArea()+"%"); andPredicate.add(p); } } if(model.getFixedArea() != null ) { Join<Object, Object> fixedAreaJoin = root.join("fixedArea"); if(StringUtils.isNotBlank(model.getFixedArea().getId())) { Predicate p = cb.like(fixedAreaJoin.get("id").as(String.class),"%"+model.getFixedArea()+"%" ); andPredicate.add(p); } } if(StringUtils.isNotBlank(model.getKeyWords())) { Predicate p = cb.like(root.get("keyWords").as(String.class), "%"+model.getKeyWords()+"%"); andPredicate.add(p); } Predicate[] array = andPredicate.toArray(new Predicate[0]); Predicate predicate = cb.and(array); return predicate; } }; //响应 Page<SubArea> pageResponse = subAreaService.listPage(spec, pageable); /* //创建map用于存放结果集 Map<String,Object> resultMap = new HashMap<String,Object> (); resultMap.put("total", pageResponse.getTotalElements()); resultMap.put("rows", pageResponse.getContent()); //将结果进行压入栈顶 ActionContext.getContext().getValueStack().push(resultMap);*/ pushPageDataToValustackRoot(pageResponse); return JSON; }
service:
public interface SubAreaService { Page<SubArea> listPage(Specification<SubArea> spec, Pageable pageable); }
serviceImpl:
@Service @Transactional public class SubAreaServiceImpl implements SubAreaService { //注入dao @Autowired private SubAreaRepository subAreaRepository; /** * 分页查询的方法 */ @Override public Page<SubArea> listPage(Specification<SubArea> spec,Pageable pageable) { return subAreaRepository.findAll(spec, pageable); } }
dao层:
public interface SubAreaRepository extends JpaRepository<SubArea,String>,JpaSpecificationExecutor<SubArea> { }