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, '''