高雄
2 years ago
committed by
Gitee
1 changed files with 46 additions and 83 deletions
@ -1,108 +1,71 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
|
<html> |
||||||
<html lang="en"> |
|
||||||
<head> |
<head> |
||||||
<meta charset="utf-8" /> |
<meta charset="utf-8"/> |
||||||
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"> |
<title>压缩包预览</title> |
||||||
<#include "*/commonHeader.ftl"> |
<script src="js/jquery-3.6.1.min.js"></script> |
||||||
<script src="js/jquery-3.6.1.min.js" type="text/javascript"></script> |
<#include "*/commonHeader.ftl"> |
||||||
<link href="css/zTreeStyle.css" rel="stylesheet" type="text/css"> |
<script src="js/base64.min.js" type="text/javascript"></script> |
||||||
<script src="js/base64.min.js" type="text/javascript"></script> |
<link href="css/zTreeStyle.css" rel="stylesheet" type="text/css"> |
||||||
<style type="text/css"> |
<script type="text/javascript" src="js/jquery.ztree.core.js"></script> |
||||||
|
<style type="text/css"> |
||||||
body { |
body { |
||||||
background-color: #404040; |
background-color: #404040; |
||||||
} |
} |
||||||
h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;} |
|
||||||
h1 {font-size: 24px;line-height: 34px;text-align: center;} |
h1 {font-size: 24px;line-height: 34px;text-align: center;} |
||||||
h2 {font-size: 14px;line-height: 24px;padding-top: 5px;} |
|
||||||
h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;} |
|
||||||
a {color:#3C6E31;text-decoration: underline;} |
a {color:#3C6E31;text-decoration: underline;} |
||||||
a:hover {background-color:#3C6E31;color:white;} |
a:hover {background-color:#3C6E31;color:white;} |
||||||
code {color: #2f332a;} |
code {color: #2f332a;} |
||||||
div.zTreeDemoBackground {width:600px;text-align:center;margin: 0 auto;background-color: #ffffff;} |
div.zTreeDemoBackground { |
||||||
|
max-width: 880px; |
||||||
|
text-align:center; |
||||||
|
margin:0 auto; |
||||||
|
border-radius:3px; |
||||||
|
box-shadow:rgba(0,0,0,0.15) 0 0 8px; |
||||||
|
background:#FBFBFB; |
||||||
|
border:1px solid #ddd; |
||||||
|
margin:1px auto; |
||||||
|
padding:5px; |
||||||
|
} |
||||||
|
|
||||||
</style> |
</style> |
||||||
</head> |
</head> |
||||||
<body> |
<body> |
||||||
|
|
||||||
<div class="zTreeDemoBackground left"> |
<div class="zTreeDemoBackground left"> |
||||||
|
<h1>kkFileView</h1> |
||||||
<ul id="treeDemo" class="ztree"></ul> |
<ul id="treeDemo" class="ztree"></ul> |
||||||
</div> |
</div> |
||||||
<script type="text/javascript" src="js/jquery.ztree.core.js"></script> |
<script> |
||||||
|
var settings = { |
||||||
<script type="text/javascript"> |
|
||||||
const data = JSON.parse('${fileTree}'); |
|
||||||
var baseUrl = "${baseUrl}"; |
|
||||||
var setting = { |
|
||||||
view: { |
|
||||||
fontCss : {"color":"blue"}, |
|
||||||
showLine: true |
|
||||||
}, |
|
||||||
data: { |
data: { |
||||||
key: { |
simpleData: { |
||||||
children: 'childList', |
enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
|
||||||
name: 'originName' |
idKey: "id", //节点数据中保存唯一标识的属性名称
|
||||||
|
pIdKey: "pid", //节点数据中保存其父节点唯一标识的属性名称
|
||||||
|
rootPId: "" |
||||||
} |
} |
||||||
}, |
}, |
||||||
callback:{ |
callback: { |
||||||
beforeClick:function (treeId, treeNode, clickFlag) { |
onClick: chooseNode, |
||||||
console.log("节点参数：treeId-" + treeId + "treeNode-" |
|
||||||
+ JSON.stringify(treeNode) + "clickFlag-" + clickFlag); |
|
||||||
}, |
|
||||||
onClick:function (event, treeId, treeNode) { |
|
||||||
if (!treeNode.directory) { |
|
||||||
/**实现窗口最大化**/ |
|
||||||
var fulls = "left=0,screenX=0,top=0,screenY=0,scrollbars=1"; //定义弹出窗口的参数
|
|
||||||
if (window.screen) { |
|
||||||
var ah = screen.availHeight - 30; |
|
||||||
var aw = (screen.availWidth - 10) / 2; |
|
||||||
fulls += ",height=" + ah; |
|
||||||
fulls += ",innerHeight=" + ah; |
|
||||||
fulls += ",width=" + aw; |
|
||||||
fulls += ",innerWidth=" + aw; |
|
||||||
fulls += ",resizable" |
|
||||||
} else { |
|
||||||
fulls += ",resizable"; // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually
|
|
||||||
} |
|
||||||
var previewUrl = baseUrl + treeNode.fileName +"?fileKey="+ treeNode.fileKey; |
|
||||||
window.open("onlinePreview?url=" + encodeURIComponent(Base64.encode(previewUrl)), "_blank",fulls); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
}; |
}; |
||||||
var height = 0; |
|
||||||
$(document).ready(function(){ |
|
||||||
var treeObj = $.fn.zTree.init($("#treeDemo"), setting, data); |
|
||||||
treeObj.expandAll(true); |
|
||||||
height = getZtreeDomHeight(); |
|
||||||
$(".zTreeDemoBackground").css("height", height); |
|
||||||
}); |
|
||||||
|
|
||||||
/*初始化水印*/ |
function chooseNode(event, treeId, treeNode) { |
||||||
window.onload = function() { |
var path = '${baseUrl}' + treeNode.id +"?fileKey="+'${fileName}'; |
||||||
initWaterMark(); |
location.href = "${baseUrl}onlinePreview?url=" + encodeURIComponent(Base64.encode(path)); |
||||||
} |
} |
||||||
|
|
||||||
/** |
$(document).ready(function () { |
||||||
* 计算ztreedom的高度 |
var url = '${fileTree}'; |
||||||
*/ |
$.ajax({ |
||||||
function getZtreeDomHeight() { |
type: "get", |
||||||
return $("#treeDemo").height() > window.document.documentElement.clientHeight - 1 |
url: "${baseUrl}directory?urls="+encodeURIComponent(Base64.encode(url)), |
||||||
? $("#treeDemo").height() : window.document.documentElement.clientHeight - 1; |
success: function (res) { |
||||||
} |
zTreeObj = $.fn.zTree.init($("#treeDemo"), settings, res); //初始化树
|
||||||
/** |
zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
|
||||||
* 页面变化调整高度 |
} |
||||||
*/ |
}); |
||||||
window.onresize = function(){ |
}); |
||||||
height = getZtreeDomHeight(); |
|
||||||
$(".zTreeDemoBackground").css("height", height); |
|
||||||
} |
|
||||||
/** |
|
||||||
* 滚动时调整高度 |
|
||||||
*/ |
|
||||||
window.onscroll = function(){ |
|
||||||
height = getZtreeDomHeight(); |
|
||||||
$(".zTreeDemoBackground").css("height", height); |
|
||||||
} |
|
||||||
</script> |
</script> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
Loading…
Reference in new issue