django,无限级分类实现 添加 ,ajax修改, ajax删除

27 篇文章 0 订阅
27 篇文章 0 订阅

index.html

{% extends 'myadmin/index.html' %}

{% block title %}
<title>后台商品分类列表</title>
{% endblock %}


{% block con %}
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title  am-cf">商品分类列表</div>

                </div>
                <div class="widget-body  am-fr">

                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <div class="am-form-group">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a href="{% url 'myadmin_cate_add' %}" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</a>
                                    <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form>
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="am-form-group tpl-table-list-select">
                            <select name="types" data-am-selected="{btnSize: 'sm'}" style="display: none;">
                              <option value="all" {% if request.GET.types == 'all' %} selected {% endif %}>全局搜索</option>
                              <option value="phone" {% if request.GET.types == 'phone' %} selected {% endif %}>手机号</option>
                              <option value="id" {% if request.GET.types == 'id' %} selected {% endif %}>ID</option>
                              <option value="nikename" {% if request.GET.types == 'nikename' %} selected {% endif %}>昵称</option>
                              <option value="email" {% if request.GET.types == 'email' %} selected {% endif %}>邮箱</option>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                        <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                            <input type="text" name="keywords" value="{{ request.GET.keywords }}" class="am-form-field ">
                            <span class="am-input-group-btn">
                                <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search"></button>
                              </span>
                        </div>
                    </div>
                    </form>


                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>分类名</th>
                                    <th>所属父级</th>
                                    <th>Path路径</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for v in catelist %}
                                <tr>
                                    <td class="am-text-middle">{{ v.id }}</td>
                                    <td class="am-text-middle cate_name">{{ v.sub }}<span cid="{{ v.id }}">{{ v.name }}</span></td>
                                    <td class="am-text-middle">{{ v.pname }}</td>
                                    <td class="am-text-middle">{{ v.path }}</td>
                                    
                                    <td class="am-text-middle">
                                        <div class="tpl-table-black-operation">
                                             <a href="javascript:void(0)" cid="{{ v.id }}" class="removeCate tpl-table-black-operation-del">
                                                <i class="am-icon-pencil"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
            
                                <!-- more data -->
                            </tbody>
                        </table>
                    </div>
                    <div class="am-u-lg-12 am-cf">

                        <div class="am-fr">
                            <ul class="am-pagination tpl-pagination">
                                <!-- <li class="am-disabled"><a href="#">«</a></li> -->
                                <!-- <li class="am-active"><a href="#">1</a></li> -->
                                
                                <!-- <li><a href="#">»</a></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // $(this) window 对象   窗口对象  --> 文档对象(DOM),location(地址对象) history(历史对象)

    // 分类编辑    dblclick双击事件
    $('.cate_name').dblclick(function(){
        // 1 绑定双击事件,获取name换成input  获取当前元素
        var span = $(this).find('span')
        // 获取当前分类名字
        var catename = span.text()
        // 创建一个 input标签
        var inp = $('<input type="text" style="color:black;" value="'+catename+'">')
        // 把分类名换成input
        $(this).find('span').html(inp)
        // select() 让input中的值 处于选中状态
        inp.select()
        // 获取当前选择的元素的 分类 id
        var cid = span.attr('cid')

        // 2,给input绑定丧失焦点事件,判断是否更新了name,发送ajax去修改
        inp.blur(function(){
            // 获取当前新的name
            var newname = $(this).val()
            // 判断当前的值和原来的值是否一样
            if(newname == catename){
                // 不需要修改,恢复原样
                span.html(catename)
            }else{
                // 需要发送ajax去更新
                $.get('{% url 'myadmin_cate_edit' %}',{'cid':cid,'newname':newname},function(data){
                    // 判断是否更新成功
                    if(data['code'] == 0){
                        span.html(newname)
                        alert(data['msg'])
                    }
                },'json')
            }
        })
    })

    // 删除
    $('.removeCate').click(function(){
        // 获取当前选择的分类的id
        var cid = $(this).attr('cid')
        var a = $(this)
        // 发送ajax请求.到后台执行删除
        $.get('{% url 'myadmin_cate_del' %}',{'cid':cid},function(data){
            // 判断当前的返回值
            if(data['code'] == 0){
                // 删除成功
                // $(this).parents('tr').remove()
                //  此处的 $(this) 是谁? ajax对象 XMLHttpRequest
                a.parents('tr').remove()
            }
            alert(data['msg'])
        },'json')
        

    })
