您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家分享的是有关layer页面跳转中如何获取html子节点元素的值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
1、jsp页面，携带值跳转到新页 original.jsp
var btnClick = {'click .shownewPage':function (e, value, row, index) {//点击按钮时触发时间
var Id = row.Id;
layer.open({
title: '跳转到新页',
type: 2,
content: '/switch/switchAction!getNewPage.do?Id='+Id, //struts配置文件指定的跳转路径
area: ['970px', '610px'],
shadeClose: true //点击遮罩关闭
});
}};2、后台跳转类 SwitchAction.java
@Scope(value = "prototype")
@Controller("SwitchAction ")
public class SwitchAction implements ServletRequestAware, ServletResponseAware, ModelDriven{
protected HttpServletRequest request;
protected HttpServletResponse response;
public String getNewPage(){
String Id = request.getParameter("Id"); //获取传递的参数
request.setAttribute("Id", Id); //设置属性值，传递参数
return "newPage"; //struts配置文件中跳转新页指定返回字符串
}
public String getnewHtml(){
JSONObject json = new JSONObject();
String Id = request.getParameter("Id");
PageRecord pageRecord = pageService.getObjectById(Id); //根据Id获取表内容
StringBuffer newHtml= new StringBuffer(pageRecord .getnewHtml);//得到表中String类型的html字符串
try {
response.getWriter().print(newHtml.toString()); //将html的字符串输出到页面
} catch (IOException e) {
json.put("success", false);
e.printStackTrace();
}
return null;
}
}3、struts配置文件，根据返回字符串跳转到新页
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="switch" namespace="/switch" extends="bob-default"> <action name="switchAction" class="SwitchAction"> <result name="newPage">/WEB-INF/jsp/switch/newPage.jsp</result> </action> </package> </struts>
4、将需要填充的html字符串填充到新页的表格（newPage.jsp）
var Id = '${Id}';
$(document).ready(function(){
//将html字符串填充到表格
$.ajax({
type:"post",
url:"/switch/SwitchAction!getNewHtml.do",
data: {
"Id":Id
},
success:function(data){
$("#hiddenTable").html(data);//将html字符串转化为jquery对象
var basichtml = $("#hiddenTable").find('#id-body').html();//查找对象中子节点的值，即表格内容
var str = "<tr><th width=\"5%\">序号</th><th width=\"7%\">属性名</th><th width=\"17%\">变更前</th><th width=\"17%\">变更后</th></tr>";
var basichtml = str + basichtml;//加上表头
$("#basicTable").html(basichtml)//将拼接的新字符串填充到表格
refreshTabOffset();//刷新body页面
},
error:function(data){
var str = data.html;
alert("加载失败。");
refreshTabOffset();
}
});
});5、newHtml
StringBuffer newPage = new StringBuffer();
newPage.append（"<thead><tr><th width=\"5%\">序号</th><th width=\"7%\">属性名</th><th width=\"17%\">变更前</th><th width=\"17%\">变更后</th></tr></thead>"）;
newPage.append（"<tbody id=\"id-body\">"）;
resNo = resNo + 1;
newPage.append("<tr><td>"+ resNo + "</td><td>编码</td>" + "<td>" + origCode + "</td>" + "<td>" + newCode + "</td></tr></tbody>");6、PageServiceImpl.java
@Scope("singleton")
@Service("PageService")//自动装载
public class PageServiceImpl implements PageService{
@Autowired //自动装载
PageDao pageDao;
@Override
public PageRecord getObjectById(String Id) {
return pageDao.getObjectById(Id);
}7、PageDaoImpl.java
@Scope("singleton")
@Repository("PageDao")//自动装载
public class PageDaoImpl extends HibernateGenericDao implements PageDao{
@Override
public PageRecord PageRecord(PageRecord record) {
if (record != null) {
this.saveOrUpdate(record);
}
return record;
}
@Override
public PageRecord getObjectById(String Id) {
PageRecord PageRecord = null;
if(StringUtil.isEmpty(Id))
return null;
StringBuffer hql = new StringBuffer( "from PageRecord where Id=:Id ");//防止sql注入
Map<String, Object> map = new HashMap<String, Object>();//防止sql注入
map.put("Id", Integer.parseInt(Id)); //防止sql注入
List<PageRecord> list = this.getListByHql(hql.toString(), map);
if(list.size()>0){
PageRecord = list.get(0);
}
return PageRecord;
}8、jsp页面引用插件
<!-- jQuery --> <script src="/bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="/bower_components/metisMenu/dist/metisMenu.min.js"></script> <!-- Custom Theme JavaScript --> <script src="/dist/js/sb-admin-2.js"></script> <!-- Layer Popover JavaScript --> <script src="/UIReference/layer/layer.js"></script> <!-- DateTimePicker JavaScript --> <script src="/UIReference/DatetimePicker/js/bootstrap-datetimepicker.min.js"></script> <script src="/UIReference/DatetimePicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script src="/lib/jquery-validation/jquery.validate.js"></script> <script src="/UIReference/echarts3/echarts.min.js"></script> <script type="text/javascript">//自定义脚本</script>
9、jsp页面引用CSS
<!-- Bootstrap Core CSS --> <link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <!-- MetisMenu CSS --> <link href="/bower_components/metisMenu/dist/metisMenu.min.css" rel="external nofollow" rel="stylesheet"> <!-- Timeline CSS --> <link href="/dist/css/timeline.css" rel="external nofollow" rel="stylesheet"> <link href="/UIReference/DatetimePicker/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet"> <!-- Custom CSS --> <link href="/dist/css/sb-admin-2.css" rel="external nofollow" rel="stylesheet"> <!-- Custom Fonts --> <link href="/bower_components/font-awesome/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"><!-- 自定义CSS--></style>
10、jsp页面布局
<body οnlοad="refreshTabOffset()">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 add-bottom-line" role="navigation" id="infoNav">
<!--<ul id="transverse-tab" class="nav nav-tabs" role="tablist">
<li id="tab-basicInfo" role="presentation" class = "active"
οnclick="javascript:document.getElementById('basicInfo').scrollIntoView();switch(this,'0');"><a>基本信息</a></li>
<li id="tab-Property" role="presentation"
οnclick="javascript:document.getElementById('Property').scrollIntoView();switch(this,'1');"><a>属性</a></li>
<li id="tab-RelationInfo" role="presentation"
οnclick="javascript:document.getElementById('RelationInfo').scrollIntoView();switch(this,'2');"><a>关系</a></li>
</ul>-->
</div>
<div class="col-sm-12"
id="myModalBodyPage" οnscrοll="singleScroll();">
<div class="row">
<div class="panel panel-info hidden" id="switchLog">
<table class="table table-hover table-striped table-bordered hidden"
id="hiddenTable">
<thead>
<tr>
<th width="5%">序号</th>
<th width="7%">属性名</th>
<th width="17%">变更前</th>
<th width="10%">变更后</th>
</tr>
</thead>
</table>
</div>
<div class="panel panel-info" id="basicInfo">
<div class="panel-heading">基本信息</div>
<table class="table table-hover table-striped table-bordered"
id="basicTable">
</table>
</div>
</div>
</div>
</div>
</div>
</body>感谢各位的阅读！关于“layer页面跳转中如何获取html子节点元素的值”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。