正文

模仿淘宝卖家的店铺分类

author  author  2022-09-06  504

关键词：

技术分享

功能要求：

随意添加分类、移动排序（要有上移下移置顶置底）、删除按钮需要保存修改之后才可以生效、需要无子类时候才可以、页面上也是可以立即更改，难点是前端的JavaScript逻辑。

效果：

技术分享

用的是bootstrap框架，页面所以有点粗糙。

逻辑上是，删除发送ajax请求验证但不执行删除操作，只有在保存的时候一并入库。

前端代码比较复杂，后台是依靠$_POST[-1][name]的二维数组去执行一并入库，负值的键值则为新增数据，正值且属于该店铺的分类ID会被当成修改。就酱紫。

至于前端如何实现移动啦、新增啦的、还有就是按钮状态啦、

/**店铺分类 begin**/
/**
  * @method 合并分类
  * @author xu 2017/6/26
  */
function combineTree(e)
{    
    var id = $(e).parents(‘tr‘).attr(‘conbineId‘);
    var classVal = $(e).attr(‘class‘);
    if(classVal == ‘icon icon_cdown‘){
        $("tr[conbineId=tree_"+id+"]").hide();
        $(e).attr(‘class‘,‘icon icon_cright‘);
    }else{
        $("tr[conbineId=tree_"+id+"]").show();
        $(e).attr(‘class‘,‘icon icon_cdown‘);
    }
    //这里检测全部展开、全部收起
    //判定是否全部都是合并
    var allIsCombine = true;
    $(‘i[icontype="combine"]‘).each(function(index,i){
        if($(i).attr(‘class‘)==‘icon icon_cdown‘)
        {
            allIsCombine = false;
        }
    });
    if(allIsCombine)
    {
        $("input[myAttr=‘changetext‘]").val("全部展开");
    }
    //判定是否全部都是展开
    var allIsNoCombine = true;
    $(‘i[icontype="combine"]‘).each(function(index,i){
        if($(i).attr(‘class‘)==‘icon icon_cright‘)
        {
            allIsNoCombine = false;
        }
    });
    if(allIsNoCombine)
    {    
        $("input[myAttr=‘changetext‘]").val("全部收起");
    }
}

/**
  * @method 全部展开合并切换
  * @author xu 2017/6/26
  */
function showHideTog(e)
{
    var thisText = $(e).val();
    if(thisText==‘全部展开‘)
    {
        $("input[myAttr=‘changetext‘]").val("全部收起");
        $("i[iconType=‘combine‘]").each(function(index,i){
            if($(i).attr(‘class‘)==‘icon icon_cright‘){
                var id = $(i).parents(‘tr‘).attr(‘conbineId‘);
                $("tr[conbineId=tree_"+id+"]").show();
                $(i).attr(‘class‘,‘icon icon_cdown‘);
            }
        });

    }
    else
    {
        $("input[myAttr=‘changetext‘]").val("全部展开");
        $("i[iconType=‘combine‘]").each(function(index,i){
        if($(i).attr(‘class‘)==‘icon icon_cdown‘){
            var id = $(i).parents(‘tr‘).attr(‘conbineId‘);
            $("tr[conbineId=tree_"+id+"]").hide();
            $(i).attr(‘class‘,‘icon icon_cright‘);
        }
    });
    }
}

/**
  * @method 删除产品分类（逻辑删除）
  * @author xu 2017/6/26
  */
