item-list.jsp item-param-add.jsp item-param-list.jsp

item-list.jsp

<%@ 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/list',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:TAOTAO.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:TAOTAO.formatItemStatus">状态</th>
            <th data-options="field:'created',width:130,align:'center',formatter:TAOTAO.formatDateTime">创建日期</th>
            <th data-options="field:'updated',width:130,align:'center',formatter:TAOTAO.formatDateTime">更新日期</th>
        </tr>
    </thead>
</table>
<div id="itemEditWindow" class="easyui-window" title="编辑商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/rest/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 = TAOTAO.formatPrice(data.price);
                    $("#itemeEditForm").form("load",data);
                    
                    // 加载商品描述
                    $.getJSON('/rest/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('/rest/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);
                        }
                    });
                    
                    TAOTAO.init({
                        "pics" : data.image,
                        "cid" : data.cid,
                        fun:function(node){
                            TAOTAO.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("/rest/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-param-add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<table cellpadding="5" style="margin-left: 30px" id="itemParamAddTable" class="itemParam">
    <tr>
        <td>商品类目:</td>
        <td><a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a> 
            <input type="hidden" name="cid" style="width: 280px;"></input>
        </td>
    </tr>
    <tr class="hide addGroupTr">
        <td>规格参数:</td>
        <td>
            <ul>
                <li><a href="javascript:void(0)" class="easyui-linkbutton addGroup">添加分组</a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <a href="javascript:void(0)" class="easyui-linkbutton submit">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton close">关闭</a>
        </td>
    </tr>
</table>
<div  class="itemParamAddTemplate" style="display: none;">
    <li class="param">
        <ul>
            <li>
                <input class="easyui-textbox" style="width: 150px;" name="group"/>&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton addParam"  title="添加参数" data-options="plain:true,iconCls:'icon-add'"></a>
            </li>
            <li>
                <span>|-------</span><input  style="width: 150px;" class="easyui-textbox" name="param"/>&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton delParam" title="删除" data-options="plain:true,iconCls:'icon-cancel'"></a>                        
            </li>
        </ul>
    </li>
</div>
<script style="text/javascript">
    $(function(){
        TAOTAO.initItemCat({
            fun:function(node){
            $(".addGroupTr").hide().find(".param").remove();
                //  判断选择的目录是否已经添加过规格
              $.getJSON("/item/param/query/itemcatid/" + node.id,function(data){
                  if(data.status == 200 && data.data){
                      $.messager.alert("提示", "该类目已经添加，请选择其他类目。", undefined, function(){
                         $("#itemParamAddTable .selectItemCat").click();
                      });
                      return ;
                  }
                  $(".addGroupTr").show();
              });
            }
        });
        
        $(".addGroup").click(function(){
              var temple = $(".itemParamAddTemplate li").eq(0).clone();
              $(this).parent().parent().append(temple);
              temple.find(".addParam").click(function(){
                  var li = $(".itemParamAddTemplate li").eq(2).clone();
                  li.find(".delParam").click(function(){
                      $(this).parent().remove();
                  });
                  li.appendTo($(this).parentsUntil("ul").parent());
              });
              temple.find(".delParam").click(function(){
                  $(this).parent().remove();
              });
         });
        
        $("#itemParamAddTable .close").click(function(){
            $(".panel-tool-close").click();
        });
        //生成json数据的过程
        $("#itemParamAddTable .submit").click(function(){
            var params = [];
            var groups = $("#itemParamAddTable [name=group]");
            groups.each(function(i,e){
                var p = $(e).parentsUntil("ul").parent().find("[name=param]");
                var _ps = [];
                p.each(function(_i,_e){
                    var _val = $(_e).siblings("input").val();
                    if($.trim(_val).length>0){
                        _ps.push(_val);                        
                    }
                });
                var _val = $(e).siblings("input").val();
                if($.trim(_val).length>0 && _ps.length > 0){
                    params.push({
                        "group":_val,
                        "params":_ps
                    });                    
                }
            });
            var url = "/item/param/save/"+$("#itemParamAddTable [name=cid]").val();
            $.post(url,{"paramData":JSON.stringify(params)},function(data){
                if(data.status == 200){
                    $.messager.alert('提示','新增商品规格成功!',undefined,function(){
                        $(".panel-tool-close").click();
                        $("#itemParamList").datagrid("reload");
                    });
                }
            });
        });
    });
</script>

item-param-list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<table class="easyui-datagrid" id="itemParamList" title="商品列表" 
       data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/param/list',method:'get',pageSize:30,toolbar:itemParamListToolbar">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'id',width:60">ID</th>
            <th data-options="field:'itemCatId',width:80">商品类目ID</th>
            <th data-options="field:'itemCatName',width:100">商品类目</th>
            <th data-options="field:'paramData',width:300,formatter:formatItemParamData">规格(只显示分组名称)</th>
            <th data-options="field:'created',width:130,align:'center',formatter:TAOTAO.formatDateTime">创建日期</th>
            <th data-options="field:'updated',width:130,align:'center',formatter:TAOTAO.formatDateTime">更新日期</th>
        </tr>
    </thead>
</table>
<div id="itemEditWindow" class="easyui-window" title="编辑商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/item-edit'" style="width:80%;height:80%;padding:10px;">
</div>
<script>

    function formatItemParamData(value , index){
        var json = JSON.parse(value);
        var array = [];
        $.each(json,function(i,e){
            array.push(e.group);
        });
        return array.join(",");
    }

    function getSelectionsIds(){
        var itemList = $("#itemParamList");
        var sels = itemList.datagrid("getSelections");
        var ids = [];
        for(var i in sels){
            ids.push(sels[i].id);
        }
        ids = ids.join(",");
        return ids;
    }
    
    var itemParamListToolbar = [{
        text:'新增',
        iconCls:'icon-add',
        handler:function(){
            TAOTAO.createWindow({
                url : "/item-param-add",
            });
        }
    },{
        text:'编辑',
        iconCls:'icon-edit',
        handler:function(){
            $.messager.alert('提示','该功能未实现!');
        }
    },{
        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/param/delete",params, function(data){
                        if(data.status == 200){
                            $.messager.alert('提示','删除商品规格成功!',undefined,function(){
                                $("#itemParamList").datagrid("reload");
                            });
                        }
                    });
                }
            });
        }
    }];
</script>

item-param-show.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
${itemParam }
</body>
</html>