<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
request.setAttribute("ctx",request.getContextPath());
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表创建信息</title>
<%@ include file="/commons/ligerui.jsp" %>
<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 1000%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 5%;
left: 5%;
width: 85%;
height: 81%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
.title{
width:30px;
height:20px;
position: absolute;
top:18px;
right:20px;
}
#sqlHtml p{
padding-top:10px;
border-top:1px dashed #000;
}
#sqlHtml p span{
margin:0 20px 10px 0;
}
#sqlHtml h5{
margin-bottom:10px;
}
</style>
<script type="text/javascript">
$(function () {
$("#tab1").ligerTab();
var showlist = $("<ul></ul>");
showall(treeNodeList.treeNodeList, showlist);
$("#div_tree").append(showlist);
$("a.thickbox").click(function(event){
$(document).scrollLeft(0); //把滚动条重置到最左端
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
$("#domMessage").empty(); //重新查询之前需要先清空之前div中的内容
getTableCreateSql.getSql($(this).html());
//定义弹出的信息为页面的某一个元素
$("#light").css("display","block");
$("#fade").css("display","block");
});
$("#light").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
});
document.onclick = function(){
$("#light").hide();
$("#fade").hide();
};
$("a.close").click(function(){
$("#light").hide();
$("#fade").hide();
});
});
//menu_list为json数据
//parent为要组合成html的容器
function showall(menu_list, parent) {
for (var menu in menu_list) {
//如果有子节点,则遍历该子节点
if (menu_list[menu].children!=null && menu_list[menu].children.length > 0) {
//创建一个子节点li
var li = $("<li></li>");
//拼接字符:<a href='#'>首页</a>
// var link = (menu_list[menu].Url=="#")?$("<a href='"+menu_list[menu].Url+"'>"+menu_list[menu].MName+"</a>"):$("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
var link = $("<a href='#' class='thickbox'>"+menu_list[menu].tableName+"</a>");
//将a附加到li里,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
$(li).append(link).append("<ul></ul>").appendTo(parent);
//将空白的ul作为下一个递归遍历的父亲节点传入
showall(menu_list[menu].children, $(li).children().eq(1));
}
//如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
else {
//拼接字符:<a href='#'>首页</a>
var link = $("<a href='#'>"+menu_list[menu].tableName+"</a>");
// var link = $("<a href='TB_inline?height=580&width=800&inlineId=myOnPageContent' class='thickbox'>"+menu_list[menu].tableName+"</a>");
$("<li></li>").append(link).appendTo(parent);
}
}
}
var treeNodeList = {
"treeNodeList": //[
${treeNodeStr}
// ]
};
var getTableCreateSql = {
"getSql" : function(tableName) {
var url = '${ctx}/getTableCreateSql.do?tableName='+tableName;
$.ajax({
type: "POST",
url: url,
async: true,
cache: false,
success: function(result){
$("#sqlHtml").html(result);
}
});
}
}
</script>
</head>
<body style="padding:10px;font-size:13px;">
<div>表分类信息:${tableName}</div>
<div id="tab1" style="width:auto;height:100%;margin-top:5px;">
<div title="建表信息" style="height:auto;padding:10px;" >
<pre><c:out value="${tableCreateInfo}" /></pre>
</div>
<div title="数据流程" id="div_tree" class="treeChart" style="width:1000%;height:auto;padding:10px;" >
<a href="${ctx}/getTableTreeInfo.do?dbName=${dbName}&tableName=${tableName}" target="blank">新页面展示树模型</a>
</div>
</div>
<div id="light" class="white_content">
<div class="title">
<span><a href='#' class="close">关闭</a></span>
</div>
<div id="sqlHtml"></div>
</div>
<div id="fade" class="black_overlay"></div>
<!-- ================================================= 以下CSS与JS必须放在本页面,否则页面相关效果无法显示 ==================================================== -->
<style type="text/css">
/*Now the CSS*/
* {margin: 0; padding: 0;}
.treeChart ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.treeChart li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.treeChart li:before, .treeChart li:after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.treeChart li:after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.treeChart li:only-child:after, .treeChart li:only-child:before {
display: none;
}
/*Remove space from the top of single children*/
.treeChart li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.treeChart li:first-child:before, .treeChart li:last-child:after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.treeChart li:last-child:before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.treeChart li:first-child:after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.treeChart ul ul:before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.treeChart li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.treeChart li a:hover, .treeChart li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.treeChart li a:hover+ul li:after,
.treeChart li a:hover+ul li:before,
.treeChart li a:hover+ul:before,
.treeChart li a:hover+ul ul:before{
border-color: #94a0b4;
}
/*Thats all. I hope you enjoyed it.Thanks :)*/
</style>
</body>
</html>