function checkDelShopSort(id)
{
    var thispartr = $("tr[myAttr=‘"+id+"‘]");
    //将当前类的下级全部删除
    if(thispartr.attr(‘class‘) == ‘level_1‘){
        var nextlength =  $("tr[myAttr=‘"+id+"‘]").nextAll().length;
        var hasSon = false;
        if(nextlength > 0 && thispartr.next().attr(‘class‘) != ‘level_1‘)
        {    
            hasSon = true;
        }
        if(hasSon)
        {
            MESSAGE.alert(‘此分类中还有子分类，不可以删除！‘);
            return false;
        }
    }
    //删除分类需要判定该分类下面有无分类,若有就禁止删除 
    $.ajax({
        url:‘‘,
        data:{‘id‘:id,‘isAjax‘:1},
        dataType:‘json‘,
        type:‘POST‘,
        success:function(res){
            if(res.data == ‘success‘)
            {
                $("tr[myAttr=‘"+id+"‘]").remove();
                $(‘#sort_table tfoot‘).html(‘<input name="delsign" type="hidden" value="yes">‘);
            }
            else
            {    
                MESSAGE.confirm(‘您选择的分类里还有配件，删除后在店铺里将无法再访问这些分类，且配件会被移出这些分类。确定删除？‘,‘confirmDelSort(‘+id+‘)‘);
            }
        }
    });
}

/**
  * @method 确定删除含有商品的分类
  * @author xu 2017/6/26
  */
function confirmDelSort(id)
{
    $("tr[myAttr=‘"+id+"‘]").remove();
    $(‘#sort_table tfoot‘).html(‘<input name="delsign" type="hidden" value="yes">‘);
}

/**
  * @method 取消添加子类
  * @author xu 2017/6/26
  */
function cancelAddChild(e)
{
    $(e).parents(‘tr‘).remove();
    SORTSHOP.moveIcon();

}
/**
  * @method 添加顶级分类
  * @author xu 2017/6/26
  */
function addTopChild(e)
{
    new_count = new_count - 1;
    var tr = ‘<tr conbineid="‘+new_count+‘" myattr="‘+new_count+‘" class="level_1">‘
        +‘<td><i onclick="combineTree(this)" iconType="combine" class="icon icon_cright"></i>‘
        +‘<input type="text"  submitcheck="checkval"  class="form-control" name="data[‘+new_count+‘][name]" placeholder="请输入分类名称"/>‘
        +‘&nbsp;<i onclick="addChild(this,‘+new_count+‘,0)" class="icon2 icon2_add"></i>‘
        +‘<input type="hidden" class="seq" value="" name="data[‘+new_count+‘][seq]"/>‘
        +‘<input type="hidden" value="0" name="data[‘+new_count+‘][path]"/>‘
        +‘<input type="hidden" value="0" name="data[‘+new_count+‘][pid]"/></td>‘
        +‘<td><i class="icon icon_top"></i><i class="icon icon_up"></i><i class="icon icon_down"></i><i class="icon icon_foot"></i></td>‘
        +‘<td style="padding-left:42px;"><a onclick="cancelAddChild(this)" href="javascript:;" class="a_blue">删除</a></tr>‘;;
    $(‘tbody‘).append(tr);
    SORTSHOP.moveIcon();
}

/**
  * @method 提交检测
  * @author xu 2017/6/26
  */
function submitCheck()
{
    //对表单进行必要的一些检测操作
    var cancelSubmit = false;
    $(‘tbody input[submitcheck="checkval"]‘).each(function(index,i){
        if($(this).val()=="")
        {
            $(this).focus();
            cancelSubmit = true;
            return false;
        }
    });
    if(cancelSubmit)
    {
        return false;
    }
    //对所有tr进行重新排序
    $(".seq").each(function(index,i)
    {
        $(i).val(index+1);
    });
    $("#sortForm").submit();
}
var new_count = 0;//全局变量 

/**
  * @method 添加子类
  * @author xu 2017/6/26
  */
function addChild(e,pid,path)
{    
    var iconClass = $(e).parents(‘tr‘).find("i[iconType=‘combine‘]").attr(‘class‘);
    if(iconClass == ‘icon icon_cright‘)
    {    
        var conbineId = $(e).parents(‘tr‘).attr(‘conbineId‘);
        $("tr[conbineId=tree_"+conbineId+"]").show();
        $(e).parents(‘tr‘).find("i[iconType=‘combine‘]").attr(‘class‘,‘icon icon_cdown‘);
    }
    new_count = new_count - 1;
    path = "‘"+path+"‘";
    var tr = ‘<tr  conbineId="tree_‘+pid+‘" myattr="‘+new_count+‘" class="level_2">‘
            +‘<td style="padding-left:25px;">‘
            +‘└--&nbsp;<input type="text" class="form-control"  submitcheck="checkval"  name="data[‘+new_count+‘][name]" placeholder="请输入分类名称"/>‘
            +‘<input type="hidden" class="seq" value="" name="data[‘+new_count+‘][seq]"/>‘
            +‘<input type="hidden" value="‘+path+‘" name="data[‘+new_count+‘][path]"/>‘
            +‘<input type="hidden" value="‘+pid+‘" name="data[‘+new_count+‘][pid]"/></td>‘
            +‘<td><i class="icon icon_top"></i><i class="icon icon_up"></i><i class="icon icon_down"></i>‘
            +‘<i class="icon icon_foot"></i></td><td style="padding-left:42px;">‘
            +‘<a class="a_blue" onclick="cancelAddChild(this)" href="javascript:;">删除</a></td></tr>‘;
    var length = $(e).parents(‘tr‘).nextAll().length;
    if(length==0){$(e).parents(‘tr‘).after(tr);}
    $(e).parents(‘tr‘).nextAll().each(function(index,i){
        var _class_name = $(this).attr(‘class‘);
        if(_class_name == ‘level_1‘)
        {
            $(this).prev().after(tr);
            return false;
        }
        if(index == length-1)
        {
            $(this).after(tr);
            return false;
        }
    });
    SORTSHOP.moveIcon();
}
/**
  * @method 店铺分类
  * @author soul 2017/6/21
  */
var SORTSHOP = {
    //图标按钮状态
    moveIcon: function(){
        $(‘.icon_hover‘).removeClass(‘icon_hover‘);
        $(‘#sort_table tbody tr‘).each(function(i, e){
            $(e).find(‘.icon_disabled‘).removeClass(‘icon_disabled‘);
            var now_level = parseInt($(this).attr(‘class‘).match(/level_\d+/i)[0].replace(‘level_‘, ‘‘));
            if(now_level == 1)
            {
                //上面没有level_1的就要去除上移
                if($(e).prevAll(‘.level_1‘).length < 1)
                {
                    $(e).find(‘.icon_top, .icon_up‘).addClass(‘icon_disabled‘);
                }
                //对于level_1下面的level1未0的时候就是没有下移置底功能
                if($(e).nextAll(‘.level_1‘).length < 1)
                {
                    $(e).find(‘.icon_foot, .icon_down‘).addClass(‘icon_disabled‘);
                }

            }else if(now_level > 1){
                var has = false;
                $(e).prevAll().each(function(i2, e2){
                    //碰到父节点退出循环
                    if($(e2).hasClass(‘level_‘+(now_level-1)))
                    {
                        return false;
                    }
                    has = true;
                    return false;
                });
                if(!has)
                {
                    $(e).find(‘.icon_top, .icon_up‘).addClass(‘icon_disabled‘);
                }

                var has = false;
                $(e).nextAll().each(function(i2, e2){
                    //碰到父节点退出循环
                    if($(e2).hasClass(‘level_‘+(now_level-1)))
                    {
                        return false;
                    }
                    has = true;
                    return false;
                });
                if(!has)
                {
                    $(e).find(‘.icon_foot, .icon_down‘).addClass(‘icon_disabled‘);
                }
            }
        });
        $(‘#sort_table tbody tr .icon:not(.icon_disabled)‘).mouseover(function(){
            $(this).addClass(‘icon_hover‘);
        }).mouseout(function(){
            $(this).removeClass(‘icon_hover‘);
        });
        //为了避免重复执行点击的回调函数，这里进行解绑
        $(".icon").unbind();
        //在这里给每一个icon重新绑定事件
        //上移按钮添加click事件
        $(‘.icon_up:not(.icon_disabled)‘).bind(‘click‘,clickSortUp);
        //下移按钮添加click事件
        $(‘.icon_down:not(.icon_disabled)‘).bind(‘click‘,clickSortDown);
        //置顶按钮添加click事件
        $(‘.icon_top:not(.icon_disabled)‘).bind(‘click‘,clickSortTop);
        //置底按钮添加click事件
        $(‘.icon_foot:not(.icon_disabled)‘).bind(‘click‘,clickSortFoot);
    }
};

