帶有 Spring MVC 和 jQuery DataTable 的 Bootstrap Modal 彈出窗口

Question

在我的應用程序開發中（使用 Spring Boot、Bootstrap、jQuery 和 jdbcTemplate 制作），在將表單查詢為表格格式后，我有一些結果要顯示，為此我使用了 jQuery DataTable。 一切正常。

下一個任務是在表格上添加一列，帶有一個按鈕來編輯一些字段； 例如，對於事件數據，單擊按鈕必須可以修改 2 個值，注釋和狀態。

為了執行此操作，我將 Bootstrap modal（第一次，我是這個工具的新手）使用到帶有 DataTable 代碼的 js 文件中。

這是js文件的代碼：

var DTevents = false;
$(document).ready(function() {  

    DTevents = $('#eventsdata').DataTable( 
            { 
                "serverSide": true,
                "ajax":{
                            url: "../getevents.json",
                            type: "post",
                            "data": function (d)
                            {
                                d = $.extend(d, {statusname :  $('#statusname').val()}, {typename :  $('#typename').val()}, {infoname :  $('#infoname').val()},
                                                {notename :  $('#notename').val()}, {idname :  $('#idname').val()}, {username :  $('#username').val()}, 
                                                {hostname :  $('#hostname').val()});
                            }
                            
                       },
                "columns":  [
                    { "data": "date" },
                    { "data": "type" },
                    { "data": "name" },
                    { "data": "user_name" },
                    { "data": "status" },
                    { "data": "closing_date" },
                    { "data": "info" },
                    { "data": "note" },
                    { "render": function(o){
                        return '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>' +
                        '<div id="myModal" class="modal fade" role="dialog">' +
                        '<div class="modal-dialog">' +
                        '<div class="modal-content">' +
                              '<div class="modal-header">' +
                                '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                                '<h4 class="modal-title">Modal Header</h4>' +
                              '</div>' +
                              '<div class="modal-body">' +
                              '<form class="form-horizontal" role="form">' +
                              '<div class="form-group">' +
                                '<label  class="col-sm-2 control-label"' +
                                          'for="inputNotes">Notes</label>' +
                                '<div class="col-sm-10">' +
                                    '<input type="text" class="form-control"' + 
                                    'id="newnote" placeholder="Put here the note"/>' +
                                '</div>' +
                              '</div>' +
                              '<div class="form-group">' +
                                '<label for = "type" class = "col-sm-2 control-label">Status</label>' +
                             '<div class = "col-sm-10">' +
                            '<select class = "form-control" id = "typename" name="type options">' +
                            '<option value="open">open</option>' +
                                '<option value="closed">closed</option>' +
                            '</select>' +
                         '</div>' +
                              '</div>' +
                            '</form>' +
                            '</div>'  +
                              '</div>' +
                              '<div class="modal-footer">' +
                                '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                                '<button type="submit" class="btn btn-default" data-dismiss="modal">Save</button>' +
                              '</div>' +
                            '</div>' +
                          '</div>' +
                        '</div>';
                    } }
                ]
            } );
    } );

使用此代碼，如果我查詢表單，例如在 os 類型上，我將獲得以下輸出：

表結果：

彈出結果：

如您所見，我獲得了一個帶有表單編輯功能的彈出窗口。 沒關系。 所以有什么問題？

1. 太可怕了，對我來說，把Modals的代碼直接放在數據表的js文件里； 我想要一個外部文件來導入/包含到這個 js 文件中。 有可能實現這一目標嗎？

2. 這個表格是一個“空”表格； 我的意思是它不是真正的交互式。 如果我單擊保存按鈕，則不會進行任何修改； 我制作了 DAO 和控制器 Spring mvc，所以我必須將表單“鏈接”到這個。 在我項目的其余部分中，我很容易執行此操作，因為我使用了 jsp 文件； 但是這種形式當然不在 jsp 文件中。 那么，我的問題是：如果我把Modal的代碼放在一個jsp文件中，我可以在DataTable的js文件中使用這個文件嗎？如果不是，我怎樣才能讓這個表單真正具有交互性？

