带有 Spring MVC 和 jQuery DataTable 的 Bootstrap Modal 弹出窗口

Posted 2023-05-09

【中文标题】带有 Spring MVC 和 jQuery DataTable 的 Bootstrap Modal 弹出窗口

【英文标题】：Bootstrap Modal popup with Spring MVC and jQuery DataTable

【发布时间】：2017-12-06 13:48:15

【问题描述】：

在我的应用程序开发中（使用 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 类型上，我会获得以下输出：

表格结果：

弹出结果：

如您所见，我获得了一个带有表单编辑功能的弹出窗口。没关系。那么，有什么问题呢？

太可怕了，对我来说，把Modal的代码直接放在数据表的js文件里面；我想要一个外部文件来导入/包含到这个 js 文件中。有没有可能做到这一点？

这个表格是一个“空”的表格；我的意思是它不是真正的交互式。如果我单击保存按钮，则不会进行任何修改；我制作了 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，并且我在其上使用数据表），则（当然）用其他东西替换表格数据，这不是模态，因为我有一个空白页）。

【问题讨论】：

如果有人遇到这个问题，也许他们可以用其他方法解决它，就像这里解释的 ***.com/questions/70100248/…

【参考方案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>';
       ....................
   

并执行 ajax 来加载此按钮的数据，该按钮特定于 id=modal_1 您可以剪切此字符串以获取数据的 id

【参考方案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 


);

【讨论】：

嗯，有趣；但我不明白一件事：为什么在 var aData 我们有 $("#tblDosageList")？ tblDosageList 是什么？

在您的情况下只是一个示例 ID，它应该是 eventsdata .. 编辑检查...