[英]Bootstrap Modal popup with Spring MVC and jQuery DataTable
在我的应用程序开发中(使用 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">×</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 类型上,我将获得以下输出:
如您所见,我获得了一个带有表单编辑功能的弹出窗口。 没关系。 所以有什么问题?
太可怕了,对我来说,把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>';
}
}
(事件处理函数,其中#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,我在其上使用数据表),则(当然)使用其他内容替换表格数据,这不是模态,因为我有一个空白页)。
我想你应该加载
"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
您可以像这样添加自定义按钮并向其添加事件
"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
});
如果有人有这个问题,也许他们可以用其他方法解决它,就像这里解释的那样
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.