Django_实现编辑和删除功能

柔光的暖阳◎ 2021-09-24 13:16 552阅读 0赞

##### 一、效果图 #####

点击【编辑】图标，弹窗显示编辑页面，且自动回填内容。如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70]  
点击【删除】图标，弹窗删除确认弹窗。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 1]

##### 二、前端显示“编辑”、“删除”入口 #####

{# 在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路径显示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 2]  
参数\_popup*=1代表去掉顶部  
如果不加此参数，页面显示如下。红色部分为去掉的部分。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 3]

#####  #####

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70]: /images/20210923/2c52dfb3342e4a2fbe1a7cb3fc25ebbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 1]: /images/20210923/77bec214844a47e09c9991dc031f6194.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 2]: /images/20210923/349bd88c56a845c2ab95d93116296e01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 3]: /images/20210923/3a12eecdd1bc4170b1e5b767c3fe9c84.png