Question

在我的应用程序开发中（使用Spring Boot，Bootstrap，jQuery和jdbcTemplate制作），我在查询表格格式后显示了一些结果，为了实现这一点，我使用了jQuery DataTable。一切都很完美。

下一个任务是在表格上添加一个列，用一个按钮来编辑一些字段;例如，对于事件数据，单击按钮必须可以修改2个值，注释和状态。

为了执行此操作，我使用Bootstrap模式（第一次使用此工具，我是一个新手）使用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类型上，我获得此输出：

Table results Popup results

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

对我来说，可怕的是，将Modals的代码直接放在数据表的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>';
                    }
                  }

（事件heandling的函数，其中#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，并且我使用数据表），那么（当然）用其他东西8表示数据的清除，这不是模态，因为我有一个空白页面）。

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>';
       ....................
   }

并执行ajax以使用id=modal_1加载此按钮的数据您可以剪切此字符串以获取数据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 


});

使用Spring MVC和jQuery DataTable的Bootstrap Modal弹出窗口

2 个答案: