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 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
Javascript 错误处理的几种方法
Jun 13 Javascript
jQuery 技巧小结
Apr 02 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
angular简介和其特点介绍
Jan 29 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 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文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
利用JS实现数字增长
2016/07/28 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python自定义类并使用的方法
2015/05/07 Python
python opencv之SURF算法示例
2018/02/24 Python
python去除文件中重复的行实例
2018/06/29 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
Python的collections模块真的很好用
2021/03/01 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
质量月活动总结
2014/08/26 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年居委会工作总结
2014/12/09 职场文书
研究生导师评语
2014/12/31 职场文书
毕业生对母校寄语
2015/02/26 职场文书
python requests模块的使用示例
2021/04/07 Python
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android