更新：在下面的回復之后，我以這種方式修改了我的代碼：

（來自數據列）

{ "render": function ( data, type, full) {
                        
                        return '<a class="btn btn-info btn-md">' + 'Edit' + '</a>';
                    }
                  }

（事件處理函數，其中#mymodal是模態的id，在另一個jsp 中定義。注意：目前我還沒有實現數據邏輯和發送到控制器，因為我想之前確保彈出窗口是打開的)

$("#eventsdata").on("click", ".btn btn-info btn-sm", function () {
    var html = "/jsp/editbutton.jsp";
    $("#eventsdata").load(html);
    $("#myModal").modal('show');
});

editbutton.jsp 是我放置模態代碼的文件，位於src/main/webapp/WEB-INF/jsp

但是，我的代碼不起作用； 沒有打開彈出模式。 我可以看到按鈕，但如果我點擊，什么也不會發生。 我錯了什么？

EDIT2：成立。 問題是雙重的：函數“on”的代碼在准備好的文檔之外； 並且按鈕類必須始終在 on 函數內，而不是：

".btn btn-info btn-sm"

但

".btn.btn-info.btn-md"

EDIT3：代碼現在是這樣的：

var DTevents = false; $(document).ready(function() {

DTevents = $('#eventsdata').DataTable( 
        { 
            "serverSide": true,
            "ajax":{
                        url: "../getevents.json",
                        type: "post",
                        "data": function (d)
                        {
                            d = $.extend(d, {statusname :  $('#statusname').val()}, {typename :  $('#typename').val()}, {infoname :  $('#infoname').val()},
                                            {notename :  $('#notename').val()}, {idname :  $('#idname').val()}, {username :  $('#username').val()}, 
                                            {hostname :  $('#hostname').val()});
                        }
                        
                   },
            "columns":  [
                { "data": "date" },
                { "data": "type" },
                { "data": "name" },
                { "data": "user_name" },
                { "data": "status" },
                { "data": "closing_date" },
                { "data": "info" },
                { "data": "note" },
                { "render": function ( data, type, full, meta) {
                    
                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModal'> Edit </button>";
                }
              }
            ]
        } ); 

});

實際問題是，兩種模式顯示解決方案（使用 jQuery 函數.on("click")和代碼中使用的一種， data-toggle='modal' data-target='#myModal' ）都沒有解決主要問題：如何用模態代碼加載外部jsp？

更具體地說，問題不在於有什么用（我想我可能會使用 jQuery 加載函數），而是在哪里使用它。 例如，如果我使用#eventsdata （即帶有表格標題的頁面的 id，我在其上使用數據表），則（當然）使用其他內容替換表格數據，這不是模態，因為我有一個空白頁）。

Answer 1

我想你應該加載

    "render": function ( data, type, full, meta ) {
          return <button type="button" id="modal_ +'+data.id+' " class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>';
       ....................
   }

並使用id=modal_1執行 ajax 加載此按鈕的特定數據 您可以剪切此字符串以獲取數據的 id

Answer 2

您可以像這樣添加自定義按鈕並向其添加事件

"render": function(data, type, full) {
    var str = "";
    if(data != null){
        str = "<input type='button' class='clsGuidelines'  value='View' />";
    }
    return str;
}

事件處理程序：

$("#eventsdata").on("click", ".clsGuidelines", function () {

    var iPos = $(this).closest("tr").index();
    var aData = $("#eventsdata").DataTable().fnGetData( iPos ); //get data of the clicked row
    // aData has all values for clicked row 
   // Open dialog or Modal here 
   // you can load your JSP page here and continue 


});

Answer 3

如果有人有這個問題，也許他們可以用其他方法解決它，就像這里解釋的那樣