easyui的数据网格实现多条件查询并显示数据

项目ssm(spring+springmvc+mybatis)

编译工具:eclipse

后台框架:easyui

因为easyui数据网格显示的是一种json格式数据:

{

"total":1,

"rows":[

{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}


]

}

注:重点就是返回total和rows两个属性,而rows就是封装了我们要返回的数据集

搭建easyui框架可以参考:easyui教程

页面展示:

easyui的数据网格实现多条件查询并显示数据_第1张图片

 前端页面:

//工具栏
开始时间: 结束时间: 留言状态: Search
//table中的toolbar就是加上的工具栏
留言编号 用户编号 留言内容 留言时间 留言状态 操作

js实现把查询的参数传到后台:然后再重加载页面显示数据:

注:keyWord,status等这些参数就是我要传到后台的,所以传什么参数到后台,看你个人需求。当点击查询时是执行table中的url路径。

//table中的toolbar就是加上的工具栏

后台代码实现:

controller层:

/**

* 留言记录

* @param page 分页

* @return 后台管理留言记录信息

*/

@RequestMapping("/messageLists")

@ResponseBody

public MapmessageList(Page page){

Mapmap=new HashMap();

//留言记录

Listlist=messagesService.personList(page);

//留言记录总数

int total=messagesService.personListCount(page);

map.put("total", total);

map.put("rows", list);

return map;

}

注:map就是一种key-value对,而@ResponseBody会以json形式返回数据,所以这样返回给前端页面,easyui就可以解析成符合的json数据形式,这样数据网格就可以显示出数据来。 

Page类是封装了一些分页的属性以及接收查询的参数:


/**

* 处理分页

* @author admin

*

*/

public class Page implements Serializable {



//当前页

private Integer page=1;

//页大小

private Integer rows=5;

// 总记录 数

private Integer totalRecord;

//总页数

private Integer totalPage;

//关键字类型

private String keyType;

//查询关键字

private String keyWord;

//开始记录位置

private Integer start=0;

//用户id

private String userid;

//开始时间

private String startTime;

//结束时间

private String endTime;

//留言状态

private Integer status;


//setter省略。。。


}

service层:

List personList(Page page);

Integer personListCount(Page page);

serviceImpl层:

@Override

public List personList(Page page) {

return messagesMapper.personList(page);

}

@Override

public Integer personListCount(Page page) {

return messagesMapper.personListCount(page);

}

mapper.xml:







注:重点就是看你想拿到什么样的数据,sql应该怎么写

我的座右铭:不会,我可以学;落后,我可以追赶;跌倒,我可以站起来;我一定行。 

你可能感兴趣的:(easyui,前端框架)