@TOC
1.商品编辑效果展示
选择商品,点击编辑
会弹出编辑商品的窗口,然后显示商品信息
我们修改一些数据,比如价格、库存、商品图片以及商品描述
点击提交
发现该商品,价格、库存、商品图片以及商品描述都变为我们修改的了
2.前端
2.1准备商品信息
在item-list.jsp中,使用easyui中datagrid的toolbar属性实现了编辑按钮的添加。
-
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 = TAOTAO.formatPrice(data.price);
-
$(
"#itemeEditForm").form(
"load",data);
-
-
});
-
// 加载商品描述
-
$.getJSON(
'/item/desc/'+data.id,
function(_data){
-
if(_data.status ==
200){
-
itemEditEditor.html(_data.data.itemDesc);
-
}
-
});
-
TAOTAO.init({
-
"pics" : data.image,
-
"cid" : data.cid,
-
fun:
function(node){
-
TAOTAO.changeItemParam(node,
"itemeEditForm");
-
}
-
});
-
}
-
}).window(
"open");
-
}
在点击编辑按钮时,触发handler:function,首先判断,是否多选和不选,如果是则提示用户。
$("#itemEditWindow").window({}).window("open");这一步是打开商品编辑的页面,也就是item-edit.jsp页面。
此时触发onLoad函数准备数据
$("#itemList").datagrid("getSelections")是获取所有被选中行的信息,[0]是获取第一行
data.priceView = TAOTAO.formatPrice(data.price);将真实的价格(单位:分),转换为元
$("#itemeEditForm").form("load",data);调用easyui的form组件的load函数,渲染item-edit.jsp中id="itemeEditForm"的表单。
请求url:'/item/desc/'+data.id,并将选中行的商品id,使用rset格式发送请求。并渲染富文本编辑器的内容。
TAOTAO.init({})函数,在common.js中,初始化图片上传组件和选择类目组件。
图片上传组件initPicUpload会回显图片
-
if(data && data.pics){
-
var imgs = data.pics.split(
",");
-
for(
var i
in imgs){
-
if($.trim(imgs[i]).length >
0){
-
_ele.siblings(
".pics").find(
"ul").append(
"<li><a href='"+imgs[i]+
"' target='_blank'>" +
-
"<img src='"+imgs[i]+
"' width='80' height='50' /></a></li>");
-
}
-
}
-
}
图片上传组件initPicUpload在用户上传新商品图片后,移除老图片
选择类目组件initItemCat会回显选择的商品类目
2.2更新商品信息
$("#itemEditWindow").window({}).window("open");打开的窗口地址修改为/item-edit,因为@RequestMapping("/{page}")会拦截/xxx,并返回xxx.jsp的视图
打开item-edit.jsp页面后,TAOTAO.createEditor("#itemeEditForm [name=desc]")通过id和表单选择器,实例化编辑器。
当用户点击提交时先验证表单,然后将商品价格转换为,以为单位分的价格。
itemEditEditor.sync();同步富文本编辑器的内容到表单中的textarea里面去。
最后,发起ajax请求url:/item/update,$("#itemeEditForm").serialize()将表单中的项以key=value的形式post提交。
更新商品信息成功后,关闭item-edit.jsp,并清空表单内容,刷新item-list.jsp页面的内容。
3.后端
由于前端是拿别人现成的,所以分析起来比较累。
如果仅看功能的话,本质上就是用户从前端点击编辑,后端准备数据返回给前端。用户更新编辑的信息,从前端发送到后端保存到数据库中。所以后端就是提供数据,保存数据,编写比较容易。
3.1准备商品信息
由于商品的信息大部分都是通过$("#itemList").datagrid("getSelections")[0]从item-list.jsp页面取出来的,只有商品描述ItemDesc没有,所以我们根据商品id,从数据库中查询ItemDesc即可。
3.1.1服务端
在taotao-manager-interface的ItemService中添加接口
-
/**
-
* 根据id查询商品描述
-
* @param id
-
* @return
-
*/
-
TaotaoResult getItemDesc(Long id);
在taotao-manager-service的ItemServiceImpl中编写实现类
-
/**
-
* 根据id查询商品描述,封装到TaotaoResult中
-
*/
-
@Override
-
public TaotaoResult getItemDesc(
Long id) {
-
TbItemDesc itemDesc = itemDescMapper.selectByPrimaryKey(id);
-
return TaotaoResult.ok(itemDesc);
-
}
3.1.2表现层
在taotao-manager-web的ItemCotroller中编写controller
由于前端发起请求的时候,请求的url:/item/desc/id,所以我们使用@RequestMapping(value="/item/desc/{id}")接受id
-
/**
-
* 根据id获取商品描述
-
*/
-
@RequestMapping(value="/item/desc/{id}")
-
@ResponseBody
-
public TaotaoResult getItemDesc(
@PathVariable("id")
Long id) {
-
TaotaoResult result = itemService.getItemDesc(id);
-
return result;
-
}
3.2更新商品信息
当用户编辑完商品信息后,就要保存商品信息了。
3.2.1服务层
在taotao-manager-interface的ItemService中添加接口
-
/**
-
* 更新商品
-
* @param item
-
* @param desc
-
* @return
-
*/
-
TaotaoResult updateItem(TbItem item, String desc);
在taotao-manager-service的ItemServiceImpl中添加实现类
-
@Override
-
public TaotaoResult updateItem(TbItem item, String desc) {
-
// 1.根据商品id更新商品表
-
Long id = item.getId();
-
// 创建查询条件,根据id更新商品表
-
TbItemExample tbItemExample =
new TbItemExample();
-
Criteria criteria = tbItemExample.createCriteria();
-
criteria.andIdEqualTo(id);
-
itemMapper.updateByExampleSelective(item, tbItemExample);
-
-
// 2.根据商品id更新商品描述表
-
TbItemDesc itemDesc =
new TbItemDesc();
-
itemDesc.setItemDesc(desc);
-
TbItemDescExample tbItemDescExample =
new TbItemDescExample();
-
com.taotao.pojo.TbItemDescExample.Criteria createCriteria = tbItemDescExample.createCriteria();
-
createCriteria.andItemIdEqualTo(id);
-
itemDescMapper.updateByExampleSelective(itemDesc, tbItemDescExample);
-
-
return TaotaoResult.ok();
-
}
3.2.2表现层
在taotao-manager-web的ItemCotroller中编写controller
-
/**
-
* 更新商品信息
-
* @param item
-
* @param desc
-
* @return
-
*/
-
@RequestMapping(value="/item/update")
-
@ResponseBody
-
public TaotaoResult updateItem(TbItem item, String desc) {
-
TaotaoResult result = itemService.updateItem(item, desc);
-
return result;
-
}
4.注意事项
item-edit.jsp与item-list.jsp里面的url一定要与controller中的对应,因为item-edit.jsp与item-list.jsp我修改了一点,与原页面不一样。
版权声明:本文为博主转载,出处为 https://blog.csdn.net/pdsu161530247/article/details/81808859
目录