Django：使用模態框新增數據，成功後提示「提交成功」，並刷新表格bootstrap-table數據

時間 2019-11-22

標籤 django 使用模態新增數據成功提示提交刷新表格 bootstrap table 欄目 Python 简体版

原文原文鏈接

廢話不說先看圖：javascript

代碼實現：css

　　前臺代碼：html

{% 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>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="version" id="version" required="required"
                               placeholder="請輸入當前版本號">
                        </input>
                    </div>
                </div>

                 <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">轉測時間</label>
                     <div class='input-group col-sm-7 date' id='datetimepicker2'>
{#                     <div class="col-sm-7" id='datetimepicker2'>#}
                         <input type='text' class="form-control" name="submit_test_time" id="submit_test_time" required="required">
                         <span class="input-group-addon">
                             <span class="glyphicon glyphicon-calendar"></span>
                         </span>
                     </div>

                 </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">用例總數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="case_num" id="case_num" required="required" oninput="value=value.replace(/[^\d]/g,'')"
                               placeholder="請輸入冒煙用例總數">
                        </input>
                    </div>
                </div>

                 <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">執行總數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="executed_num" id="executed_num" required="required" oninput="value=value.replace(/[^\d]/g,'')"
                               placeholder="請輸入已執行用例數">
                    </div>
                </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">成功數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="pass_num" id="pass_num" required="required" oninput="value=value.replace(/[^\d]/g,'')"
                               placeholder="請輸入已執行成功數">
                        </input>
                    </div>
                </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">失敗數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="fail_num" id="fail_num" required="required" oninput="value=value.replace(/[^\d]/g,'')"
                               placeholder="請輸入已執行失敗數">
                        </input>
                    </div>
                </div>


            </div>
{#            模態框底部#}
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <input type="button" data-dissmiss="modal" onclick="add_smoke()" class="btn btn-primary"value="提交">
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
{##}
</form>



        <!-- 修改數據模態框（Modal） -->
        <form action="/update_smoke/" method="post" class="form-horizontal" role="form">
            <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" 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="updateModalLabel">
                    修改項目
                </h4>
            </div>
            {# 模態框body #}
             <div class="modal-body" style="height: 100%;">


                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">項目名稱</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="update_project_name" id="update_project_name" readonly="readonly">
                    </div>
                </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">版本號</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="update_version" id="update_version"
                               placeholder="請輸入當前版本號">
                        </input>
                    </div>
                </div>

                 <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">轉測時間</label>
{#                    <div class="col-sm-7">#}
{#                        <input type="text" class="form-control"  name="tableName"#}
{#                               placeholder="請輸入項目名，僅限輸入英文字符">#}
{#                    </div>#}

                     <div class='input-group date' id='datetimepicker1'>
                         <input type='text' class="form-control" name="update_submit_test_time" id="update_submit_test_time">
                         <span class="input-group-addon">
                             <span class="glyphicon glyphicon-calendar"></span>
                         </span>
                     </div>

                     </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">用例總數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="update_case_num" id="update_case_num"
                               placeholder="請輸入冒煙用例總數">
                        </input>
                    </div>
                </div>

                 <div class="form-group">
                    <label for="firstname" class="col-sm-3 control-label">執行總數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="update_executed_num" id="update_executed_num"
                               placeholder="請輸入項目經理名">
                    </div>
                </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">成功數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="update_pass_num" id="update_pass_num"
                               placeholder="請輸入項目描述">
                        </input>
                    </div>
                </div>

                <div class="form-group">
                    <label for="lastname" class="col-sm-3 control-label">失敗數</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control"  name="update_fail_num" id="update_fail_num"
                               placeholder="請輸入項目描述">
                        </input>
                    </div>
                </div>


            </div>
{#            模態框底部#}
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <input type="button" class="btn btn-primary"value="提交"/>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
{##}
</form>

</div>


{#        bootstrap table自動渲染區域#}
        <table id="mytab" class="table table-hover"></table>

    </body>

        <script type="text/javascript">

                    $('#mytab').bootstrapTable({
                        {#所有參數#}
                        {#url: "{% static 'guchen_obj.json' %}",     //請求後臺的URL（*）或者外部json文件，json內容若爲json數組[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，#}
                                                                        //且鍵的名字必須與下方columns的field值同樣，同時sidePagination須要設置爲client或者直接註釋掉，這樣前臺才能讀取到數據，且分頁正常。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//當json文件內容爲json對象時：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//分頁要寫爲server，可是server若是沒有處理的話,會在第一頁顯示全部的數據，分頁插件不會起做用

                        url:"/get_smoke_data",                     //從後臺獲取數據時，能夠是json數組，也能夠是json對象
                        dataType: "json",
                        method: 'get',                      //請求方式（*）
                        toolbar: '#toolbar',                //工具按鈕用哪一個容器
                        striped: true,                      //是否顯示行間隔色
                        cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                        pagination: true,                   //是否顯示分頁（*）
                        sortable: true,                     //是否啓用排序
                        sortOrder: "asc",                   //排序方式
                        {#queryParams: oTableInit.queryParams,//傳遞參數（*）#}
                        {#sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）,數據爲json數組時寫client，json對象時（有total和rows時）這裏要爲server方式，寫client列表無數據#}
                        pageNumber: 1,                       //初始化加載第一頁，默認第一頁
                        pageSize: 5,                       //每頁的記錄行數（*）
                        pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                        {#search: true,                       //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大#}
                        strictSearch: true,
                        showColumns: true,                  //是否顯示全部的列
                        showRefresh: true,                  //是否顯示刷新按鈕
                        minimumCountColumns: 2,             //最少容許的列數
                        clickToSelect: true,                //是否啓用點擊選中行
                        {#height: 500,                        //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度#}
                        uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列
                        showToggle: false,                    //是否顯示詳細視圖和列表視圖的切換按鈕
                        cardView: false,                    //是否顯示詳細視圖
                        detailView: false,                   //是否顯示父子表
                        idField: 'project_name', //指定主鍵
                        singleSelect: true, //開啓單選,想要獲取被選中的行數據必需要有該參數

                        //獲得查詢的參數
                        queryParams: function (params) {
                            //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
                            var query_params = {
                                rows: params.limit,                         //頁面大小
                                page: (params.offset / params.limit) + 1,   //頁碼
                                sort: params.sort,      //排序列名
                                sortOrder: params.order, //排位命令（desc，asc）

                                //查詢框中的參數傳遞給後臺
                                search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數
                            };
                            return query_params;
                        },

                        columns: [
                            {
                                checkbox:true  //第一列顯示覆選框
                             },

                            {
                                field: 'project_name',  //返回數據rows數組中的每一個字典的鍵名與此處的field值要保持一致
                                title: '項目名'
                            },
                            {
                                field: 'version',
                                title: '版本'
                            },
                            {
                                field: 'submit_test_time', // 須要序列化，暫時隱藏
                                title: '轉測時間'
                             },
                            {
                                field: 'case_num',
                                title: '用例總數'
                            },
                            {
                                field: 'executed_num',
                                title: '已執行'
                            },
                            {
                                field: 'pass_num',
                                title: '經過數'
                            },
                            {
                                field: 'fail_num',
                                title: '失敗數'
                            },
                            {
                                field: 'operate',
                                title: '操做',
                                width: 120,
                                align: 'center',
                                valign: 'middle',
                                formatter: actionFormatter,
                             },
                        ],
                    });


                //操做欄的格式化,value表明當前單元格中的值，row表明當前行數據，index表示當前行的下標
                function actionFormatter(value, row, index) {
                    var id = index;
                    var data = JSON.stringify(row);
                    var result = "";
                    {#result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";#}
                    {#result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + JSON.stringify(row) + "','" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";#}
                    result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + row + "','" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";
                    {#result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"edit()\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";#}
                    {#result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>";#}
                    return result;

                }

                // getData方法獲取所有頁面數據後，將data轉爲json對象，使用index當前行號做爲下標獲取對應數據
                function EditViewById(row, index){
                    var data = JSON.stringify($("#mytab").bootstrapTable('getData')); //獲取所有數據
                    var data_json = JSON.parse(data); //data_json和data_json2同樣都是json對象
                    console.log(data_json);
                    //因爲data2已是對象了，alert不能顯示對象只能顯示爲[object Object],須要控制檯打印
                    {#alert(data_json[0]); #}
                    //根據index找到對應行數據，填充數據到修改模態框
                    $("#update_project_name").val(data_json[index].project_name);
                    $("#update_submit_test_time").val(data_json[index].submit_test_time);
                    $("#update_case_num").val(data_json[index].case_num);
                    $("#update_executed_num").val(data_json[index].executed_num);
                    $("#update_pass_num").val(data_json[index].pass_num);
                    $("#update_fail_num").val(data_json[index].fail_num);

                    //彈出修改模態框，非新增模態框
                    $('#updateModal').modal('show')
                }


                // 搜索查詢按鈕觸發事件
                $(function() {
                    $("#search-button").click(function () {
                        $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
                        $('#search-keyword').val()
                    })
                })

                //重置搜索條件
                function clean(){
                    //先清空
                    $('#search-keyword').val('');
                    //清空後查詢條件爲空了，再次刷新頁面，就是所有數據了
                    $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
                }

                // 新增選擇時間日期
                $(function () {
                    $('#datetimepicker2').datetimepicker({
                        format: 'YYYY-MM-DD hh:mm',
                        locale: moment.locale('zh-cn')
                    });
                });

                // 修改項目選擇時間日期
                $(function () {
                    $('#datetimepicker1').datetimepicker({
                        format: 'YYYY-MM-DD hh:mm',
                        locale: moment.locale('zh-cn')
                    });
                });

        </script>


{#模態框form表單提交修改成ajax提交爲了新增成功後根據後端返回增長提示#}
<script type="text/javascript">

    {#設置彈出提示框屬性#}
    toastr.options = {
        closeButton: true,
        debug: true,
        progressBar: true,
        positionClass: "toast-top-center",
        onclick: null,
        showDuration: "300",
        hideDuration: "1000",
        timeOut: "2000",
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };

        {#提交數據函數#}
        function add_smoke() {
            $.ajax({
            //幾個參數須要注意一下
                cache:false,
                type: "POST",//方法類型
                dataType: "json",//預期服務器返回的數據類型
                url: "/add_smoke/" ,//url
                data: $('#add-smoke-form').serialize(), //將模態框的form表單數據序列化，以便提交到後臺
                async:false,  //必需要爲false,必須必須

                success: function (data) {
                    console.log(data);//打印服務端返回的數據(調試用)
                    if(data.status == "success"){

                        {#關閉模態框並清除框內數據，不然下次打開仍是上次的數據#}
                        document.getElementById("add-smoke-form").reset();
                        $('#myModal').modal('hide');

                        {# 判斷確實正確入庫以後提示#}
                        toastr.success('提交數據成功');

                        {#刷新表格數據#}
                        $("#mytab").bootstrapTable('refresh');

                     }
                 },
                error : function() {
                    toastr.warning("請輸入全部數據");
                 }
            });
        }
    </script>

</html>

後臺代碼：java

def add_smoke(request):
    '''
        新增冒煙測試記錄
        :param request:
        :return:
        '''
    db = pymysql.connect("localhost", "root", "***", "*****", charset='utf8')
    cursor = db.cursor()
    if request.method == "POST":
        project_name = request.POST.get("project_name", None)
        version = request.POST.get("version", None)
        submit_test_time = request.POST.get("submit_test_time", None)
        case_num = request.POST.get("case_num", None)
        executed_num=request.POST.get("executed_num", None)
        pass_num=request.POST.get("pass_num", None)
        fail_num=request.POST.get("fail_num", None)
        print project_name, submit_test_time,case_num,executed_num
        add_smoke_sql = "INSERT INTO smoke_test VALUES('%s', '%s','%s', '%s', '%s', '%s', '%s')" % (project_name, version, case_num, executed_num, pass_num, fail_num, submit_test_time)
        cursor.execute(add_smoke_sql)
        # 前往不要忘了commit，要不代碼不報錯，數據也不入庫
        db.commit()
        print "已提交數據庫"
        cursor.close()
        db.close()
    return HttpResponse(json.dumps({'status':'success'}))