项目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教程
页面展示效果:
前端页面:
<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>
注,table中的<th field="m_id" width="60">留言编号</th>中的field="m_id"对应的是你返回数据的属性名
由于状态在数据库中使用int存储,用0,1等表示,所以在数据网格中要使用函数来表达你0,1所表达的意思。
js:
<script>
//留言状态
function statusFormatter(value,row,index){
if(value==1){
return "公开";
}else{
return "不公开";
}
}
//时间戳的转换
function dataFormatter(value,row,index){
var da = value;
da = new Date(da);
var year = da.getFullYear()+'年';
var month = da.getMonth()+1+'月';
var date = da.getDate()+'日';
return ([year,month,date].join('-'));
}
/* 操作 */
function formatOper(val,row,index){
var e = '<a href="#" id="deitcls" onclick="updateStatus(' + row.m_id +","+1+ ')">公开</a> ';
var d = '<a href="#" onclick="updateStatus(' + row.m_id+","+0 +')">不公开</a>';
return e + d;
}
</script>
代码实现:
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应该怎么写