一 编写视图函数mysite/article/views.py
@login_required(login_url='/account/login')
@require_POST
@csrf_exempt
def del_article_column(request):
column_id = request.POST["column_id"]
try:
line = ArticleColumn.objects.get(id=column_id)
# 删除该记录
line.delete()
return HttpResponse("1")
except:
return HttpResponse("2")
二 编写URL mysite/article/urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^article-column/$', views.article_column, name="article_column"),
url(r'^rename-column/$', views.rename_article_column, name="rename_article_column"),
url(r'^del-column/$', views.del_article_column, name="del_article_column"),
]
三 编写模板文件mysite/templates/article/column/article_column.html
{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %} {% block content %}
<div>
<p class="text-right">
<button id="add_column" onclick="add_column()" class="btn btn-primary">添加栏目</button>
</p>
<table class="table table-hover">
<tr>
<td>序号</td>
<td>栏目名称</td>
<td>操作</td>
</tr>
{% for column in columns %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ column.column }}</td>
<td>
<a name="edit" href="javascript:" onclick="edit_column(this, {{ column.id }})">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a name="delete" href="javascript:" onclick="del_column(this, {{ column.id }})">
<span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span>
</a>
</td>
</tr>
{% empty %}
<p>还没有设置栏目,太懒了。</p>
{% endfor %}
</table>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
function add_column() {
var index = layer.open({
type: 1,
skin: "layui-layer-rim",
area: ["400px", "200px"],
title: "新增栏目",
content: '<div class="text-center" style="margin-top:20px">\
<p> 请输入新的栏目名称</p>\
<p>{{ column_form.column }}</p></div > ',
btn: ['确定', '取消'],
yes: function (index, layero) {
column_name = $('#id_column').val();
$.ajax({
url: '{% url "article:article_column" %}',
type: 'POST',
data: { "column": column_name },
success: function (e) {
if (e == "1") {
parent.location.reload();
layer.msg("成功添加");
} else {
layer.msg("此栏目已有,请更换名称")
}
},
});
},
btn2: function (index, layero) {
layer.close(index);
}
});
}
function edit_column(the, column_id){
var name = $(the).parents("tr").children("td").eq(1).text();
var index = layer.open({
type: 1,
skin: "layui-layer-rim",
area: ["400px", "200px"],
title: "编辑栏目",
content: '<div class="text-center" style="margin-top:20px"> <p>请编辑的栏目名称</p><p><input type="text" id="new_name" value="'+name+'"></p> </div>',
btn:['确定', '取消'],
yes: function(index, layero){
new_name = $("#new_name").val();
$.ajax({
url: "{% url 'article:rename_article_column' %}",
type: "POST",
data: {"column_id": column_id, "column_name": new_name},
success: function(e){
if(e=="1"){
parent.location.reload();
layer.msg("修改成功");
}else{
layer.msg("新的名称没有保存,修改失败。")
}
},
});
},
});
}
function del_column(the, column_id){
var name = $(the).parents("tr").children("td").eq(1).text();
layer.open({
type: 1,
skin: "layui-layer-rim",
area: ["400px", "200px"],
title: "删除栏目",
content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除{'+name+'}栏目</p></div>',
btn:['确定', '取消'],
yes: function(){
$.ajax({
url: '{% url "article:del_article_column" %}',
type:"POST",
data: {"column_id":column_id},
success: function(e){
if(e=="1"){
parent.location.reload();
layer.msg("has been deleted.");
}else{
layer.msg("删除失败");
}
},
})
},
});
}
</script>
{% endblock %}
四 测试