制作查询按钮,点击按钮,显示查询表单
{
id : 'button-search',
text : '查询',
iconCls : 'icon-search',
handler : function(){
//显示查询窗口
$("#searchWindow").window('open');
}
如果点击查询窗口的查询按钮,是可以把form表单向后台提交并且查询到数据的。 但是问题是,如何把后台的数据显示在datagrid数据表格中?如果后台的数据很多,数据显示在前台还是应该保留带条件的分页的功能。所以在解决这个问题的时候,不能像传统做法那样直接把查询的表单提交了,因为如果直接提交的话,后台返回的数据是不能喝datagrid数据表格绑定的。
将查询窗口的条件和数据表格绑定,让数据表格在发送请求时,自动携带条件
查询jquery easyUI datagrid api
上可看出,传递参数的是{key:value}的json格式 那么问题来了,我们怎么把查询窗口form表单的数据转换为json呢? 查看jquery api
下面是jqeury实现把form表单的数据转为json的方法
//将form表单的内容转为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;
};
基于自定义方法,完成将 form参数转换为json绑定到datagrid上
//条件查询
$("#searchBtn").click(function(){
//把form表单参数转换为json
var params = $("#searchForm").serializeJson();
//把json参数绑定到datagrid
$("#grid").datagrid('load',params);
//关闭查询窗口
$("#searchWindow").window('close');
});
通过抓包工具可以看出请求:查询条件和分页查询参数一起发送给服务端
后端的action
@Controller
@ParentPackage("json-default")
@Namespace("/")
@Scope("prototype")
public class CourierAction extends ActionSupport implements ModelDriven<Courier>{
private Courier courier = new Courier();
@Override
public Courier getModel() {
return courier;
}
//注入Service
@Autowired
private CourierService courierService;
/**
* 分页查询
*/
private Integer page;
private Integer rows;
public void setPage(Integer page) {
this.page = page;
}
public void setRows(Integer rows) {
this.rows = rows;
}
@Action(value="courier_pageQuery",
results={@Result(name="success",type="json")})
public String pageQuery(){
System.out.println("条件查询");
//根绝查询条件,构造Specification的查询对象
Specification<Courier> specification = new Specification<Courier>() {
@Override
public Predicate toPredicate(Root<Courier> root,
CriteriaQuery<?> query, CriteriaBuilder cb) {
//当前查询root跟对象Courier
List<Predicate> list = new ArrayList<Predicate>();
//单表查询,(查询当前对象对应的数据表)
if(StringUtils.isNotBlank(courier.getCourierNum())){
//进行快递员工号查询 等值查询
Predicate p1 = cb.equal(root.get("courierNum").as(String.class), courier.getCourierNum());
list.add(p1);
}
if(StringUtils.isNotBlank(courier.getType())){
//等值查询
Predicate p2 = cb.like(root.get("type").as(String.class),
courier.getType());
list.add(p2);
}
if(StringUtils.isNotBlank(courier.getCompany())){
//公司查询,模糊查询
Predicate p3 = cb.like(root.get("company").as(String.class),
"%"+courier.getCompany()+"%");
list.add(p3);
}
//多表查询 查询当前对象关联对象对应的数据表
//使用Courier(root)关联Standard
Join<Object,Object> standardRoot = root.join("standard",JoinType.INNER);
if(courier.getStandard() != null && StringUtils.isNotBlank(
courier.getStandard().getName())){
//进行收费标准名称模糊查询
Predicate p4 = cb.like(standardRoot.get("name").as(String.class),
"%"+courier.getStandard().getName()+"%");
list.add(p4);
}
return cb.and(list.toArray(new Predicate[0]));
}
};
//封装Pageable对象
Pageable pageable = new PageRequest(page-1, rows);
//调用service查询数据
Page<Courier> pages = courierService.findPageData(specification,pageable);
//将page对象转换为datagrid需要的格式:响应total rows 到页面
Map<String,Object> result = new HashMap<String,Object>();
result.put("total", pages.getTotalElements());
result.put("rows",pages.getContent());
//将结果对象压入值栈
ActionContext.getContext().getValueStack().push(result);
return SUCCESS;
}
service层实现代码
@Service
@Transactional
public class CourierServiceImpl implements CourierService {
//注入DAO
@Autowired
private CourierRepository courierRepository;
@Override
public Page<Courier> findPageData(Specification<Courier> specification,Pageable pageable) {
return courierRepository.findAll(specification,pageable);
}
}
DAO层代码实现
public interface CourierRepository extends JpaRepository<Courier, Integer>,
JpaSpecificationExecutor<Courier>{
//这里不需要写
}
查看JpaSpecificationExecutor接口的源码,findAll的方法
/* @param spec
* @param pageable
* @return
*/
Page<T> findAll(Specification<T> spec, Pageable pageable);
Specification接口对象 代表是条件查询对象 Pageable接口对象 代表的是分页查询的对象
后端技术:maven+spring+spring data jpa + struts2