目录
1.商品编辑效果展示
2.前端
2.1准备商品信息
2.2更新商品信息
3.后端
3.1准备商品信息
3.1.1服务端
3.1.2表现层
3.2更新商品信息
3.2.1服务层
3.2.2表现层
4.注意事项
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我修改了一点，与原页面不一样。