04我们已经实现了新增部门的功能,下面开始修改部门模块的实现。
按道理来说,应该是做成弹框样式的,通过ajax悄咪咪的发数据,然后更新前端数据,但是考虑到实际情况,先用页面跳转的方式实现,后面再用ajax的方式优化一下。
下面开始修改部门的操作。
首先给每一列数据新增一个操作动作,即删除/编辑。
{% extends 'base.html' %}{% block content %}<div class="container-fluid"><div style="margin-bottom: 10px" class="clearfix"><div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading"><a class="btn btn-primary" href="/dept/add/" role="button">添加部门</a></div><div class="panel-body"><p>部门列表</p></div><!-- Table --><table class="table"><thead><tr><th>ID</th><th>name</th><th>head</th><th>phone</th><th>email</th><th>address</th><th>操作</th></tr></thead><tbody>{% for obj in queryset %}<tr><td>{{ obj.id }}</td><td>{{ obj.name }}</td><td>{{ obj.head }}</td><td>{{ obj.phone }}</td><td>{{ obj.email }}</td><td>{{ obj.address }}</td><td><a class="btn btn-success" href="/dept/{{ obj.id }}/edit_detail/" role="button">编辑部门</a><a class="btn btn-danger" href="/#" role="button">删除部门</a></tr>{% endfor %}</tbody></table></div></div></div>{% endblock %}
效果如下:
下面我们来实现编辑的功能
配置URL路径
urlpatterns = [# 部门管理path("dept/list/", dept.dept_list),path("dept/add/", dept.dept_add),path("dept/<int:nid>/edit_detail/", dept.dept_editdetail),
]
定义dept_editdetail函数
"""修改部门"""
def dept_editdetail(request, nid):return render(request, 'dept_editdetail.html')
定义dept_editdetail.html
主要用于展示一个包含表单的页面:
1 继承基础模板:{% extends 'base.html' %} 表示该页面继承自 base.html 模板。
2 定义内容块:{% block content %}...{% endblock %} 定义了一个名为 content 的块,用于填充 base.html 中对应的内容区域。
3 显示标题:通过 {{ title }} 显示从 admin_add() 函数返回的标题。
4 生成表单:使用 {% csrf_token %} 添加 CSRF 保护;通过循环 {% for field in form %} 动态生成表单字段及其标签、错误信息。
5 提交按钮:提供一个“保存”按钮用于提交表单。
{% extends 'base.html' %}{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading"><!--title从admin_add()的return返回值中获取,通过模板变量title--><h4 class="panel-title">{{ title }}</h4></div></div><div class="panel-body"><form method="post" action="" novalidate><!-- 如果在django中以post 方式提交表单,需要添加csrf_token -->{% csrf_token %}{% for field in form %}<div class="form-group"><label class="form-control">{{ field.label }}</label>{{ field }}<div class="text-danger">{{ field.errors.as_text }}</div></div>{% endfor %}<button type="submit" class="btn btn-success">保 存</button></form></div></div>
{% endblock %}
重新回到dept_editdetail函数,编写业务逻辑
1 通过nid获取指定ID的部门对象。
2 若对象不存在,重定向至部门列表页。
3 对GET请求,生成编辑表单并渲染页面。
4 对POST请求,验证表单数据后更新数据库或返回错误信息。
def dept_editdetail(request, nid):title = "修改部门"# 根据id,获取当前数据row_obj = models.Dept.objects.using('default').get(id=nid)print("row_obj", row_obj)# 如果数据不存在,则返回部门列表if not row_obj:print("数据不存在")return redirect('/dept/list')# 获取表单信息if request.method == 'GET':form = DeptEditModelForm(instance=row_obj)return render(request, 'dept_editdetail.html', {'form': form, 'title': title})form = DeptEditModelForm(data=request.POST, instance=row_obj)# print("当前的form", form)print("form.errors", form.errors)if form.is_valid():form.save()return redirect('/dept/list')return render(request, 'dept_editdetail.html', {'form': form, 'title': title})
效果如下:
我们舱室修改这条数据的病区名称,从1病区改成10病区试试
发现是可以实现修改的。