JSP嵌入另一个JSP

最新推荐文章于 2023-05-10 23:25:55 发布

知秋ing

最新推荐文章于 2023-05-10 23:25:55 发布

阅读量4.6k

点赞数

文章标签： iframe

本文链接：https://blog.csdn.net/weixin_42566359/article/details/81068344

版权

在开发过程中，很多时候都会遇到一个JSP搞不定，但是又要求两个JSP在同一界面展示的情况。接下来，就给大家分享一下我的开发随笔。

如下图，左边是一个树形结构，右边显示左边所属的详细内容。一个jsp操作会有诸多不便，两个jsp会便利很多。

首先，处理完左边的树之后，点击树节点，就会显示右边的内容。那么如何嵌入子页面呢。我使用了iframe。

代码里面有详细标注，请静下心来，仔细看

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@include file="/WEB-INF/views/include/tagHeader.jsp" %>
<html>
<head>
    <title>机构管理</title>
    <%@include file="/WEB-INF/views/include/treeview.jsp" %>
    <style type="text/css">
        #scrollcontent{width:215px;}
        #ztree{height:auto!important;padding-bottom: 15px;}
    </style>

</head>
<body>
<sys:message content="${message}"/>
<div id="content" class="row-fluid">
    <div id="left" class="accordion-group">
        <div class="accordion-heading" style="border-bottom:1px solid #eee;">
            <a class="accordion-toggle"><i class="icon-refresh offset7" onclick="refreshTree();"></i>组织机构</a>
        </div>
        <div id="scrollcontent" ><div id="ztree" class="ztree"></div></div>
    </div>
    <div id="openClose" class="openClose">&nbsp;</div>



    <div class="drap_main_body_right left">
        //嵌入子页面
        <iframe id="orgContent" src="" width="100%" height="100%" frameborder="0">            
 </iframe>
    </div>
    <div class="fade"></div>

    <script type="text/javascript">
        //设置树
        var setting = {view: {addDiyDom: addDiyDom},data:{simpleData:{enable:true,idKey:"id",orgCode:"orgCode",pIdKey:"pId",rootPId:'0'}},
            callback:{onClick:function(event, treeId, treeNode){
                //点击树，调用后端，返回所属内容
                $('#orgContent').attr("src","${ctx}/operationVisualization/list?sys_name="+treeNode.name+"&line_name="+treeNode.pName);
            }
            }
        };
        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
                    icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.before(switchObj);

        }

        $(document).ready(function(){
            //初始化子页面。
            $('#orgContent').attr("src","${ctx}/operationVisualization/list");
            var treeObj = $("#ztree");
            //初始化树
            $.fn.zTree.init(treeObj, setting);
            zTree_Menu = $.fn.zTree.getZTreeObj("ztree");
            //curMenu = zTree_Menu.getNodes()[0].children[0].zchildren[0];
            //zTree_Menu.selectNode(curMenu);

            treeObj.hover(function () {
                if (!treeObj.hasClass("showIcon")) {
                    treeObj.addClass("showIcon");
                }
            }, function() {
                treeObj.removeClass("showIcon");
            });
        });
        function refreshTree(){//刷新树
            $.getJSON("${ctx}/operationVisualization/treeData",{random:Math.random()},function(data){
                var tree = $.fn.zTree.init($("#ztree"), setting, data);
                tree.expandNode(tree.getNodes()[0]);



                $("#scrollcontent").mCustomScrollbar({
                    axis:"yx",
                    autoHideScrollbar:true,
                    theme:"minimal-dark"
                });
                $("#scrollcontent").mCustomScrollbar("update");

            });
        }

        $(function(){
            refreshTree();
        });




        var leftWidth = 220; // 左侧窗口大小
        var htmlObj = $("html"), mainObj = $("#main");
        var frameObj = $("#left, #openClose, #right, #right iframe");
        function wSize(){
            var strs = getWindowSize().toString().split(",");
            htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"});
            mainObj.css("width","auto");
            frameObj.height(strs[0] - 5);
            var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
            $("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
            $(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
            $("#scrollcontent").height( $("#left").height()-36);
        }

    </script>

    <script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>

下面是Controller内容展示

@AppLog(action = OperationLogActionType.VIEW)
    @RequestMapping(value="list")
    public String tableList(HttpServletResponse response, HttpServletRequest request,Model model){
        //数据库切换
        DataSourceContextHolder.setDbType("dataSourcepg");
        DbName.setDbName("postgresql");

        try{

            String etl_time= new SimpleDateFormat("yyyy-MM-dd").format(new Date());//当前时间
            String sys_name=request.getParameter("sys_name");//当前页数
            String line_name=request.getParameter("line_name");
            String pageNo = request.getParameter("pageNo");
            int pagNo=1;//当前第几页
            if (null !=pageNo){
                pagNo=Integer.valueOf(pageNo);
            }
            int pageSize=10;//每页显示的行数
            Map<String,Object> paramsMap=new HashMap();
            paramsMap.put("etl_time","etl_time");
            paramsMap.put("sys_name",sys_name);
            paramsMap.put("line_name",line_name);
            paramsMap.put("pagNo",pagNo);
            paramsMap.put("pageSize",pageSize);
            List<Map<String,Object>> o=mydao.queryForList("dataControlMapper.selectTables",paramsMap);//根据条件查询总行数
            int pageCount = Integer.parseInt(String.valueOf(o.get(0).get("count"))); //分页总行数
            Page<Map<String,Object>> page  = new Page<>(pagNo, 10, pageCount);
            List<Map<String,Object>> mapList = mydao.queryForList("dataControlMapper.queryByconditon", paramsMap);//分页查询结果
            request.setAttribute("line_name",line_name);
            request.setAttribute("sys_name",sys_name);


           /* List<Map<String, Object>> object=new ArrayList<>();
            Map<String,Object> titleMap1=new HashMap<String,Object>();
            titleMap1.put("title_name","表名称");
            object.add(titleMap1);

            for (int i = 0; i <10 ; i++) {

                SimpleDateFormat sDateFormat=new SimpleDateFormat("yyyy-MM-dd"); //加上时间
                Date currdate=sDateFormat.parse(etl_time);

                Calendar specialDate = Calendar.getInstance();
                specialDate.setTime(currdate); //注意在此处将 specialDate 的值改为特定日期
                int num = 0-i;
                specialDate.add(Calendar.DATE, num);// num为增加的天数，可以改变的
                Date	currdate2 = specialDate.getTime();
                String enddate = sDateFormat.format(currdate2);
                Map<String, Object> titleMap2 = new HashedMap();
                titleMap2.put("title_name",enddate);
                object.add(titleMap2);
            }*/
           

            page.setPageNo(pagNo);
            page.setList(mapList);
            model.addAttribute("page", page);

            /*ArrayList<String> b=new ArrayList<String>();
            b.add("table_name");
            for(int i=0;i<10;i++){
                b.add("data"+i);
            }
            request.setAttribute("tablename", b);*/

        }catch(Exception e){
            e.printStackTrace();
        }finally {
            DataSourceContextHolder.setDbType("dataSource_platform_master");
            DbName.setDbName("");
        }


        return "modules/operationVisualization/dataDetail_list";
    }

子页面

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@include file="/WEB-INF/views/include/head.jsp"%>
<html>
<head>
  <title>列表详情</title>
  <script type="text/javascript">
    $(function() {
      $("#date").text(getBeforeDate(0));
      $("#date1").text(getBeforeDate(1));
      $("#date2").text(getBeforeDate(2));
      $("#date3").text(getBeforeDate(3));
      $("#date4").text(getBeforeDate(4));
      $("#date5").text(getBeforeDate(5));
      $("#date6").text(getBeforeDate(6));
      $("#date7").text(getBeforeDate(7));
      $("#date8").text(getBeforeDate(8));
      $("#date9").text(getBeforeDate(9));
      $("#date10").text(getBeforeDate(10));

    });

    function getBeforeDate(n){
      var date = new Date() ;
      var year,month,day ;
      date.setDate(date.getDate()-n);
      year = date.getFullYear();
      month = date.getMonth()+1;
      day = date.getDate() ;
      s = year + '-' + ( month < 10 ? ( '0' + month ) : month ) + '-' + ( day < 10 ? ( '0' + day ) : day) ;
      return s ;
    }

    function page(n) {
      if (n > '${page.last}') {
        n = '${page.last}';
      }
      $("#pageNo").val(n);

      $("#searchForm").submit();
      return false;
    }

  </script>
</head>
<body>

<form:form id="searchForm" modelAttribute="" action="${ctx}/operationVisualization/list" method="post"
           class="breadcrumb form-search">
  <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
  <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}" />
  <input id="sys_name" name="sys_name" type="hidden" value="${sys_name}" />
  <input id="line_name" name="line_name" type="hidden" value="${line_name}" />

</form:form>


<table id="contentTable" class="table table-striped table-bordered table-condensed table-hover">
  <thead>
 <tr>
   <td>表名称</td>
   <td id="date"></td>
   <td id="date1"></td>
   <td id="date2"></td>
   <td id="date3"></td>
   <td id="date4"></td>
   <td id="date5"></td>
   <td id="date6"></td>
   <td id="date7"></td>
   <td id="date8"></td>
   <td id="date9"></td>
   <td id="date10"></td>
 </tr>
  </thead>

<tbody>
  <c:forEach items="${page.list}" var="mapList">

    <tr>
      <td >${fns:abbr(mapList.table_name,50)}</td>
      <td >${fns:abbr(mapList.data0,50)}</td>
      <td >${fns:abbr(mapList.data1,50)}</td>
      <td >${fns:abbr(mapList.data2,50)}</td>
      <td >${fns:abbr(mapList.data3,50)}</td>
      <td >${fns:abbr(mapList.data4,50)}</td>
      <td >${fns:abbr(mapList.data5,50)}</td>
      <td >${fns:abbr(mapList.data6,50)}</td>
      <td >${fns:abbr(mapList.data7,50)}</td>
      <td >${fns:abbr(mapList.data8,50)}</td>
      <td >${fns:abbr(mapList.data9,50)}</td>
      <td >${fns:abbr(mapList.data10,50)}</td>
    </tr>
  </c:forEach>
  </tbody>
</table>
<div class="pagination">${page}</div>
</body>
</html>

以上代码皆以实现。如有错漏或者更先进的方法，欢迎大佬留言。

知秋ing

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JSP嵌入另一个JSP

在开发过程中，很多时候都会遇到一个JSP搞不定，但是又要求两个JSP在同一界面展示的情况。接下来，就给大家分享一下我的开发随笔。如下图，左边是一个树形结构，右边显示左边所属的详细内容。一个jsp操作会有诸多不便，两个jsp会便利很多。首先，处理完左边的树之后，点击树节点，就会显示右边的内容。那么如何嵌入子页面呢。我使用了iframe。代码里面有详细标注，请静下心来，仔细看&l...
复制链接

扫一扫