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"
 style="height: 500px; overflow-y: scroll; position: relative;"
 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>

来源：https://blog.csdn.net/Ling1604/article/details/71191287