/**
  * @method 点击类别上移
  * @author xu 2017/6/26
  */
function clickSortUp(){
    var level =  parseInt($(this).parents(‘tr‘).attr(‘class‘).match(/level_\d+/i)[0].replace(‘level_‘, ‘‘));
    if(level==2)
    {
        //此时往上移动
        var upTr = $(this).parents(‘tr‘).prev();
        $(this).parents(‘tr‘).insertBefore(upTr);
    }
    if(level==1){
        
        var sonTr = $(this).parents(‘tr‘).nextUntil(‘.level_1‘);
        var parentTr = $(this).parents(‘tr‘);
        // html = html+htmls;
        //现在获取上一个节点的起点
        $(this).parents(‘tr‘).prevAll().each(function(index,i){
            var _class_name = $(this).attr(‘class‘);
            if(_class_name ==‘level_1‘)
            {
                parentTr.insertBefore($(i));
                sonTr.insertBefore($(i));
                 return false;
            }
        });
    }
    SORTSHOP.moveIcon();
}
/**
  * @method 点击类别下移
  * @author xu 2017/6/26
  */
function clickSortDown()
{
    var level =  parseInt($(this).parents(‘tr‘).attr(‘class‘).match(/level_\d+/i)[0].replace(‘level_‘, ‘‘));
    //此时往下移动
    if(level==2)
    {
        var downTr = $(this).parents(‘tr‘).next();
        $(this).parents(‘tr‘).insertAfter(downTr);
    }

    if(level==1)
    {
        //获取当前节点和其子节点html
        var sonTr = $(this).parents(‘tr‘).nextUntil(‘.level_1‘);
        var parentTr = $(this).parents(‘tr‘);
        //现在获取下一个节点的终点
        var hasfir = false;
        var length = $(this).parents(‘tr‘).nextAll().length;
        $(this).parents(‘tr‘).nextAll().each(function(index,i){
            var _class_name = $(this).attr(‘class‘);
            if(hasfir)
            {
                if(_class_name ==‘level_1‘)
                {
                    parentTr.insertBefore($(i));
                    sonTr.insertBefore($(i));
                    return false;
                }
                if(index == length-1)
                {
                    sonTr.insertAfter($(i));
                    parentTr.insertAfter($(i));
                    return false;
                }
            }
            if(index == length-1)
            {
                sonTr.insertAfter($(i));
                parentTr.insertAfter($(i));
                return false;
            }
            if(_class_name == ‘level_1‘)
            {
                hasfir = true;
            }
        });
    }

    SORTSHOP.moveIcon();
}

