查询框效果如下
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> { }