|
Mybatis那些事-拦截器(Plugin+Interceptor)
参考链接：https://blog.csdn.net/yhjyumi/article/details/49188051
EasyUI分页和返回结果集对象
Service层代码：
//带分页查询，并返回EasyUI所学结果集供EasyUI grid控件绑定数据
public EasyUIResult queryList(Integer page, Integer rows){
PageHelper.startPage(page, rows);// 设置分页信息
List<Item> oList = itemMapper.queryListOrderByUpdated();
PageInfo<Item> pageInfo = new PageInfo<Item>(oList);
return new EasyUIResult(pageInfo.getTotal(),pageInfo.getList());
}
Controller层代码：
@RequestMapping("query")
@ResponseBody
public EasyUIResult list(Integer page, Integer rows){
return itemService.queryList(page, rows);
}
开发步骤
第一步：列表页面item-list.jsp引入EasyUI的列表控件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<table class="easyui-datagrid" id="itemList" title="商品列表"
data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:30,toolbar:toolbar">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id',width:60">商品ID</th>
<th data-options="field:'title',width:200">商品标题</th>
<th data-options="field:'cid',width:100">叶子分类</th>
<th data-options="field:'sellPoint',width:100">卖点</th>
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
<th data-options="field:'num',width:70,align:'right'">库存数量</th>
<th data-options="field:'barcode',width:100">条形码</th>
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>
<th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
</tr>
</thead>
</table>
<div id="itemEditWindow" class="easyui-window" title="编辑商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/page/item-edit'" style="width:80%;height:80%;padding:10px;">
</div>
<script>
function getSelectionsIds(){
var itemList = $("#itemList");
var sels = itemList.datagrid("getSelections");
var ids = [];
for(var i in sels){
ids.push(sels[i].id);
}
ids = ids.join(",");
return ids;
}
var toolbar = [{
text:'新增',
iconCls:'icon-add',
handler:function(){
$(".tree-title:contains('新增商品')").parent().click();
}
},{
text:'编辑',
iconCls:'icon-edit',
handler:function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert('提示','必须选择一个商品才能编辑!');
return ;
}
if(ids.indexOf(',') > 0){
$.messager.alert('提示','只能选择一个商品!');
return ;
}
$("#itemEditWindow").window({
onLoad :function(){
//回显数据
var data = $("#itemList").datagrid("getSelections")[0];
data.priceView = KindEditorUtil.formatPrice(data.price);
$("#itemeEditForm").form("load",data);
// 加载商品描述
$.getJSON('/item/query/item/desc/'+data.id,function(_data){
if(_data.status == 200){
//UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
itemEditEditor.html(_data.data.itemDesc);
}
});
//加载商品规格
$.getJSON('/item/param/item/query/'+data.id,function(_data){
if(_data && _data.status == 200 && _data.data && _data.data.paramData){
$("#itemeEditForm .params").show();
$("#itemeEditForm [name=itemParams]").val(_data.data.paramData);
$("#itemeEditForm [name=itemParamId]").val(_data.data.id);
//回显商品规格
var paramData = JSON.parse(_data.data.paramData);
var html = "<ul>";
for(var i in paramData){
var pd = paramData[i];
html+="<li><table>";
html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
for(var j in pd.params){
var ps = pd.params[j];
html+="<tr><td class=\"param\"><span>"+ps.k+"</span>: </td><td><input autocomplete=\"off\" type=\"text\" value='"+ps.v+"'/></td></tr>";
}
html+="</li></table>";
}
html+= "</ul>";
$("#itemeEditForm .params td").eq(1).html(html);
}
});
KindEditorUtil.init({
"pics" : data.image,
"cid" : data.cid,
fun:function(node){
KindEditorUtil.changeItemParam(node, "itemeEditForm");
}
});
}
}).window("open");
}
},{
text:'删除',
iconCls:'icon-cancel',
handler:function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert('提示','未选中商品!');
return ;
}
$.messager.confirm('确认','确定删除ID为 '+ids+' 的商品吗？',function(r){
if (r){
var params = {"ids":ids};
$.post("/item/delete",params, function(data){
if(data.status == 200){
$.messager.alert('提示','删除商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}
});
}
});
}
},'-',{
text:'下架',
iconCls:'icon-remove',
handler:function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert('提示','未选中商品!');
return ;
}
$.messager.confirm('确认','确定下架ID为 '+ids+' 的商品吗？',function(r){
if (r){
var params = {"ids":ids};
$.post("/rest/item/instock",params, function(data){
if(data.status == 200){
$.messager.alert('提示','下架商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}
});
}
});
}
},{
text:'上架',
iconCls:'icon-remove',
handler:function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert('提示','未选中商品!');
return ;
}
$.messager.confirm('确认','确定上架ID为 '+ids+' 的商品吗？',function(r){
if (r){
var params = {"ids":ids};
$.post("/rest/item/reshelf",params, function(data){
if(data.status == 200){
$.messager.alert('提示','上架商品成功!',undefined,function(){
$("#itemList").datagrid("reload");
});
}
});
}
});
}
}];
</script>
访问的/item/query链接，采用get方法访问。返回EasyUIResult。
第二步：在ItemController中增加查询方法
@RequestMapping("query")
@ResponseBody
public EasyUIResult queryList(@RequestParam("page") Integer page, @RequestParam("rows") Integer rows) {
return this.itemService.queryList(page, rows);
}
第三步：在ItemService中添加查询方法
/**
* 查询商品列表
* @param page
* @param rows
* @return
*/
public EasyUIResult queryList(Integer page, Integer rows) {
PageHelper.startPage(page, rows, true);//设置分页信息
List<Item> items = itemMapper.queryListOrderByUpdated();//按照更新时间倒序排序
PageInfo<Item> pageInfo = new PageInfo<Item>(items);
return new EasyUIResult(pageInfo.getTotal(), pageInfo.getList());
}
第四步：在ItemMapper中添加查询方法，按修改时间倒叙
package com.jt.manage.mapper;
import java.util.List;
import com.jt.manage.mapper.base.mapper.SysMapper;
import com.jt.manage.pojo.Item;
public interface ItemMapper extends SysMapper<Item>{
public List<Item> queryListOrderByUpdated();
}
第五步：ItemMapper.xml
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.manage.mapper.ItemMapper">
<select id="queryListOrderByUpdated" resultType="Item">
SELECT * FROM tb_item ORDER BY updated DESC
</select>
</mapper>
按修改时间倒叙排列。
列表页面显示出所有商品信息
数据二次加工
价格修饰，日期修饰，状态显示中文，回显商品分类名称。
声明js函数
var TT = KindEditorUtil = {
// 格式化价格
formatPrice : function(val,row){
return (val/100).toFixed(2);
},
// 格式化商品的状态
formatItemStatus : function formatStatus(val,row){
if (val == 1){
return '正常';
} else if(val == 2){
return '<span style="color:red;">下架</span>';
} else {
return '未知';
}
},
// 商品分类id转名称
formatItemCat : function(val,row){
var result = ""; //接收返回值
//jQuery提供$.get、$.post、$.ajax三种方式
$.ajax({
type: "POST",
url: "/item/cat/"+val,
contentType: "application/json;charset=utf-8",
dataType: "json",
async: false, //同步，必须设置为同步，异步无法获取返回值
success: function (data) {
result = data.name+"("+val+")";
}, failure: function () {
result = "";
}
})
return result;
}
};
列表中调用
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.formatItemCat">商品分类</th>
<th data-options="field:'sellPoint',width:100">卖点</th>
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
<th data-options="field:'num',width:70,align:'right'">库存数量</th>
<th data-options="field:'barcode',width:100">条形码</th>
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>
<th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
controller支持
@RequestMapping("/{id}")
@ResponseBody //必须使用对象，jackson内部有中文转码，防止乱码
public ItemCat getItemCatName(@PathVariable Long id){
return itemCatService.queryById(id);
}
|
转播
