Django_实现编辑和删除功能

一、效果图

点击【编辑】图标,弹窗显示编辑页面,且自动回填内容。如下图:
Django_实现编辑和删除功能_第1张图片
点击【删除】图标,弹窗删除确认弹窗。
Django_实现编辑和删除功能_第2张图片

二、前端显示“编辑”、“删除”入口
{# 在table的<thead>里加入:#}
<th>编辑th><th>删除th>

{# 在table的<tbody>里加入:#}
<td><a style="color: lightblue" class="related-widget-wrapper-link" add-related id="add_id_Apis" href="../admin/ApiTest/apitest/{{ apitest.id }}/change/?_to_field=id&_popup=1">
<img src="/static/admin/img/icon-changelink.svg"/>a>td>
<td><a style="color: lightblue" class="related-widget-wrapper-link" add-related id="add_id_ApiTest" href="../admin/ApiTest/apitest/{{ apitest.id }}/delete/?_to_field=id&_popup=1">
<img src="/static/admin/img/icon-deletelink.svg" />a>td>

href的路径为管理系统https://localhost:8000/admin/ApiTest/apitest/1/change/?_to_field=id&popup=1下默认的路径。输入href路径显示如下:
Django_实现编辑和删除功能_第3张图片
参数_popup
=1代表去掉顶部
如果不加此参数,页面显示如下。红色部分为去掉的部分。
Django_实现编辑和删除功能_第4张图片

想要弹窗显示,需要加对应的一系列script脚本。
建议先阅读上一篇博客内容:https://blog.csdn.net/weixin_38851970/article/details/107560983

你可能感兴趣的:(自动化测试平台,Django,html,django)