多条件查询如何封装数据
在Java中前端往后台发送数据一般都是将数据封装成json对象通过ajax将其发送到到后台的控制层,控制层以对应pojo对象接受,下面以代码演示
**
说明:
这里是有复选框的情况,这种情况将复选框的的name属性在pojo中创建一个数组属性,在get方法中将前端拼接的逗号取了,面积和价格的开始结束分别都要在pojo中增加成属性,并提供set和get方法
**
**
html代码:
**
<div id="cx">
<form id="where">
地区:<input type="text" name="harea" class="easyui-textbox">
小区:<input type="text" name="hxq" class="easyui-textbox">
楼层:<input type="text" name="hceng" class="easyui-textbox">
面积:
<input type="text" name="mjBegin" class="easyui-textbox" size="2">-
<input type="text" name="mjEnd" class="easyui-textbox" size="2">
价格:
<input type="text" name="jgBegin" class="easyui-textbox" size="2">-
<input type="text" name="jgEnd" class="easyui-textbox" size="2"><br>
朝向:
<select class="easyui-combobox" name="horientation">
<option value="0">请选择</option>
<option value="1">东</option>
<option value="2">西</option>
<option value="3">南</option>
<option value="4">北</option>
</select>
配套设施:
<input type="checkbox" name="hptss" value="宽带">宽带
<input type="checkbox" name="hptss" value="电视">电视
<input type="checkbox" name="hptss" value="洗衣机">洗衣机
<input type="checkbox" name="hptss" value="冰箱">冰箱
<input type="checkbox" name="hptss" value="空调">空调
<a class="easyui-linkbutton" onclick="queryByWhere()">查询</a>
</form>
</div>
**
js代码:这里我用的是easyui的前端框架
**
$("#HouseData").datagrid({
url:'<%=path%>/houseManager/getHouseAll.do',
fit:true,
pagination:true,
pageSize:20,
toolbar:'#cx', //ct代表html中的div的id
columns:[
[
{field:"hid",title:"房间编号",align:"center"},
{field:"harea",title:"所属地区",align:"center"},
{field:"hxq",title:"所属小区",align:"center"},
{field:"hceng",title:"所属楼层",align:"center"},
{field:"hacreage",
title:"面积",align:"center",formatter:function(value,row,index){
return value+"m²";
}},
{field:"horientation",
title:"朝向",align:"center",formatter:function(value,row,index){
switch(value){
case 1:return "朝东";
case 2:return "朝西";
case 3:return "朝南";
case 4:return "朝北";
}
}},
{field:"hptss",title:"配套设施",align:"center"},
{field:"hprice",title:"价格",align:"center"},
}},
{field:"createtime",title:"信息添加时间",align:"center"},
{field:"modifytime",title:"最后修改时间",align:"center"},
{field:"cz",title:"操作",align:"center",formatter:function(value,row,index){
return '<input type="button" value="查看" onclick="showHouse('+row.hid+')"/><input type="button" value="修改" onclick="upHouse('+row.hid+')"/>';
}}
]
]
});
**
下面是将form表单中的数据获取并封装成json对象
**
function queryByWhere(){
//获取id为where内的所有添加了信息的数据 是一个数组
var arr = $("#where").serializeArray();
//下面拼接字符串where为json格式
var where = "{";
//因为配套设施是复选框,直接拼接会出现多个"hptss":"电视"等这种,所以单独拼接,最后在加到where的最后
var ptss = "";
for(var i = 0;i<arr.length;i++){
if(arr[i].name=="hptss"){
ptss+=","+arr[i].value;
}else{
//拼接where
where+='"'+arr[i].name+'":"'+arr[i].value+'",';
}
}
//将where和ptss合并在一起 ptss最前面有一个逗号所以从第二个字符开始取
where+='"hptss":"'+ptss.substr(1)+'"';
where+="}";
//将拼接好的where字符串转换成json对象
where=JSON.parse(where);
//queryParams在请求远程数据的时候发送额外的参数 在这里也就是将json对象where在表格查询的时候提交到后台取去
$("#HouseData").datagrid({queryParams:where});
}
**
后台代码(控制层)
**
@RequestMapping("/getHouseAll")
@ResponseBody
public Map<String, Object> getHouseAll(House house,Integer page,Integer rows){ //house是前台传过来的json对象where
//获取后台的数据装到list当中去
List<House> list = hs.getHouseAll(house);
//创建一个map用来存放返回给前台的数据
Map<String, Object> map = new HashMap<>();
//将获取的总记录数装到map当中
map.put("total", list.size());
//(page-1)*rows>list.size()?0:(page-1)*rows 截取list开始的位置 使用三目运算符判断开始的位置如果大于返回的数据总条数的话 设置成0
// rows*page > list.size()?list.size():rows*page) 结束的位置 使用三目运算符判断结束的位置如果大于返回数据的总条数的话 吧总条数作为结束的位置
map.put("rows", list.subList((page-1)*rows>list.size()?0:(page-1)*rows , rows*page > list.size()?list.size():rows*page));
return map;
}