版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39220472/article/details/82721480
项目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教程
页面展示:
前端页面:
//工具栏
<div id="tb" style="padding:5px;height:auto">
<div>
<input id="keyWord" style="line-height:26px;border:1px solid #ccc" placeholder="输入内容查询关键字">
<span>开始时间:<input type="text" class="easyui-datebox" id="startTime"> </span>
<span>结束时间:<input type="text" class="easyui-datebox" id="endTime"> </span>
<span>留言状态:
<select id="status" class="easyui-combobox" style="width: 100px;height:auto">
<option value="-1">请选择</option>
<option value="1">公开</option>
<option value="2">不公开</option>
</select>
</span>
<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
</div>
</div>
//table中的toolbar就是加上的工具栏
<table id="tt" class="easyui-datagrid" style="width:100%;height:500px"
url="<%=request.getContextPath()%>/messages/messageLists"
toolbar="#tb"
singleSelect="true" fitColumns="true" pagination="true">
<thead>
<tr>
<th field="m_id" width="60">留言编号</th>
<th field="u_id" width="60">用户编号</th>
<th field="m_content" width="70">留言内容</th>
<th data-options="field:'m_date',width:60,align:'center',formatter:dataFormatter">留言时间</th>
<th data-options="field:'m_status',width:60,align:'center',formatter:statusFormatter">留言状态</th>
<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
</tr>
</thead>
</table>
js实现把查询的参数传到后台:然后再重加载页面显示数据:
<script>
/*查询*/
function doSearch(){
$('#tt').datagrid('load',{
keyWord: $('#keyWord').val(),
status:$('#status').val(),
startTime:$('#startTime').val(),
endTime:$('#endTime').val()
});
}
</script>
注:keyWord,status等这些参数就是我要传到后台的,所以传什么参数到后台,看你个人需求。当点击查询时是执行table中的url路径。
//table中的toolbar就是加上的工具栏
<table id="tt" class="easyui-datagrid" style="width:100%;height:500px"
url="<%=request.getContextPath()%>/messages/messageLists"
后台代码实现:
controller层:
/**
* 留言记录
* @param page 分页
* @return 后台管理留言记录信息
*/
@RequestMapping("/messageLists")
@ResponseBody
public Map<String,Object>messageList(Page page){
Map<String,Object>map=new HashMap<String,Object>();
//留言记录
List<Messages>list=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<Messages> personList(Page page);
Integer personListCount(Page page);
serviceImpl层:
@Override
public List<Messages> personList(Page page) {
return messagesMapper.personList(page);
}
@Override
public Integer personListCount(Page page) {
return messagesMapper.personListCount(page);
}
mapper.xml:
<!-- 查找留言记录列表 -->
<select id="personList" resultMap="BaseResultMap2"
parameterType="comit.model.Page">
select * from messages
<where>
<if test="userid!='' and userid!=null and userid!='undefined' ">
AND u_id=#{userid}
</if>
<if test="keyWord!='' and keyWord!=null ">
AND m_content like concat('%',#{keyWord},'%')
</if>
<if test="startTime!='' and startTime!=null ">
AND m_date <![CDATA[ >= ]]> #{startTime}
</if>
<if test="endTime!='' and endTime!=null ">
AND m_date <![CDATA[ <= ]]> #{endTime}
</if>
<if test="status!='' and status!=null and status==2">
AND m_status=0
</if>
<if test="status!='' and status!=null and status==1">
AND m_status=1
</if>
</where>
ORDER BY m_id DESC
limit #{start},#{rows}
</select>
<!-- 查找留言总数 -->
<select id="personListCount" resultType="java.lang.Integer"
parameterType="comit.model.Page">
select count(1)
from messages
<where>
<if test="userid!='' and userid!=null and userid!='undefined' ">
AND u_id=#{userid}
</if>
<if test="keyWord!='' and keyWord!=null ">
AND m_content like concat('%',#{keyWord},'%')
</if>
<if test="startTime!='' and startTime!=null ">
AND m_date <![CDATA[ >= ]]> #{startTime}
</if>
<if test="endTime!='' and endTime!=null ">
AND m_date <![CDATA[ <= ]]> #{endTime}
</if>
<if test="status!='' and status!=null and status==2">
AND m_status=0
</if>
<if test="status!='' and status!=null and status==1">
AND m_status=1
</if>
</where>
</select>
注:重点就是看你想拿到什么样的数据,sql应该怎么写