# Django框架之后台分类管理简析
# index.html
{% extends 'myadmin/index.html' %}
{% block 'body' %}
<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">
<button type="button" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</button>
<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="class" data-am-selected="{btnSize: 'sm'}" style="display: none;">
<option value="username" {% if request.GET.class == 'username' %} selected {% endif %}>会员名</option>
<option value="phone" {% if request.GET.class == 'phone' %} selected {% endif %}>手机号</option>
<option value="sex" {% if request.GET.class == 'sex' %} 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 name="keywords" type="text" 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 types %}
<tr class="gradeX">
<td class="am-text-middle tid">{{ v.id }}</td>
<td class="am-text-middle typeedit">{{ v.name }}</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="{% url 'myadmin_typedel' v.id %}" class="tpl-table-black-operation-del">
<i class="am-icon-trash"></i> 删除
</a>
</div>
</td>
</tr>
{% endfor %}
<!-- more data -->
</tbody>
</table>
</div>
<div class="am-u-lg-12 am-cf">
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block 'js' %}
<script type="text/javascript">
var ytext = ''
// 获取typeedit 绑定双击事件
$('.typeedit').dblclick(function(){
// 获取当前的文件,创建一个输入框,value为原来的文本
ytext = $(this).text()
$(this).html('<input type="text" style="color:blue" value="'+ytext+'">')
$(this).find('input').select()
})
$('.typeedit').find('input').live('blur',function(){
// 绑定丧失焦点事件
// 判断是否更新了name
var xtext = $(this).val()
if (ytext == xtext) {
$(this).parent().html(ytext)
}else{
// 获取当前分类id
tid = $(this).parents('tr').find('.tid').text()
inp = $(this)
// 发送ajax修改name
$.get('{% url "myadmin_typeupdate" %}',{"id":tid,"name":xtext},function(data){
// 判断是否修改成功
if(data == 0){
inp.parent().html(xtext)
}else{
inp.parent().html(ytext)
}
})
}
})
</script>
{% endblock %}# add.html
{% extends 'myadmin/index.html' %}
{% block 'body' %}
<div class="container-fluid am-cf">
<div class="row">
<div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
<div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 部件首页 <small>Amaze UI</small></div>
<p class="page-header-description">Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件。</p>
</div>
<div class="am-u-lg-3 tpl-index-settings-button">
<button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
</div>
</div>
</div>
<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-fl">分类添加表单</div>
<div class="widget-function am-fr">
<a href="javascript:;" class="am-icon-cog"></a>
</div>
</div>
<div class="widget-body am-fr">
<form action="{% url 'myadmin_typeinsert' %}" method="post" enctype="multipart/form-data" class="am-form tpl-form-line-form">
{% csrf_token %}
<div class="am-form-group">
<label for="user-phone" class="am-u-sm-3 am-form-label">
所属分类</label>
<div class="am-u-sm-9">
<select name="pid" data-am-selected="{searchBox: 1}" style="display: none;">
<option value="0">顶级分类</option>
{% for v in types %}
<option value="{{ v.id }}">{{ v.name }}</option>
{% endfor %}
</select>
</div>
</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" >
</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>
</div>
</div>
</div>
</div>
</div>
{% endblock %}# edit.html
{% extends 'myadmin/index.html' %}
{% block 'body' %}
<div class="container-fluid am-cf">
<div class="row">
<div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
<div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 部件首页 <small>Amaze UI</small></div>
<p class="page-header-description">Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件。</p>
</div>
<div class="am-u-lg-3 tpl-index-settings-button">
<button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
</div>
</div>
</div>
<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-fl">分类编辑表单</div>
<div class="widget-function am-fr">
<a href="javascript:;" class="am-icon-cog"></a>
</div>
</div>
<div class="widget-body am-fr">
<form action="{% url 'myadmin_typeinsert' %}" method="post" enctype="multipart/form-data" class="am-form tpl-form-line-form">
{% csrf_token %}
<div class="am-form-group">
<label for="user-phone" class="am-u-sm-3 am-form-label">
所属分类</label>
<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" >
</div>
</div>
</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" >
</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>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
兄弟连学python
Python学习交流、资源共享群：563626388 QQ
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
