layer頁面跳轉，獲取html子節點元素的值

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="stylesheet">

<!-- MetisMenu CSS -->
<link href="/bower_components/metisMenu/dist/metisMenu.min.css"
    rel="stylesheet">

<!-- Timeline CSS -->
<link href="/dist/css/timeline.css" rel="stylesheet">
<link
    href="/UIReference/DatetimePicker/css/bootstrap-datetimepicker.min.css"
    rel="stylesheet">
<!-- Custom CSS -->
<link href="/dist/css/sb-admin-2.css" rel="stylesheet">


<!-- Custom Fonts -->
<link href="/bower_components/font-awesome/css/font-awesome.min.css"
    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 onload="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"
        onclick="javascript:document.getElementById('basicInfo').scrollIntoView();switch(this,'0');"><a>基本信息</a></li>
    <li id="tab-Property" role="presentation"
        onclick="javascript:document.getElementById('Property').scrollIntoView();switch(this,'1');"><a>屬性</a></li>
    <li id="tab-RelationInfo" role="presentation"
        onclick="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" onscroll="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>