Django：使用模态框新增数据，成功后提示“提交成功”，并刷新表格bootstrap-table数据...

最新推荐文章于 2024-08-07 22:52:45 发布

weixin_30318645

最新推荐文章于 2024-08-07 22:52:45 发布

阅读量1.6k

点赞数

文章标签： python javascript json ViewUI

原文链接：http://www.cnblogs.com/gcgc/p/11176389.html

版权

本文介绍了如何在Django项目中利用Bootstrap模态框实现数据新增功能。用户在模态框中输入信息，提交后显示'提交成功'提示，并自动刷新Bootstrap-table展示的数据。通过结合Python后端和JavaScript前端技术，实现了数据的实时更新。

摘要由CSDN通过智能技术生成

废话不说先看图：

代码实现：

　　前台代码：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
 <head>
        <meta charset="UTF-8" />
        <title>项目列表</title>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

{#        toastr弹框在线CDN#}
        <link href="https://cdn.bootcss.com/toastr.js/2.1.4/toastr.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/toastr.js/2.1.4/toastr.min.js"></script>

          <!--日历图标样式-->
{#        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
{#        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>#}
{#        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
        <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

 </head>

    <body>

{#        自定义搜索条件区域#}
    <div class="fixed-table-toolbar">
        <div class="pull-left search">
            <input id="search-keyword" class="form-control" placeholder="请输入项目名查询">
        </div>


        <div class="columns columns-left btn-group pull-left">
            <button id="search-button" type="button" class="btn btn-primary">查询</button>
        </div>
        <div class="columns columns-left btn-group pull-left">
            <button id="reset-button" type="button" class="btn btn-primary" onclick="clean()">重置</button>
        </div>


        <!-- 按钮触发模态框 -->
        <div class="columns columns-right btn-group pull-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增记录</button>
        </div>
<!-- 新增模态框（Modal） -->
        <form id="add-smoke-form" action="#" method="post" class="form-horizontal" role="form">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                            </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增记录
                </h4>
            </div>
            {# 模态框body #}
             <div class="modal-body" style="height: 100%;">

                <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">项目名称</label>
                    <div class="col-sm-7">
                    <select data-placeholder="选择项目..." class="form-control" name="project_name" id="project_name" required="required">
                                    <option value="">请选择项目</option>
                                    {% for key,value in project_data.items %}
                                    <option value="{
    { value }}" hassubinfo="true">{
   { key }}</option>
                                    {% endfor %}
                                </select>

                    </div>
                </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">版本号</label