layer页面跳转,获取html子节点元素的值方法
(编辑:jimmy 日期: 2024/11/1 浏览:3 次 )
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"htmlcode">@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配置文件,根据返回字符串跳转到新页
<"1.0" encoding="UTF-8" "-//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页面引用插件
上一篇:layer.confirm()右边按钮实现href的例子<!-- jQuery --> <script src="/UploadFiles/2021-04-02/jquery.min.js">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="/UploadFiles/2021-04-02/html5shiv.js">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子节点元素的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
下一篇:使用layer模态框给新页面传值的方法