Django_实现新增功能

一、效果图

未进行前端美化。

点击后，出现如下弹窗。此处弹窗样式用的是管理系统admin自带的样式。

二、前端增加“新增”入口

ApiTest/apitest_manage.html
在搜索栏代码之后加入此段代码：

<!-- 增加api流程测试用例-->
<div style="float: right; width: 70%">

    <select name="ApiTest" id="id_ApiTest">
        <option value="" selected>-----接口流程测试用例-----</option>
    </select>
    {# 修改按钮 #}
    <a class="related-widget-wrapper-link change-related" id="change_id_ApiTest" data-href-template="/admin/ApiTest/apitest/__fk__/change/?_to_field=id&amp;_popup=1" title="更改选中的测试用例">
        <img src="/static/admin/img/icon-changelink.svg" alt="修改"/>
    </a>
    {# 新增按钮 #}
    <a class="related-widget-wrapper-link add-related" id="add_id_ApiTest" href="/admin/ApiTest/apitest/add/?_to_field=id&amp;_popup=1" title="新增测试用例">
        <img src="/static/admin/img/icon-addlink.svg" alt="增加"/>新增
    </a>
</div>

前端实现弹窗新增

head中加入以下代码，实现弹窗进行新增

<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css">
<script rel="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maxinum-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css" />
<meta name="robots" content="NONE,NOARCHIVE" />