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 namespace="/switch" extends="bob-default"> <action> <result>/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="https://www.jb51.net/bower_components/jquery/dist/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="https://www.jb51.net/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="https://www.jb51.net/bower_components/metisMenu/dist/metisMenu.min.js"></script> <!-- Custom Theme JavaScript --> <script src="https://www.jb51.net/dist/js/sb-admin-2.js"></script> <!-- Layer Popover JavaScript --> <script src="https://www.jb51.net/UIReference/layer/layer.js"></script> <!-- DateTimePicker JavaScript --> <script src="https://www.jb51.net/UIReference/DatetimePicker/js/bootstrap-datetimepicker.min.js"></script> <script src="https://www.jb51.net/UIReference/DatetimePicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script src="https://www.jb51.net/lib/jquery-validation/jquery.validate.js"></script> <script src="https://www.jb51.net/UIReference/echarts3/echarts.min.js"></script> <script type="text/javascript">//自定义脚本</script>
9、jsp页面引用CSS