/**
  * @method 点击类别置顶
  * @author xu 2017/6/26
  */
function clickSortTop()
{
    var level =  parseInt($(this).parents(‘tr‘).attr(‘class‘).match(/level_\d+/i)[0].replace(‘level_‘, ‘‘));
    //此时往上置顶
    if(level==2)
    {
        var topTr = "";
        //此时移动的是第二个级别的置顶
        $(this).parents(‘tr‘).prevAll().each(function(index,i){
            if($(i).attr(‘class‘)==‘level_1‘)
            {
                topTr = $(i);
                return false;
            }
        });
        $(this).parents(‘tr‘).insertAfter(topTr);
    }
    //现在是一级的置顶操作
    if(level==1)
    {
        //获取当前节点和其子节点html
        var sonTr = $(this).parents(‘tr‘).nextUntil(‘.level_1‘);
        var parentTr = $(this).parents(‘tr‘);
        //现在直接将html插入进去最顶级
        var firstTr = $("tr[class=‘level_1‘]").eq(0);
        parentTr.insertBefore(firstTr);
        sonTr.insertBefore(firstTr);

    }
    SORTSHOP.moveIcon();
}
/**
  * @method 点击类别置底
  * @author xu 2017/6/26
  */
function clickSortFoot()
{
    var level =  parseInt($(this).parents(‘tr‘).attr(‘class‘).match(/level_\d+/i)[0].replace(‘level_‘, ‘‘));
    //此时往上置底
    if(level==2){
        //当前节点的HTML
        var footTr ="";
        var type =""
        //此时移动的是第二个级别的置底
        var length = $(this).parents(‘tr‘).nextAll().length;
        $(this).parents(‘tr‘).nextAll().each(function(index,i){
            //往下循环，遇到level_1就插在该节点前面
            if($(i).attr(‘class‘)==‘level_1‘)
            {
                footTr = $(i);
                type = ‘2‘;
                return false;
            }
            //如果一直都遇不到level_1那就放在最后节点的后面吧
            if(index == length-1)
            {
                footTr = $(i);
                type = ‘1‘;
                return false;
            }
        });
        if(type == ‘1‘)
        {
            $(this).parents(‘tr‘).insertAfter(footTr);
        }else{
            $(this).parents(‘tr‘).insertBefore(footTr);
        }
    }
    //现在是一级的置底操作
    if(level==1){
        //获取当前节点和其子节点html
        var sonTr = $(this).parents(‘tr‘).nextUntil(‘.level_1‘);
        var parentTr = $(this).parents(‘tr‘);
        var lastTr = $("#sort_table tbody tr").last();
        sonTr.insertAfter(lastTr);
        parentTr.insertAfter(lastTr);
    }
    SORTSHOP.moveIcon();
}

