Bootstrap Modal弹出式MVC和jQuery数据表

Question

在我的应用程序开发（使用Spring Boot，Bootstrap，jQuery和jdbcTemplate制作）中，我有一些结果在将表格格式转换为表格格式后实现，为了实现这一点，我使用了jQuery DataTable 。所有的作品完美。

nex任务是用一个按钮在表格上添加一列来编辑一些文件;例如对于事件数据，单击该按钮它必须可以修改2个值，注释和状态。 为了执行此操作，我使用Bootstrap模式（首次将newbee与此工具一起使用）导入带有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型，i得到这样的输出：

Table results Popup results

正如你所看到的，我通过表单编辑获得弹出窗口。没关系。所以有什么问题？

1. 对我来说，这很可怕，把Modals的代码直接放在数据表的js文件中;我想有一个外部文件导入/包含到这个js文件。是否有可能实现这一目标？

2. 此表单是一个“空”形式;我的意思是它没有真正的互动。如果我点击保存按钮，不做任何修改;我制作了DAO和控制器Spring mvc，所以我必须将表单“链接”到此。 在我的其余项目中，我轻松执行此操作，因为我使用jsp文件;但是这种形式当然不在jsp文件上。所以，我的问题是：如果我把Modal的代码放在一个jsp文件中，我可以在DataTable的js文件中使用这个文件吗？如果不是，我怎样才能使这种形式真正地交互？

UPDATE：后下方的反应，我修改了代码，以这样的方式

（从数据列）

{ "render": function (data, type, full) { 

         return '<a class="btn btn-info btn-md">' + 'Edit' + '</a>'; 
        } 
        } 

（事件功能heandling，其中#mymodal是的标识modal，在另一个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”的代码在准备好的文档之外;和按钮类必须是，始终里面的函数，而不是：

".btn btn-info btn-sm" 

但

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

EDIT3：现在代码是这样的：

VAR DTevents = FALSE; $（文件）。就绪（函数（）{

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以及我使用数据表格的那个页面的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 


});