在开发过程中,很多时候都会遇到一个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"> </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>
以上代码皆以实现。如有错漏或者更先进的方法,欢迎大佬留言。