gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 03:57:19 26 4
gpt4 key购买 nike

在我的应用程序开发中(使用 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>';
} }
]
} );
} );

使用此代码,如果我查询表单(例如在操作系统类型上),我将获得以下输出:

表格结果:
enter image description here

弹出结果:
enter image description here

如您所见,我获得了一个带有表单编辑的弹出窗口。没关系。那么问题出在哪里呢?

  1. 这对我来说太可怕了,直接把Modals的代码放在数据表的js文件里;我想要一个外部文件来导入/包含到这个 js 文件中。可以实现这个目标吗?

  2. 此表单是一个“空”表单;我的意思是它不是真正的互动。如果我点击保存按钮,则不会进行任何修改;我制作了 DAO 和 Controller 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中定义。注意:目前我还没有实现数据逻辑和发送到 Controller ,因为我之前要确保弹出窗口已打开)

$("#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;$(文档).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>';
....................
}

并使用ajax加载特定于id=modal_1的该按钮的数据你可以剪切这个字符串来获取数据的id

关于javascript - 使用 Spring MVC 和 jQuery DataTable 的 Bootstrap Modal 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44883076/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com