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>

以上这篇layer页面跳转,获取html子节点元素的值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。