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>
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)
# 商品分类模型
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,
'''