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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
使用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面向对象全攻略 (九)访问类型
2009/09/30 PHP
YII中assets的使用示例
2014/07/31 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
python 快速排序代码
2009/11/23 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
学生实习介绍信
2014/01/15 职场文书
win10下go mod配置方式
2021/04/25 Golang