整体查询到的页面
<div class="widget-header"><i class="icon-list-ol"></i><h3>搜索条件</h3></div><div class="widget-content"><fieldset id="find"><div class="control-group"><label for="tname" class="control-label">流派</label><div class="controls form-group"><div class="input-group"><span class="input-group-addon"><iclass="icon-music"></i></span><input type="text" placeholder="如:摇滚" name="tname" value="${mq.tname}"id="tname" class="form-control"/></div></div></div></fieldset><div class="form-actions text-right"><div><button class="btn btn-primary" id="search">搜索</button><button id="addSong" class="btn btn-primary" data-target="#myModal2"type="button">添加流派</button><button id="toggleSearch" flag="2" class="btn btn-default" type="button">收缩↑</button></div></div></div><div class="widget-content"><div class="body"><table class="table table-striped table-images"style="color: white;font-size: 14px"><thead><tr><th class="hidden-xs-portrait">序号</th><th class="hidden-xs">流派</th><th class="hidden-xs">描述</th><th></th></tr></thead><tbody><c:forEach items="${page.list}" var="mtype" varStatus="status"><tr><td class="hidden-xs-portrait">${mtype.tid}</td><td class="hidden-xs-portrait">${mtype.tname}</td><td class="hidden-xs"> ${mtype.tdesc} </td><td><button class="btn btn-sm btn-primary" type="button" modify tid="${mtype.tid}" > 修改</button><button data-toggle="button" class="btn btn-sm btn-warning" tid="${mtype.tid}"> 删除</button></td></tr></c:forEach></tbody></table><jsp:include page="pagination.jsp"></jsp:include></div>
</div>
1.添加操作
<button id="addSong" class="btn btn-primary" data-target="#myModal2"type="button">添加流派</button>
添加我们使用layui的弹出层,预先定义好对应的div
var pop;
$("#addSong").click(function () {//创建一个弹出框pop = layer.open({//指定内容是一个 DOM 元素type: 1,//设置弹窗的大小area: [600, 350],//指定弹出框中的内容为 ID 为 mtypePop 的元素content: $('#mtypePop')});})
对应的弹窗
<div id="mtypePop" style="margin-right: 50px;margin-top: 50px; display: none"><form id="addMtypeForm" class="layui-form" method="post" action="/mtype/addMtype" lay-filter="example"><div class="layui-form-item"><label class="layui-form-label">流派</label><div class="layui-input-block"><input type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="请输入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">描述</label><div class="layui-input-block"><textarea style="color: black;" placeholder="请输入流派描述" class="layui-textarea" name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">添加流派</button></div></div></form>
</div>
点击添加流派的按钮,触发AJAX请求
//使用 Layui 的表单模块
layui.use('form', function () {var form = layui.form;//监听 ID 为 demo1 的表单提交事件,并将提交的数据传递给回调函数 dataform.on('submit(demo1)', function (data) {//layer.msg(JSON.stringify(data.field));$.ajax({url: "/mtype/addMtype",type: "post",//传递表单数据data: data.field,dataType: "text",success: function (text) {if (text == "success") {layer.msg("添加成功");layer.close(pop);}}})//阻止页面跳转 防止同步提交 使用ajax异步提交表单return false;});
});
将要添加的数据传递给后端
后端的Controller
//添加流派
@ResponseBody
@PostMapping("/addMtype")
public String addMtype(Mtype mt){mtypeService.insert(mt);return "success";
}
如果返回的字符串匹配,会显示“添加成功”的信息,并且进行页面刷新
Mapper映射文件进行相应的SQL操作
2.修改操作
<button class="btn btn-sm btn-primary" type="button" modify tid="${mtype.tid}" > 修改</button>
点击修改按钮,跳出弹窗
跳出弹窗的JS逻辑
var pop1;
$("[modify]").click(function () {var tid = $(this).attr("tid");$.ajax({//通过ID获取对应的流派信息url: "/mtype/getMtype",type: "post",data: {tid:tid},dataType: "json",success: function (jsonObj) {$("#tid").val(jsonObj.tid);$("#ptname").val(jsonObj.tname);$("#ptdesc").val(jsonObj.tdesc);}})pop1 = layer.open({//打开弹窗type: 1,area: [600, 350],content: $('#mtypePop1')});})
弹出层的div,修改的弹窗,通过提交表单的方式传递给前台
<div id="mtypePop1" style="margin-right: 50px;margin-top: 50px; display: none"><form id="updateMtypeForm" class="layui-form" method="post" action="/mtype/updateMtype" lay-filter="example"><input type="hidden" name="tid" id="tid"><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input id="ptname" type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="请输入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea id="ptdesc" style="color: black;" placeholder="请输入流派描述" class="layui-textarea"name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo2">修改流派</button></div></div></form>
</div>
修改的弹出层 js逻辑
var pop1;
$("[modify]").click(function () {var tid = $(this).attr("tid");$.ajax({url: "/mtype/getMtype",type: "post",data: {tid:tid},dataType: "json",success: function (jsonObj) {$("#tid").val(jsonObj.tid);$("#ptname").val(jsonObj.tname);$("#ptdesc").val(jsonObj.tdesc);}})pop1 = layer.open({type: 1,area: [600, 350],content: $('#mtypePop1')});})
先根据ID信息查询对应的流派信息,返回到修改的页面上
@ResponseBody
@PostMapping("/getMtype")
public Mtype getMtype(int tid){Mtype mtype=mtypeService.selectByPrimaryKey(tid);return mtype;
}
对应的弹出层
<div id="mtypePop1" style="margin-right: 50px;margin-top: 50px; display: none"><form id="updateMtypeForm" class="layui-form" method="post" action="/mtype/updateMtype" lay-filter="example"><input type="hidden" name="tid" id="tid"><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input id="ptname" type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="请输入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea id="ptdesc" style="color: black;" placeholder="请输入流派描述" class="layui-textarea"name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo2">修改流派</button></div></div></form>
</div>
进行修改逻辑的js
layui.use('form', function () {var form = layui.form;//监听提交form.on('submit(demo2)', function (data) {//layer.msg(JSON.stringify(data.field));$.ajax({url: "/mtype/updateMtype",type: "post",data: data.field,dataType: "text",success: function (text) {if (text == "success") {layer.msg("修改成功");layer.close(pop1);$("#txForm").submit();}}})return false;});
})
后台Controller
@ResponseBody
@PostMapping("/updateMtype")
public String updateMtype(Mtype mt){mtypeService.updateByPrimaryKeySelective(mt);return "success";
}
3.删除操作
点击删除按钮触发事件
删除的js
$(".btn-warning").click(function () {var tid = $(this).attr("tid");layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){$.ajax({url: "/mtype/delMtype",type: "post",data: {tid:tid},dataType: "text",success: function (text) {if (text == "success") {layer.msg("删除成功");layer.close(index);$("#txForm").submit();}}})});
})
删除后台Controller
@ResponseBody
@PostMapping("/delMtype")
public String delMtype(Integer tid){mtypeService.deleteByPrimaryKey(tid);//根据传过来的ID进行删除return "success";
}