layer页面跳转,获取html子节点元素的值方法


Posted in Javascript onSeptember 27, 2019

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子节点元素的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
js constructor的实际作用分析
Nov 15 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
js实现常见的工具条效果
Mar 02 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
使用layer模态框给新页面传值的方法
Sep 27 #Javascript
JavaScript实现随机五位数验证码
Sep 27 #Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 #Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 #Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 #Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 #Javascript
微信小程序 冒泡事件原理解析
Sep 27 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
Bootstrap table使用方法汇总
2017/11/17 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python中文件操作简明介绍
2015/04/13 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Python socket模块方法实现详解
2019/11/05 Python
学Python 3的理由和必要性
2019/11/19 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
scrapy-splash简单使用详解
2021/02/21 Python
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
质量在我心中演讲稿
2014/09/02 职场文书
党员争先创优承诺书
2015/01/20 职场文书
草房子读书笔记
2015/06/29 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库