在前后端分离书写中难免会遇到一个list页面点击修改操作需要传值的问题,那么我们如何进行传值和在列一个页面进行接受参数与后台交互呢?
下面书写一个修改操作的传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="assets/init/loadFiles.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
$(function(){
$.ajax({ //后台像页面传值ajax
type: "post",
dataType: "json",
contentType: "application/json;charset=utf-8",
url: "/getAll",
success: function (list) {
alert("操作成功")
var data = list;
for (var i= 0;i<data.length;i++) { //动态拼接表格
var str = "";
str += "<tr>" +
"<td >" + data[i].dev_name + "</td>" +
"<td >" + data[i].dev_ip + "</td>" +
"<td >" + data[i].manufacturer + "</td>" +
"<td >" + data[i].modle + "</td>" +
"<td >" + data[i].location + "</td>" +
"<td >" + data[i].svlan_cmcc + "</td>" +
"<td >" + data[i].svlan_cucc + "</td>" +
"<td >" + data[i].svlan_ct + "</td>" +
"<td >" + data[i].cvlan_num + "</td>" +
"<td >" + data[i].note + "</td>" +
"<td style='display:none'>" + data[i].id + "</td>" +
"<td ><i class='fa fa-trash-alt fa-button' id='delid'></i> <i class='fa fa-edit fa-button' id='upid'></i></td>"+
"</tr>";
var $str=$(str);
$("#oltlist").append($str); //将表格接入容器
}
},
error: function () {
alert("查询失败");
}
});
/* 点击删除事件 ()动态获取
"#oltlist" tbatle 的标签
".fa-trash-alt" 通过标签 获取按钮
$(this).parent().prev().html(); 当前 按钮位置(td)的兄弟节点的上一个位置处的数据 (上一个td) input 是val() 其他是HTML()
*/
$("#oltlist").on("click",".fa-trash-alt",function(){
var id = $(this).parent().prev().html();
alert(id);
$.ajax({
type: "post",
dataType: "json",
url: "/delById",
data: {"id":id},
success: function (msg) {
if (msg==1) {
alert("删除成功");
window.location.href ="olt-infolist.html";
}
},
error: function () {
alert("删除失败,请稍后重试");
}
});
});
/* 点击修改事件 */
$("#oltlist").on("click",".fa-edit ",function(){
//获取id
var id = $(this).parent().prev().html();
// 跳转页面 带上参数id
window.location.href ="olt-upolt.html?id="+id;
});
});
/* 通过dom关系来获取
$.each(json, function (i, obj) {
html += '<tr><td align="center" class="col-sm-1"></td>'
html += '<td align="center" class="col-sm-1" id="sn' + i + '">' + obj.staffnumber + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.department + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.post + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.name + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.sex + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.age + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.phone + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.idcard + '</td>'
html += '<td align="center" class="col-sm-1">' + obj.entrytime + '</td>'
html += '<td align="center" class="col-sm-1" id="ha"><a onclick="modify(this)">修改</a></td>'
html += '<td align="center" class="col-sm-1"></td></tr>'
})
$('#result').append(html);
window.modify = function (a) {
var tr = a.parentNode.parentNode;//获取a的父节点td,在获取td父节点得到tr
alert(tr.cells[1].innerHTML)//staffnumber //获取tr数组的索引为1的值 即obj.department的值
alert(tr.cells[2].innerHTML)//department
///...其他同行列值
} */
</script>
<body>
<div class="top-bar">
<ul class="breadcrumb top-breadcrumb">
<li><i class="fa fa-home"></i></li>
<li>工作台</li>
<li>表格样式</li>
<li>多功能表格</li>
</ul>
<ul class="top-toolbar">
</ul>
</div>
<div class="main-wrap">
<div class="panel panel-line" style="display:none;">
<div class="panel-heading">
test
<span class="desc bg-blue"></span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-mark col-xs-4 col-sm-3 col-md-3 col-lg-2 theme-16"></div>
</div>
</div>
</div>
<div class="alert alert-info" >
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>信息:</strong>这里可以放置表单提交反馈信息通知等!
</div>
<div class="toolbar-wrap"><!--搜索按钮结合体 start-->
<div class=" navbar-form navbar-left">
<!-- <button class="btn btn-default" ><span class="fa fa-check-square"></span> 全选</button> -->
<!--onclick="window.location='olt-addolt.html'"点击按钮页面跳转 -->
<button class="btn btn-default" onclick="window.location='olt-addolt.html'"><span class="fa fa-file"></span> 新建</button>
<!-- <button class="btn btn-default" data-toggle="modal" data-target="#myModal"><span class="fa fa-times"></span> 删除</button> -->
<button class="btn btn-default" onclick="window.location='olt-infolist.html'" ><span class="fa fa-sync-alt"></span> 刷新</button>
<!-- <div class="dropdown" >
<button type="button" class="btn btn-default" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">表单操作 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"> 全选</a></li>
<li><a href="#">刷新</a></li>
<li><a href="#">新建</a></li>
<li class="divider"></li>
<li><a href="#">批量编辑</a></li>
<li class="divider"></li>
<li><a href="#">删除</a></li>
</ul>
</div> -->
</div>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入关键字">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right" style="display: none;"><!--备份链接-->
<li><a href="#">测试链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">下拉菜单 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">删除</a></li>
<li><a href="#">关闭</a></li>
<li class="divider"></li>
<li><a href="#">取消</a></li>
</ul>
</li>
</ul>
</div><!--搜索按钮结合体 end-->
<div class="well well-simple">
<table class="table table-hover table-striped " border="1px">
<tr>
<th>设备姓名</th>
<th>设备ip</th>
<th>厂家</th>
<th>型号</th>
<th>位置</th>
<th>移动</th>
<th>联通</th>
<th>电信</th>
<th>数量</th>
<th>备注</th>
<th>操作</th>
</tr>
<tbody id="oltlist">
<!-- <tr>
<td><i class="fa fa-trash-alt fa-button"></i><i class="fa fa-edit fa-button"></i></td>
</tr> -->
</tbody>
</table>
</div>
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">...</a></li>
<li><a href="#">22</a></li>
<li><a href="#">下一页</a></li>
</ul>
<footer>
<hr>
<p class="pull-right"><a href="#" target="_blank">自动化办公信息系统</a></p>
<p>© 2015 <a href="#" target="_blank">aYin</a></p>
</footer>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">删除确认</h4>
</div>
<div class="modal-body">
<p class="error-text"><i class="fa fa-warning-sign modal-icon"></i>你确定要删除吗?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger">删除</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
<script type="text/javascript">
//$('.demo-cancel-click').click(function(){return false;});
$(function(){
$(".data-time").datetimepicker({
minView:'month',
//maxView:"year",
format: "dd MM yyyy - HH:ii P",
showMeridian: true,
language: 'zh-CN',
format: "yyyy-mm-dd",
autoclose: true,
viewSelect:'month',
todayBtn: true,
pickerPosition: "bottom-left"
});
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii"
});
$(".themeSwitch div").interaction({type:"radio"});
$(".fa-button").interaction({type:"button"});
});
</script>
在修改页面中我们向其他页面传了一个id进行操作,那么我们在列一个页面如何操作 呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<style type="text/css">
select{
border-radius:4px;
border-color:#ccc;
width: 100%;
height: 35px;
line-height: 35px;
padding-left: 10px;
}
#note{width: 100%;border-radius:4px;border-color:#ccc;}
#bottombutten{margin-left: 350px;}
</style>
<script src="assets/init/loadFiles.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
$(function(){
/* 获取跳转页面带来的id数据 */
var url=window.location.search; //获取url中"?"符后的字串
var oltid = url.substr(url.indexOf("=")+1);
alert(oltid);
$.ajax({
type:"post",
dataType:"json",
url:"/upolt",
data:{"id":oltid},
success:function (springBootOtl) {
//alert(springBootOtl);
var data=springBootOtl;
$("#dev_name").val(data.dev_name);
$("#dev_ip").val(data.dev_ip);
$("#manufacturer").val(data.manufacturer);
$("#modle").val(data.modle);
$("#location").val(data.location);
$("#svlan_cmcc").val(data.svlan_cmcc);
$("#svlan_cucc").val(data.svlan_cucc);
$("#svlan_ct").val(data.svlan_ct);
$("#cvlan_num").val(data.cvlan_num);
$("#note").val(data.note);
},
error:function () {
alert("查询失败");
}
});
/* 获取表单数据 封装 */
$("#up_btn").click(
function(){
var dev_name = ($("#dev_name").val());
var dev_ip = ($("#dev_ip").val());
var manufacturer = ($("#manufacturer").val());
var modle = ($("#modle").val());
var location = ($("#location").val());
var svlan_cmcc = ($("#svlan_cmcc").val());
var svlan_cucc = ($("#svlan_cucc").val());
var svlan_ct = ($("#svlan_ct").val());
var cvlan_num = ($("#cvlan_num").val());
var reg = /^[0-9]*$/;
if(cvlan_num==null||cvlan_num ==""){
cvlan_num = 0;
}else if (!reg.test(cvlan_num)) {
alert("请输入正确的客户数量")
return false
}
var note = ($("#note").val());
$.ajax({
type:"post",
dataType:"json",
url:"/upById",
data:{"id":oltid,
"dev_name":dev_name,
"dev_ip":dev_ip,
"manufacturer":manufacturer,
"modle":modle,
"location":location,
"svlan_cmcc":svlan_cmcc,
"svlan_cucc":svlan_cucc,
"svlan_ct":svlan_ct,
"cvlan_num":cvlan_num,
"note":note},
success:function (msg){
if (msg==1){
alert("操作成功");
if(confirm("修改成功,是否返回上一层?")){
self.location=document.referrer;
}
}
},
error:function (){
alert("修改失败");
}
});
});
});
</script>
<body>
<div class="top-bar">
<ul class="breadcrumb top-breadcrumb">
<li><i class="fa fa-home"></i></li>
<li>OLT管理</li>
<li>新增OLT信息</li>
</ul>
<ul class="top-toolbar">
</ul>
</div>
<div class="main-wrap">
<div class="panel panel-line" style="display:none;">
<div class="panel-heading">
test
<span class="desc bg-blue"></span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-mark col-xs-4 col-sm-3 col-md-3 col-lg-2 theme-16"></div>
</div>
</div>
</div>
<div class="alert alert-info" >
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>信息:</strong>这里可以放置表单提交反馈信息通知等!
</div>
<!--
<div class="toolbar-wrap">搜索按钮结合体 start
<ul class="nav navbar-nav navbar-right" style="display: none;">备份链接
<li><a href="#">测试链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">下拉菜单 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">删除</a></li>
<li><a href="#">关闭</a></li>
<li class="divider"></li>
<li><a href="#">取消</a></li>
</ul>
</li>
</ul>
</div> --><!--搜索按钮结合体 end-->
<div class="panel panel-line">
<div class="panel-body">
<table class="table-form">
<tr>
<th width="150">设备名称</th><td><input id ="dev_name" type="text" class="form-control" rplaceholder="请输入设备名称" required="required"/></td>
<th width="150">设备IP</th><td><input id ="dev_ip" type="text" class="form-control" placeholder="请输入设备IP" required="required"/></td>
</tr>
<tr>
<th>厂家</th><td >
<select id ="manufacturer" >
<option selected="selected" value="华为">华为</option>
<option value="中兴">中兴</option>
<option value="烽火">烽火</option>
</select></td>
<th>型号</th><td ><input id ="modle" type="text" class="form-control" placeholder="请输入设备型号" required="required"/></td>
</tr>
<tr>
<th>位置</th><td><input id ="location" type="text" class="form-control" placeholder="请输入位置"/></td>
<th>外层vlan(移动)</th><td><input id ="svlan_cmcc" type="text" class="form-control" /></td>
</tr>
<tr>
<th>外层vlan(联通)</th><td ><input id ="svlan_cucc" type="text" class="form-control" /></td>
<th>外层vlan(电信)</th><td ><input id ="svlan_ct" type="text" class="form-control" /></td>
</tr>
<tr>
<th>客户vlan数量</th><td ><input id ="cvlan_num" type="text" class="form-control" /></td>
<th>备注</th><td ><textarea id ="note" id="note"></textarea></td>
</tr>
</table><br>
<div class="col-xs-4" id="bottombutten">
<div class=" btn-group btn-group-justified opinion-button" role="group" aria-label="...">
<div class="btn-group active" role="group">
<input id="up_btn" type="button" class="btn btn-default" value="修改"></input>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" onclick="self.location=document.referrer;">返回</button>
</div>
</div>
</div>
</div>
</div>
<footer>
<hr>
<p class="pull-right"><a href="#" target="_blank">自动化办公信息系统</a></p>
<p>© 2015 <a href="#" target="_blank">aYin</a></p>
</footer>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">删除确认</h4>
</div>
<div class="modal-body">
<p class="error-text"><i class="fa fa-warning-sign modal-icon"></i>你确定要删除吗?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger">删除</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
<script type="text/javascript">
//$('.demo-cancel-click').click(function(){return false;});
$(function(){
$(".data-time").datetimepicker({
minView:'month',
//maxView:"year",
format: "dd MM yyyy - HH:ii P",
showMeridian: true,
language: 'zh-CN',
format: "yyyy-mm-dd",
autoclose: true,
viewSelect:'month',
todayBtn: true,
pickerPosition: "bottom-left"
});
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii"
});
$(".themeSwitch div").interaction({type:"radio"});
$(".fa-button").interaction({type:"button"});
});
</script>
获取值需要对url get 方式进行截取操作 获取自己想要的值,
那么我们在控制层又是这么操作的呢?、
package springBootOltPriject.olt.coltroller;
import java.util.List;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import springBootOltPriject.olt.service.OltService;
import springBootOltPriject.olt.vo.SpringBootOtl;
@MapperScan("springBootOltPriject.olt.dao")
//@Controller是这个注解可以return 页面
@RestController
@SpringBootApplication
@ComponentScan("springBootOltPriject.olt.service")
//@RequestMapping("/")
public class CotrollerDemo {
//注入OltService
@Autowired
private OltService oltService;
//根据id查询数据 ===================================================================
//@GetMapping("/upolt")
/**
*
* @param id
* @return
*/
@RequestMapping(value ="/upolt")
public SpringBootOtl getOltMappingById( int id) {
System.out.println(id);
SpringBootOtl springBootOtl= oltService.getOltMappingById(id);
return springBootOtl;
}
查询所有数据
//
// @RequestMapping("/oltEdit")
// public ModelAndView getAll(){
//
// ModelAndView view = new ModelAndView("oltEdit");
// //查询数据
// List<SpringBootOtl> list=oltService.getAll();
// view.addObject("list", list);
// return view;
// }
//查询所有数据 完成===================================================================
@RequestMapping("/getAll")
public List<SpringBootOtl> getAll(){
//查询数据
List<SpringBootOtl> list=oltService.getAll();
//测试
System.out.println(list.get(0));
return list;
}
//根据id删除数据 完成 ==============================================================
//@GetMapping("/delById")
@RequestMapping(value="/delById")
public int delById( int id){
//从数据库删除数据
oltService.delById(id);
return 1;
}
//根据id跟新数据 ==================================================================
//@GetMapping("/upById")
@RequestMapping(value="/upById")
public int upById( int id, SpringBootOtl springBootOtl ) {
//跟新数据
oltService.upById(springBootOtl);
return 1;
}
//添加数据 完成===================================================================
@RequestMapping("/save")
public int save( SpringBootOtl springBootOtl){
System.out.println(springBootOtl);
//保存数据
oltService.save(springBootOtl);
//return "redirect:/login";
return 1;
}
// @RequestMapping("/login")
// public String login(Model model ) {
// //查询数据
// List<SpringBootOtl> list=oltService.getAll();
// System.out.println(list.get(0));
// model.addAttribute("list", list);
// return "oltList1";
// }
}
一个简单的增删查改就这样完成了 !