/**
  * @method
  * @author xu 2017/6/30
  */
function checkShopBaseInfo(formid)
{   
    var val = $(‘#‘+formid+‘ [name="province[0]"]‘).val();
    var error = false;
    var check_arr = new Array(‘shopName‘,‘province[0]‘,‘shopAddr‘);
    for(var i in check_arr)
    {
        var obj = $(‘#‘+formid+‘ [name="‘+check_arr[i]+‘"]‘);
        var val = $.trim(obj.val());
        switch(check_arr[i])
        {
            case ‘shopName‘:
                if(val==‘‘){
                    obj.parent().find(‘span[class="txt_error"]‘).text(‘店铺名称不能为空‘);
                    obj.focus();
                    error = true;
                    }else{
                        var data = AJAX.synchronize("post", "/seller/checkShopNameUnique", {"shopName":val})
                        if(data.status && data.data < 1){
                        }else{
                            obj.parent().find(‘span[class="txt_error"]‘).text(‘店铺名称已被使用‘);
                            obj.focus();
                            error = true;
                        }
                    }
            break;
            case ‘province[0]‘:
                if(val==0){
                    console.log(111)
                    obj.parent().parent().find("span[class=‘txt_error‘]").text(‘地区不能为空‘);
                    error = true;
                    }
            break;
            case ‘shopAddr‘:
                if(val==‘‘){
                    obj.parent().find(‘span[class="txt_error"]‘).text(‘经营地址不能为空‘);
                    obj.focus();
                    error = true;
                }
                break;
        }
        if(error) break;
    }
    if(error) {
        return false;
    }else{
        return true;
    }
}
/**店铺分类 end**/

淘宝店铺卖手机壳，手机壳怎么添加型号、颜色、类型三种分类，现在只有一种颜色分类。

1、首先打开千牛，登录淘宝后台，点击店铺管理右侧的功能拓展图标。2、然后在弹出的界面中，点击宝贝分类管理，如下图所示。3、然后在打开的页面中，点击添加手工分类。4、然后在打开的页面中，输入分类名称、添加图... 查看详情

淘宝企业店铺提现流程是怎样的？

淘宝企业店提现：相信日常大家关注较多的是淘宝c店，对于企业店铺这块了解的相对少，所以，淘宝企业店铺的卖家遇到的问题，有相关解答的就会比较少，例如卖家们关心的这类店铺如何提现，那今天我们就特意收集了相关... 查看详情

提高淘宝店铺动态评分的四大技巧

淘宝动态评分是买家对卖家服务、产品质量以及发货速度的总体评分标准。它是网店自然搜索排名的重要影响因素之一，也是淘宝官方活动要求的基本标准之一。所以对卖家而言，店铺动态评分越高，那么店铺排名... 查看详情

如何让淘宝店铺的商品能自动发货到旺旺

很多朋友在淘宝购买东西，特别是购买一些虚拟物品，只要一拍下，马上旺旺就自动发过来了。很奇怪人家店铺是怎么实现24小时无人职守自动发货的，其实这些店铺的卖家都是使用了淘宝服务市场上的一个服务软件，下面向大... 查看详情

教你如何管理店铺

对于众多淘宝卖家来说，想要运营好淘宝店铺，那么就需要对淘宝有更多的了解，在网上泛泛一搜，有眼花缭乱的干货让人参考，那么到底哪些是适用于自己的，也会让商家变得很茫然。那么到底什么是最适合商家的方式?我们... 查看详情

淘宝权重指的是什么

...而已，需要做的非常多。我这边给店铺权重做了下定义：淘宝的规则（淘宝规定我们需要去做的）。很多新手卖家对于后台都不了解，对淘宝规则不了解，所以店铺权重低得很。这边我简单地列出一些给大家看看：①消费者保障... 查看详情

店铺运营之---选品

...下自己当前所处的地位，1.没有营业执照，所以我选择开淘宝店铺。2.暂时没有货源，没有销量渠道，所以我选择使用一件代发形式，赚差价。3.没有实际运营基础，对于淘宝各个领域不了解。4.没有团队，没有预算，没有时查看详情

如何在淘宝开店

现在在淘宝集市上免费开网店是真实的，从会员注册到店铺认证，每一步都是免费的。想在淘宝集市上开网店的朋友，只需将自己的淘宝帐号（已认证）与银行卡绑定、认证，通过淘宝网的考试便可以拥有一家自己的网店了。为... 查看详情

taobao_api项目开坑，自主完成淘宝主要接口的开发-版本：卖家版（非淘宝api）

项目名称：taobao_api项目目的：独立实现各个淘宝操作的相关api，不依赖淘宝提供的api，而是自己实现接口前期实现接口：已付款订单查询（自动更新）,订单发货,订单备注应用场景：中小型虚拟店铺，可实现自动发货项目使用工... 查看详情

商品标题如何优化：宝贝标题优化的方法是什么

商品标题如何优化：取一个合适淘宝标题是卖家必备的技能，因为标题关系着店铺的流量和权重。想要设置好商品标题，要懂得一些技巧。淘宝标题词可以进行拆分，那么淘宝标题词根拆分方法是什么呢?首先搜索一个宝贝人气... 查看详情

淘宝的左侧分类栏目里面图片怎么添加链接

参考技术A管理店铺-宝贝管理-宝贝分类管理-添加图片查看详情

广州京东代运营公司经营范围

...希望对大家的宝贝上下架有所帮助！　　有些店铺卖家开淘宝店也有一段时间了，但对于淘宝宝贝的上下架如何控制到最好还是有点迷糊，不是很清楚。相信大家都知道淘宝商品离下架时间越近的，排名会越靠前。从这里我们可... 查看详情

以《淘宝网》为例，描绘质量属性的六个常见属性场景。

可用性一般场景：双十一淘宝网交易人数过多时：场景可能的值刺激源淘宝客户刺激人数过多，网站响应时间过迟制品系统的处理器环境正常操作响应继续运行，响应时间边迟响应度量响应时间延迟2-5秒 &nb... 查看详情

怎么修改淘宝店铺宝贝图片尺寸的宽度

我用的是淘宝标准版店铺，宝贝图片尺寸最大可以该为220*220，在店铺中我点“装修此页面”—“编辑”—图片尺寸大小调整为：220*220，保存后，我店铺的图片尺寸为146*220，有人说我的图片原本就是长方形的不能该为正方形，但... 查看详情

淘宝卖家缺货退款的常见问题解答

今天小编为大家带来的是“淘宝卖家缺货退款的常见问题解答”。很多朋友都碰见过淘宝卖家缺货退款的问题，但是都不知道怎么解决，遇到有关淘宝卖家缺货退款的问题后我们该怎么办呢?很多买家都不知道淘宝卖家缺货怎么... 查看详情

什么是淘宝客的cps模式？

参考技术ACPS模式是将电商平台（淘宝、京东、苏宁易购等）上的产品过渡到自己平台上的一种商务形式，可以通过推广和销售平台上的商品从而赚取卖家的佣金。电商卖货通常都会和许多导购平台签订推广协议，从而快速卖出... 查看详情

优化产品主图详情图，寻找类似产品卖家，关联店铺其他产品，设置优惠卷

燃尽图：今日完成任务：（1）（2）（3）核心操作：（1）（2）（3）遇到的问题：（1）（2）解决办法：（1）（2）查看详情

《淘宝》购物车按店铺顺序排列教程

参考技术A在淘宝买东西的时候，有的小伙伴会在同一个店铺加入多件商品到购物车中，如果店铺比较多的话，也不太方便管理。那么淘宝购物车怎么按照店铺排序呢？下面我就为大家带来了淘宝购物车按店铺顺序排列的设置教... 查看详情