版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/linzhaoliangyan/article/details/88808331
* 有问题可以参加Java技术交流群:839366464
* ztree.jsp
* Controller 的细节
@RequestMapping("/hello")
public ModelAndView hello() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("name", "xiaohei");
modelAndView.setViewName("hello");
return modelAndView;
}
简化写法
@RequestMapping("/hello3")
public String hello3(Model model) {
model.addAttribute("name","xiaohei123");
return "hello";
}
* 添加bootstrap的tab
* 下载bootstrap插件
* https://github.com/bill1012/bootstrap-tab
* Hello BootStrap
* copy demo工程
扫描二维码关注公众号,回复:
5720112 查看本文章
* 修改demo.jsp
* 访问demo.jsp
* ztreetab.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-tab/css/bootstrap.min.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/bootstrap-tab/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-tab/css/bootstrap-tab.css">
<style>
body {
background-color: white;
margin: 0;
padding: 0;
text-align: center;
}
div, p, table, th, td {
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#tabContainer {
margin-left: 1px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.core.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-tab/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-tab/js/bootstrap-tab.js"></script>
<SCRIPT type="text/javascript">
<!--
var zTree;
var demoIframe;
var ids="000";
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function (treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
// demoIframe.attr("src", treeNode.file + ".jsp");
// alert("HelloWorld");
// var ids:有没有treeNode.id,假如没有添加,假如有,
var id=JSON.stringify(treeNode.id);// 101
if(ids.indexOf(id)==-1){
$("#tabContainer").data("tabs").addTab({
id: treeNode.id,
text: treeNode.name,
closeable: true,
url: treeNode.file + ".do"
},function (obj) {
var id=JSON.stringify(obj.id);
//移除id
ids=ids.replace(id,"");
})
ids+=id+",";
}else{
$("#tabContainer").data("tabs").showTab(treeNode.id);
}
return true;
}
}
}
};
$(document).ready(function () {
$.ajax({
url: "${pageContext.request.contextPath}/queryAllZnode.do",
type: "GET",
dataType: "json",
success: function (data, status) {
var content = JSON.parse(JSON.stringify(data));
var zNodes = content.zNodes;
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#tabContainer");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id", 101));
$("#tabContainer").tabs({
data: [{
id: 'welcom',
text: '欢迎页',
url: "welcome.jsp"
}],
showIndex: 1,
loadAll: false
})
}
})
});
function loadReady() {
var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
h = demoIframe.height() >= maxH ? minH : maxH;
if (h < 530) h = 530;
demoIframe.height(h);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
<TD width=770px align=left valign=top>
<%--<IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px
SRC="statistics.jsp"></IFRAME>--%>
<div id="tabContainer"></div>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
* 统一处理iframe的jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe style="width: 100%;height:600px;border:none" src="${pageContext.request.contextPath}/${tab}.jsp"></iframe>
</body>
</html>
@RequestMapping("/statistics")
public ModelAndView statistics(){
ModelAndView modelAndView=new ModelAndView();
modelAndView.setViewName("tab");
modelAndView.addObject("tab","statistics");
return modelAndView;
}
@RequestMapping("/transfer")
public ModelAndView transfer(){
ModelAndView modelAndView=new ModelAndView();
modelAndView.setViewName("tab");
modelAndView.addObject("tab","transfer");
return modelAndView;
}
* 修改bootstrap-tabs的插件
//新增一个tab页,添加删除回调监听
BaseTab.prototype.addTab=function (obj,fn) {
var self=this;
//nav-tab
var ul_li = $(this.template.ul_li.format(obj.id, obj.text));
//如果可关闭,插入关闭图标,并绑定关闭事件
if (obj.closeable) {
var ul_li_close = $(this.template.ul_li_close);
ul_li.find("a").append(ul_li_close);
ul_li.find("a").append(" ");
}
this.$element.find(".nav-tabs:eq(0)").append(ul_li);
//div-content
var div_content_panel = $(this.template.div_content_panel.format(obj.id));
this.$element.find(".tab-content:eq(0)").append(div_content_panel);
$("#" + obj.id).load(obj.url,obj.paramter);
this.stateObj[obj.id] = true;
if(obj.closeable){
this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () {
var href = $(this).parents("a").attr("href").substring(1);
if(self.getCurrentTabId()==href){
self.$element.find(".nav-tabs li:eq(0) a").tab("show");
}
$(this).parents("li").remove();
$("#" + href).remove();
// 存在fn则直接用,不存fn在则用函数表达式的方式声明一个
fn = fn || function() {};
fn(obj); // 调用传进来的fn
})
}
this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show");
}