【SSM分布式架构电商项目-08】后台管理系统编辑商品信息

商品的编辑

数据的编辑核心是：数据回显。

编辑按钮事件

1、 判断选中的行数

2、 弹出window

当窗口打开加载的时候回显数据。

3、 加载编辑页面，在页面加载完时完成回显

获得选中的数据。

$("#itemList").datagrid("getSelections")[0];

利用EasyUI的form表单的数据回显。

$("#itemeEditForm").form("load",data);

自定义格式回显

商品类目回显：

这里的data就是$("#itemList").datagrid("getSelections")[0];得到的。

暂时未处理：
TODO：显示选中的类目的中文名称。需要根据类目id去加载类目名称。

图片回显

效果：

商品描述的回显

JS实现：

后台实现：

itemId在ItemDesc表中并不是主键，但是我们把它看做业务id，所以我们可以用queryById方法。


效果：

提交事件

    function submitForm(){
        if(!$('#itemeEditForm').form('validate')){
            $.messager.alert('提示','表单还未填写完成!');
            return ;
        }
        $("#itemeEditForm [name=price]").val(eval($("#itemeEditForm [name=priceView]").val()) * 100);
        itemEditEditor.sync();

        var paramJson = [];
        $("#itemeEditForm .params li").each(function(i,e){
            var trs = $(e).find("tr");
            var group = trs.eq(0).text();
            var ps = [];
            for(var i = 1;i<trs.length;i++){
                var tr = trs.eq(i);
                ps.push({
                    "k" : $.trim(tr.find("td").eq(0).find("span").text()),
                    "v" : $.trim(tr.find("input").val())
                });
            }
            paramJson.push({
                "group" : group,
                "params": ps
            });
        });
        paramJson = JSON.stringify(paramJson);

        $("#itemeEditForm [name=itemParams]").val(paramJson);

        //提交到后台的RESTful
        $.ajax({
           type: "PUT",
           url: "/rest/item",
           data: $("#itemeEditForm").serialize(),
           success: function(msg){
               $.messager.alert('提示','修改商品成功!','info',function(){
                    $("#itemEditWindow").window('close');
                    $("#itemList").datagrid("reload");
                });
           },
           error: function(){
               $.messager.alert('提示','修改商品失败!');
           }
        });
    }

修改的后台实现

Controller：

 /**
     * 更新商品
     * 
     * @param item
     * @param desc
     * @param itemParams
     * @return
     */
    @RequestMapping(method = RequestMethod.PUT)
    public ResponseEntity<Void> updateItem(Item item, @RequestParam("desc") String desc,
            @RequestParam("itemParams") String itemParams) {
        try {
            if (LOGGER.isDebugEnabled()) {
                LOGGER.debug("编辑商品， item = {},  desc = {}", item, desc);
            }
            if (StringUtils.isEmpty(item.getTitle())) { // TODO 未完成，待优化
                // 参数有误, 400
                return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();
            }

            // 编辑商品
            Boolean bool = this.itemService.updateItem(item, desc);
            if (!bool) {
                if (LOGGER.isInfoEnabled()) {
                    LOGGER.info("编辑商品失败， item = {}", item);
                }
                // 保存失败, 500
                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
            }
            if (LOGGER.isInfoEnabled()) {
                LOGGER.info("编辑商品成功， itemId = {}", item.getId());
            }
            // 204
            return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
        } catch (Exception e) {
            LOGGER.error("编辑商品出错! item = " + item, e);
        }
        // 500
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
    }

Service：

    public Boolean updateItem(Item item, String desc) {
        // 强制设置状态不能被修改
        item.setCreated(null);
        item.setStatus(null);
        Integer count1 = super.updateSelective(item);

        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(item.getId());
        itemDesc.setItemDesc(desc);
        Integer count2 = this.itemDescService.updateSelective(itemDesc);


        return count1.intValue() == 1 && count2.intValue() == 1;
    }

测试：