<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>炼钢成分分析</title>
<meta charset="utf-8">
<title>炼钢成分分析</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:700px;color: black; background-color: white;}
#section2 {padding-top:50px;height:500px;color: black; background-color: white;}
</style>
<script type="text/javascript">
//出现本页面数据就同步显示在表格中
$(function(){
TSM_QPM_Q001();
});
//进行一个函数的调用
function TSM_QPM_Q001(){
$.ajax({
url:"http://localhost:8080/MESS/getData",
type:"get",
datatype:"json",
success:function(res){
var htmlStr ='';
for(var i=0;i < res.length;i++){
var plo = res[i].proNo;
//var wkStationNo = res[i].wkStationNo;
htmlStr += '<tr id="myLine_'+res[i].proNo+'">';
htmlStr += '<td><input type="checkbox" id="TQQ" name="chkItem" value ="'+plo+'"></td>';
htmlStr += '<td>'+res[i].proNo+'</td>';
htmlStr += '<td>'+res[i].wkStationNo+'</td>';
htmlStr += '<td>'+res[i].stGrdNo+'</td>';
htmlStr += '<td>'+res[i].cItemName+'</td>';
htmlStr += '<td>'+res[i].cItemValue+'</td>';
htmlStr += '<td>'+res[i].wkGroup+'</td>';
htmlStr += '<td>'+res[i].wkShift+'</td>';
htmlStr += '<td>'+res[i].delFlage+'</td>';
htmlStr += '<td>'+res[i].c_memd+'</td>';
htmlStr += '<td>'+res[i].c_delsapman+'</td>';
htmlStr += '<td>'+res[i].cDelsapdate+'</td>';
htmlStr += '<td>'+res[i].cTimestamp+'</td>';
htmlStr += '<td>'+res[i].cSampleTime+'</td>';
htmlStr += '<td>'+res[i].cSw01+'</td>';
htmlStr += '<td>'+res[i].cMin+'</td>';
htmlStr += '<td>'+res[i].cMax+'</td>';
htmlStr += '<td>'+res[i].l_interval+'</td>';
htmlStr += '<td>'+res[i].r_interval+'</td>';
//htmlStr += '<a href="javascript:del('+res[i].id+')">删除</a>';
htmlStr += '</tr>';
}
$("#myLine").html(htmlStr);
},
error:function(){
alert("出错了!");
}
});
}
//删除功能
$(function(){
var del;
$("#dell").click(function(){
$("input:checkbox:checked").each(function(index,element){
del = $("input:checkbox[name='chkItem']:checked").map(function(index,elem) {
return $(elem).val();
}).get().join(',');
})
alert(del);
$.ajax({
url:"http://localhost:8080/MESS/Q001_del_delete",
type:"post",
dataType:"json",
data:{"proNo":del},
success:function(rs){
if(rs.status == 0){
alert(rs.msg);
//为什么就是隐藏不了呢?
$("input:checkbox:checked").hide()
TSM_QPM_Q001();
}else{
alert(rs.msg);
TSM_QPM_Q001();
}
},
error:function(){
alert("删除加载失败 ");
}
});
});
});
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div>
<div class="collapse navbar-collapse dropdown" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">氩站监控图</a></li>
<li><a href="#section2">吹氩实绩</a></li>
<li><a href="#section3">吹氩运转</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section2" class="container-fluid">
<h1 class="bg-info text-muted">吹氩实绩</h1>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-12 column">
<div style="display:inline-block;">
<a href="TiaoJianselect.jsp"><button class="btn btn-primary btn-lg btn-sm" data-toggle="modal" data-target="#update_CR" id="CHAXUN">查询</button></a>
<a href="addTSM_QPM_Q001.jsp"><button class="btn btn-primary btn-lg btn-sm" data-toggle="modal" data-target="#update_CR">添加</button></a>
<button class="btn btn-primary btn-lg btn-sm" data-toggle="modal" data-target="#update_CR" id="dell">删除</button>
<a href="update.jsp?proNo=res[i].proNo"><button class="btn btn-primary btn-lg btn-sm" data-toggle="modal" data-target="#update_CR" id="updateCR">修改</button></a>
</div>
</div>
</div>
<h3 class="bg-info text-muted">炼钢成分标准表</h3>
<div style="height:280px;border:1px solid green; overflow:auto;">
<table class="table table-condensed table-hover table-bordered table-responsive text-center">
<thead>
<tr>
<th>操作</th>
<th>工序号</th>
<th>作业站号</th>
<th>钢种号</th>
<th>检验项目名称</th>
<th>检验值</th>
<th>班组</th>
<th>班次</th>
<th>删除标识</th>
<th>备注</th>
<th>删除人</th>
<th>删除时间</th>
<th>时间戳</th>
<th>取样时间</th>
<th>扩展字段</th>
<th>最小值</th>
<th>最大值</th>
<th>左区间</th>
<th>右区间</th>
</tr>
</thead>
<tbody id="myLine">
<!-- <tr>
<td><input type="button" value="删除" onclick=""><input type="button" value="修改" onclick=""></td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
如本图,我要实现一个修改功能,所以需要将选中复选框的这一行数据在另外一个页面显示出来,但是我现在的问题是想上述的代码中我这个修改的按钮所携带的数据在另一个页面上是无效的。。。。怎么将这个页面的数据带到另外一个页面??
先在携带的数据是在上面的ajax里面获取的数据好像没有获取到。。。
在url后面拼接,比如TiaoJianselect.jsp?name=值
先输出下你获取数据的方法是否正常,console.log一下 看是不是跟你传递的参数id一样,如果获取不到就是你的获取参数方法有问题
你到底是通过url携带参数传递??还是通过ajax方法的data参数传递?
难度是不很大,这里的传送数据跟表单传送数据很类似,但是不能够使用POST形式的传送数据,所以尽管不可以指定METHOD,但是你可以采用GET上传数据的形式,即在连接后面添加如:nextPage.jsp?name=数据,这样你在下一个页面直接使用$_GET(name)方法,这样你就可以把这个值获取到。
.jsp?name=${name} 类似于这种
在url 连接后面跟个数组,里边传个id 根据ID 用ajax 传到 控制器,处理,
定义一个点击修改的事件a,遍历复选框,如果复选框选中,把选中复选框对应的主键传给后台一个方法,后台根据主键查询出该条记录,封装到Model中,然后跳转到Update.jsp
修改页面获取model中的属性
.jsp?name=${name} 类似于这种
然后在下一个页面中 用${param.name} 可以获取
增修一般是一起的,参数为id,id为空为新增,后台通过id获取对象,将对象传到前台,id为空就new一个对象传到前台,网页列表增修百分之九十的都是这种方式
可以将参数给一个控件比如说:<input value="${proNo}" id = "id"}
然后再获取:$("#id").val()
URL带参数啊,这不就可以了
简单暴力一点,直接用cookie存,再用cookie取
1.url后面带参数(JSON.stringify 和 JSON.parse) 2. cookie 3.localstorage/sessionstorage
上面URL的参数proNO=res[i].proNo是什么鬼,你应该找到被打钩的TQQ,然后知道是第几行,最好在开始拼接TD的时候就按行设定每个TD的id或者value,这样方便找到,然后或者我建议把找到的proNO加逗号拼接成一个String传递到下个页面,下个页面在按照逗号分隔就可以了。
你这个已经通过url地址传过去了,只是在那个页面接收的问题了。我这里帮你写个通用接收值的方法
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
使用:
var proNo = getUrlParam('proNo');
这样就可以接收到那个页面传过来的参数了