</script>
{% endblock %}


add.html

 <form action="{% url 'myadmin_cate_add' %}" method="POST" enctype="multipart/form-data" class="am-form tpl-form-line-form">
     {% csrf_token %}
     
     <div class="am-form-group">
         <label for="user-name" class="am-u-sm-3 am-form-label">
             所属分类
         </label>
         <select name="pid" data-am-selected="{btnSize: 'sm'}" style="display: none;">
           <option value="0" >顶级分类</option>
           {% for v in catelist %}
           <option value="{{ v.id }}" >{{ v.sub }}{{ v.name }}</option>
           {% endfor %}
         </select>
     </div>
     

     <div class="am-form-group">
         <label for="user-name" class="am-u-sm-3 am-form-label">
             分类名称
         </label>
         <div class="am-u-sm-9">
             <input type="text" name="name" class="tpl-form-input" 
              placeholder="分类名称">
         </div>
     </div>


     <div class="am-form-group">
         <div class="am-u-sm-9 am-u-sm-push-3">
             <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">
                 提交
             </button>
         </div>
     </div>
 </form>

Views.py

from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
from django.core.urlresolvers import reverse

# Create your views here.
from .. models import Cates

# 封装函数.格式化获取分类数据
def get_cates_all():
    # 获取所有的分类
    # data = Cates.objects.all()
    # select *,concat(path,id) as paths from myadmin_cates order by paths;
    data = Cates.objects.extra(select = {'paths':'concat(path,id)'}).order_by('paths')
    # 处理数据的顺序,缩进,及父级名
    for x in data:
        l = x.path.count(',')-1 # 0,1,2,
        x.sub = l*'|----'
        if x.pid == 0:
            x.pname = '顶级分类'
        else:
            pob = Cates.objects.get(id=x.pid)
            x.pname = pob.name
        # print(x.name,l)
    return data

# 分类 列表
def cate_index(request):
    # 获取数据
    data = get_cates_all()
    # 分配数据
    context = {'catelist':data}
    # 加载模板
    return render(request,'myadmin/cates/index.html',context)

# 分类 添加
def cate_add(request):
    if request.method == 'POST':
        # 接受数据
        data = {}
        data['name'] = request.POST.get('name')
        data['pid'] = request.POST.get('pid')

        # 判断是否为顶级分类
        if data['pid'] == 0:
            data['path'] = '0,'
        else:
            # 获取当前父级的path路径,
            pob = Cates.objects.get(id=data['pid'])
            # 拼接当前数据的path
            data['path'] = pob.path+data['pid']+','

        # 数据 入库
        ob = Cates(**data)
        ob.save()

        return HttpResponse('<script>alert("添加成功");location.href="'+reverse('myadmin_cate_index')+'";</script>')

    else:
        # 显示表单

        # 获取当前已有的 分类
        catelist = get_cates_all()
        # 分配数据
        context = {'catelist':catelist}
        # 加载一个模板
        return render(request,'myadmin/cates/add.html',context)



# 分类删除
def cate_del(request):
    cid = request.GET.get('cid')
    # 判断当前分类下是否还有子类
    res = Cates.objects.filter(pid=cid).count()
    if res:
        # 有子类
        return JsonResponse({'msg':'当前类下有子类,不能删除','code':1})

    # 判断当前分类下是否有商品发布


    # 执行删除
    ob = Cates.objects.get(id=cid)
    ob.delete()
    return JsonResponse({'msg':'删除成功','code':0})




# 分类 名字修改
def cate_edit(request):
    try:
        # 获取 参数
        cid = request.GET.get('cid')
        newname = request.GET.get('newname')

        # 获取对象
        ob = Cates.objects.get(id=cid)
        ob.name = newname
        # 修改属性
        ob.save()
        data = {'msg':'更新成功','code':0}
    except:
        data = {'msg':'更新失败','code':1}

    # 返回结果
    return JsonResponse(data)


models.py


# 商品分类模型
class Cates(models.Model):
    name = models.CharField(max_length=20)
    pid = models.IntegerField()
    path = models.CharField(max_length=50)
    
    ''' 无限分类
        id  name    pid  path
        1    服装     0    0,
        2    男装     1    0,1,
        3    西服     2    0,1,2,
        4    休闲西服  3    0,1,2,3,
        5    女装     1    0,1,
        6    裙子     5    0,1,5,
        7    超短裙    6   0,1,5,6,
    '''
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值