查询工具左侧界面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了查询工具左侧界面相关的知识，希望对你有一定的参考价值。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
request.setAttribute("basePath", basePath);
%>
<script type="text/javascript">
var basePath = ‘${basePath}‘;
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript"
src="${basePath}js/jquery-easyui-1.4/jquery.easyui.min.js"
charset="utf-8"></script>
<title>这是左侧页面</title>
</head>
<style type="text/css">
.likequery {
font-size: 12px;
height: 32px;
background-color: #E0ECFF;
border-radius: 5px;
outline: none;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(18, 160, 236, 0.4);
border-radius: 4px;
}
::-webkit-scrollbar:horizontal {
height: 8px;
}
.aaa:HOVER {
cursor: pointer;
background-color: #eee;
width: 100%;
border-radius: 2px;
}
.aaa {
list-style: none;
font-size: 14px;
width: 100%;
}
.ul {
margin: 0;
padding: 0;
}
.rightBtnClass>.menu-line {
display: none;
}
.selectoption {
cursor: pointer;
}
.easyui-tabs {
width: 100%;
height: 100%;
}
</style>
<body>
<div class="easyui-tabs">
<div title="浏览" style="padding:10px">
<div style="float: left;margin: 0 10px 5px 0;">数据库</div>
<div style="float: right;margin: 5px 4px 5px 0;cursor: pointer">
<img id="refreshimg" name="refresh" onmousemove="refreshover(‘refresh2.png‘)" onmouseout="refreshover(‘refresh.png‘)" src="${basePath}images/refresh.png" /></div>
<div style="margin-top: 15px;">
<select id="test" class="easyui-combobox"
style="height:32px;width:100%;">
</select>
</div>
<div>
<input id="liketable" class="likequery" value=""
onkeyup="likequery()" type="text" placeholder="搜索表名..."
style="width: 100%;margin-top: 20px;padding-left: 5px">
</div>
<div class="showtable"
style="overflow:auto;height: 66%;margin-top: 10px;">
<ul class="ul" id="couponprice"></ul>
</div>
<div id="mydiv"
style="position:absolute;display:none;background: silver;z-index: 999;">提示</div>
</div>
</div>
<!-- <a href="javascript:void(0)" 连接到右侧 </a> -->
<div id="rightBtn" class="easyui-menu rightBtnClass"
style="width:120px;">
<div onclick="callTableDesc()">表结构</div>
<div onclick="openWindowDate()">数据实例</div>
<div onclick="dataImport()">数据导入</div>
<div onclick="dataExport()">数据导出</div>
</div>
<div id="exporttype" class="easyui-dialog" title="请选择文件格式"
data-options="" closed="true"
style="width:200px;height:100px;padding:15 10 10 10">
<a id="exportCsv" href="javascript:void(0)" class="easyui-linkbutton"
target=‘_blank‘ <a
id="exportExcel" href="javascript:void(0)" class="easyui-linkbutton"
style="margin-left: 20" onclick="downloadMore(‘excelMore‘)">导出EXCEL</a>
</div>
<div id="downloading" class="easyui-dialog" title="提示" data-options=""
closed="true" style="width:150px;height:100px;padding:15 10 10 10">
<a>正在生成数据文件...</a>
</div>
<div id="importtype" class="easyui-dialog" title="请选择文件格式"
data-options="" closed="true"
style="width:200px;height:100px;padding:15 10 10 10">
<a id="importCsv" href="javascript:void(0)"
class="easyui-linkbutton" target=‘_blank‘>导入CSV</a> <a
id="importExcel" href="javascript:void(0)"
class="easyui-linkbutton" style="margin-left: 20">导入EXCEL</a>
</div>
<!-- 上传csv -->
<div>
<div id="wimportCsv" class="easyui-window" title="导入CSV"
data-options="modal:true,closed:true"
style="width: 500px; height: 200px; padding: 10px;">
<form id="ffimportCsv" class="easyui-form" method="POST"
enctype="multipart/form-data"
action="${basePath}upLoadcsvAction/upload"
data-options="novalidate:true">
<div style="margin-bottom: 20px">
<input class="easyui-filebox" name="file" style="width: 300px"
data-options="buttonText:‘浏览‘">
</div>
<div style="margin-bottom: 20px">
<span>是否overwrite：</span> <span>是:</span> <input type="radio"
name="isOverWrite" value="true"> <span>否:</span> <input
type="radio" name="isOverWrite" value="false" checked>
</div>
<input id="ucsvTname" type="text" name="name" style="display: none;">
<div style="margin-bottom: 20px align-self: center;">
<input type="submit" value="提交">
</div>
</form>
</div>
</div>
<div id="tableDescRes">
<div id="w" class="easyui-window" title="表结构"
data-options="top:100,border:false,modal:true,closed:true"
style="width: 800px; height: 400px; padding: 0px;">
<div id="tt" class="easyui-tabs" style="width: auto; height: auto">
<div title="列" style="padding: 0px">
<table id="tdesc"></table>
</div>
<div title="属性" style="padding: 0px">
<table id="tfdesc"></table>
</div>
</div>
</div>
</div>
<div id="errorMsgId" class="easyui-dialog" title=" 错误提示"
data-options="" closed="true"
style="width:500px;height:300px;padding:10 10 10 10"></div>
</body>
<script type="text/javascript">
function errorMsg(msg) {
$("#errorMsgId").html(msg);
$(".easyui-dialog").dialog(‘close‘);
$("#errorMsgId").dialog(‘open‘);
}
function dataExport() {
$(".easyui-dialog").dialog(‘close‘);
$(‘#exporttype‘).dialog(‘open‘);
}
function dialogOpen() {
$("#downloading").dialog(‘open‘);
}
function dialogClose() {
$("#downloading").dialog(‘close‘);
}
function downloadMore(url) {
var tableName = $("#rightBtn").attr("table");
var dataBase = $("#test").combobox(‘getValue‘);
$(".easyui-dialog").dialog(‘close‘);
$("#downloading").dialog(‘open‘);
$.ajax({
type : "POST",
url : "${basePath}export/" + url,
data : {
tableName : tableName,
dataBase : dataBase
},
dataType : "text",
success : function(data) {
$("#downloading").dialog(‘close‘);
var fileType = "CSV";
if (url.indexOf("excelMore") >= 0) {
fileType = "EXCEL";
}
window.open("${basePath}export/downloadFile?filename=" + data + "&fileType=" + fileType);
}
});
}
function dataImport() {
$(".easyui-dialog").dialog(‘close‘);
$(‘#importtype‘).dialog(‘open‘);
var tableName = $("#rightBtn").attr("table");
var dataBase = $("#test").combobox(‘getValue‘);
$("#importCsv").attr("tableName", dataBase + "." + tableName);
$("#ucsvTname")[0].value = dataBase + "." + tableName;
}
/* 刷新左侧 */
function refresh1() {
showdbn();
}
function refreshover(img){
$("#refreshimg").attr("src","${basePath}images/"+img);
}
/* 获取数据库 */
var orgCount = 0;
function showdbn() {
$("#test").combobox({
url : ‘${basePath}index/showdatabase‘,
textField : ‘database_name‘,
valueField : ‘database_name‘,
editable : false,
panelHeight : ‘auto‘,
onLoadSuccess : function(data) {
orgCount = data.length;
var showtable = $(‘#test‘).combobox(‘getData‘);
if (showtable.length > 0) {
$(‘#test‘).combobox(‘select‘, showtable[0].database_name);
}
},
onSelect : function(record) {
var showtable = $(‘#test‘).combobox(‘getValue‘);
change();
},
onShowPanel : function() {
// 动态调整高度
if (orgCount > 10) {
$(this).combobox(‘panel‘).height(305);
}
}
});
}
$(function() {
showdbn();
ttttt();
});
var showtable;
/* 选择库展示表 */
function change() {
$("#couponprice").html("loading...");
$("#liketable").val("");
var showtable = $("#test").combobox(‘getValue‘);
$.ajax({
type : "POST",
url : "${basePath}index/likesql",
data : "databasename=" + showtable,
dataType : "text",
success : function(data) {
if (data != null && data.length != 2) {
var list = eval(data);
var count = list.length;
var name = "";
for (i = 0; i < count; i++) {
name += "<li class=‘aaa‘ + list[i].tab_name + "</li>";
}
$("#couponprice").html(name);
$("#liketable").css(‘display‘, ‘block‘);
} else {
$("#couponprice").html("当前库没有表...");
$("#liketable").css(‘display‘, ‘none‘);
}
$(".aaa").tooltip({
deltaX : -40,
deltaY : -5,
showDelay : 1000
});
$(".aaa").bind(‘contextmenu‘, function(e) {
e.preventDefault();
$(‘#rightBtn‘).menu(‘show‘, {
left : e.pageX - 10,
top : e.pageY - 10
});
$("#rightBtn").attr("table", $(e.currentTarget).html());
});
}
});
}
/* 中文提示 */
function over(e) {
var tb = e.innerHTML;
var dbn = $("#test").combobox(‘getValue‘);
$.ajax({
type : "POST",
url : "${basePath}index/comment",
data : "databasename=" + dbn + "&tablename=" + tb,
dataType : "text",
success : function(data) {
if (data != null) {
var list = eval(data);
var name = list[0].prpt_name;
if (name.indexOf(" does not have property: comment") >= 0) {
name = "无注释";
}
$(".aaa").tooltip({
content : name,
deltaX : -40,
deltaY : -5,
showDelay : 1000
});
}
}
})
}
/* 模糊查询 */
function likequery() {
var tablename = $("#liketable").val();
var showtable = $("#test").combobox(‘getValue‘);
$.ajax({
type : "POST",
url : "${basePath}index/likesql",
data : "databasename=" + showtable + "&name=" + tablename,
dataType : "text",
success : function(data) {
if (data != null) {
var list = eval(data);
var count = list.length;
var name = "";
for (i = 0; i < count; i++) {
name += "<li class=‘aaa‘ + list[i].tab_name + "</li>";
}
$("#couponprice").html(name);
$(".aaa").bind(‘contextmenu‘, function(e) {
e.preventDefault();
$(‘#rightBtn‘).menu(‘show‘, {
left : e.pageX - 10,
top : e.pageY - 10
});
$("#rightBtn").attr("table", $(e.currentTarget).html());
});
}
$(".aaa").tooltip({
deltaX : -40,
deltaY : -5,
showDelay : 1000
});
}
})
}
//csv import
function importCsv() {
$(‘#wimportCsv‘).window(‘open‘);
}
$(‘#ffimportCsv‘).form({
onSubmit : function() {
//console.log($("#importCsv").attr("tableName"));
},
success : function(data) {
$.messager.alert("提示", data, "info");
}
});
//右键表结构
function showTdesc(tableName) {
$(‘#tdesc‘).datagrid({
rownumbers:true,
url : basePath + ‘tabledesc/desc‘,
method : ‘post‘,
queryParams : {
tableName : tableName,
subject : ‘datagrid‘
},
columns : [ [
{
field : ‘col_name‘,
title : ‘列名‘,
width : 100
},
{
field : ‘data_type‘,
title : ‘字段类型‘,
width : 100
},
{
field : ‘comment‘,
title : ‘备注‘
}
] ]
});
$(‘#tdesc‘).datagrid(‘autoSizeColumn‘, ‘comment‘);
}
/* function showTdesc(tableName) {
$(‘#tdesc‘).datagrid({
rownumbers:true,
url : basePath + ‘tabledesc/desc‘,
method : ‘post‘,
queryParams : {
tableName : tableName,
subject : ‘datagrid‘
},
columns : [ [
{
field : ‘col_name‘,
title : ‘列名‘,
width : 100
},
{
field : ‘data_type‘,
title : ‘字段类型‘,
width : 100
},
{
field : ‘comment‘,
title : ‘备注‘
}
] ]
});
$(‘#tdesc‘).datagrid(‘autoSizeColumn‘, ‘comment‘);
} */
function showTprop(tableName) {
$.ajax({
type : "POST",
url : basePath + ‘tabledesc/property‘,
data : {
"tableName" : tableName
},
dataType : "json",
success : function(data) {
//console.log(data);
if (data.error) {
$.messager.alert("提示", data.error, "error");
//alert(data.error);
$(‘#w‘).window(‘close‘);
} else {
var tfDesc = fuck(data.tfDesc);
var tCSentence = showCreateSentence(data.tCSentence);
tfDesc = tfDesc.concat(tCSentence);
//console.log(tfDesc);
$(‘#tfdesc‘).datagrid({
rownumbers:true,
fitColumns : false,
columns : [ [
{
field : ‘col_name‘,
title : ‘属性名‘,
width : 100
},
{
field : ‘data_type‘,
title : ‘值‘
},
] ]
});
$(‘#tfdesc‘).datagrid(‘loadData‘, tfDesc);
}
}
});
}
function ttttt() {
$(‘#tt‘).tabs({
onSelect : function(title) {
if (title == ‘属性‘) {
setTimeout(function() {
$(‘#tfdesc‘).datagrid(‘autoSizeColumn‘, ‘data_type‘);
}, 500);
}
}
});
}
function tableDesc(tableName) {
if (tableName) {
$(‘#w‘).window(‘open‘);
showTdesc(tableName);
setTimeout(function() {
showTprop(tableName);
}, 1000);
} else {
//alert("请选中表名！");
$.messager.alert("提示", "请选中表名！", "info");
}
}
;
function fuck(tfDesc) {
//console.log(111);
var resultTFD = [];
var enTfd = [ ‘Database:‘, ‘Owner:‘, ‘CreateTime:‘, ‘LastAccessTime:‘, ‘Location:‘, ‘InputFormat:‘, ‘OutputFormat:‘, ‘Compressed:‘ ];
var chTfd = [ ‘数据库:‘, ‘拥有者:‘, ‘创建日期:‘, ‘最后访问日期:‘, ‘位置:‘, ‘输入格式:‘, ‘输出格式:‘, ‘压缩格式:‘ ];
for (var int = 0; int < tfDesc.length; int++) {
var tfDesc_ele = tfDesc[int];
for (var int2 = 0; int2 < enTfd.length; int2++) {
var enTfd_ele = enTfd[int2];
if (tfDesc_ele.col_name.replace(/\s+/g, "") == enTfd_ele) {
tfDesc_ele.col_name = chTfd[int2];
resultTFD.push(tfDesc_ele);
}
}
}
//console.log(resultTFD);
return (resultTFD);
}
//建表语句
function showCreateSentence(data) {
var tCSentence = data;
var createSentence = "";
for (var i = 0; i < tCSentence.length; i++) {
//console.log(tCSentence[i].createtab_stmt);
createSentence += tCSentence[i].createtab_stmt;
}
//console.log(createSentence);
return ({
col_name : ‘建表语句‘,
data_type : createSentence
});
}
//biao jie gou end
function callTableDesc() {
var tableName = $("#rightBtn").attr("table");
var dataBase = $("#test").combobox(‘getValue‘);
tableDesc(dataBase + "." + tableName);
}
function openWindowDate() {
var tableName = $("#rightBtn").attr("table");
var dataBase = $("#test").combobox(‘getValue‘);
var url = "${basePath}DataInstance/DataInstanceInfo?tableName=" + tableName + "&dataBase=" + dataBase;
openWindow(url, "数据实例", 400, 800);
}
</script>
</html>
本文出自 “学的不仅是技术，更是梦想” 博客，谢绝转载！
以上是关于查询工具左侧界面的主要内容，如果未能解决你的问题，请参考以下文章