578 lines
17 KiB
Plaintext
578 lines
17 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
|
||
<style type="text/css">
|
||
.ti{
|
||
|
||
}
|
||
|
||
#t{
|
||
margin: 1em 0em;
|
||
}
|
||
|
||
|
||
.ls{
|
||
width:100%;
|
||
}
|
||
|
||
.c{
|
||
border: 1px solid black;
|
||
display: inline-block;
|
||
width: 22%;
|
||
margin: 0 1%;
|
||
height: 300px;
|
||
OVERFLOW-Y: scroll;
|
||
}
|
||
#fileBtn{
|
||
text-align: right;
|
||
padding-right: 5%;
|
||
margin: 0em 0em 1em 0em;
|
||
}
|
||
|
||
#selectFiledList{
|
||
text-align: right;
|
||
}
|
||
|
||
#msg {
|
||
width:400px;
|
||
height:200px;
|
||
display:none;
|
||
background-color:#5ea28969;
|
||
position:absolute;
|
||
top:calc(50% - 100px);
|
||
left:calc(50% - 200px);
|
||
text-align:center;
|
||
font-family:"微软雅黑";
|
||
font-size:1.2rem;
|
||
}
|
||
|
||
#title {
|
||
background-color:#5ea28969;
|
||
margin: 0em 0em;
|
||
text-align: left;
|
||
}
|
||
|
||
#content {
|
||
width:400px;
|
||
height:120px;
|
||
cursor:pointer;
|
||
color: red;
|
||
}
|
||
|
||
#ccc{
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#cl {
|
||
background-color:#7681cd;
|
||
border:none;
|
||
height:30px;
|
||
width:100px;
|
||
bottom:5px;
|
||
right:5px;
|
||
color:#fff;
|
||
}
|
||
|
||
</style>
|
||
|
||
</head>
|
||
<body >
|
||
<input type="hidden" id="filepath">
|
||
<div id="t">
|
||
<span class="ti">表名:</span><select id="tableN" onchange="getFiledListByTableName()">
|
||
<option value="">----请选择数据表----</option>
|
||
<c:forEach items="${tables}" var="name">
|
||
<option value="${name}">${name}</option>
|
||
</c:forEach>
|
||
</select>
|
||
</div>
|
||
<div id="fileBtn">
|
||
<span>标题行:</span><input id="titleNum" type="number" value="1" onblur="validTitleNum(event)" style="width:5%;" ><span style="margin-left:1em;"></span><input id="f" type="file" style="width: 20%;" >
|
||
</div>
|
||
<div>
|
||
<div id="filedList" class="c">
|
||
</div>
|
||
<div id="selectFiledList" class="c" style='margin-right: 0px;'>
|
||
</div>
|
||
<div id="selectColumnList" class="c" style='margin-left:0px;'>
|
||
</div>
|
||
<div id="columnList" class="c">
|
||
</div>
|
||
</div>
|
||
<div style='margin-top: 1em;'>
|
||
<span>起始行:</span><input id="start" type="number" onblur="validStartNum(event)" style="width: 10%;" >
|
||
<span style="margin-left:1em;">结束行:</span><input id="end" type="number" onblur="validEndNum(event)" style="width: 10%;" >
|
||
<span style="margin-left:1em;"></span><input id="submitBtn" onclick="submitDataToInsert()" type="button" value="插入数据" style="width: 10%;" >
|
||
</div>
|
||
|
||
<div id="msg" >
|
||
<p id="title">消息提示</p>
|
||
<div id="content"><p id="ccc"></p></div>
|
||
<input type="button" onclick="hiddenMsg()" name="" id="cl" value="关闭">
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|
||
<script type="text/javascript">
|
||
|
||
var projectPath = "";
|
||
window.onload=function(){
|
||
projectPath = window.location.pathname;
|
||
var index = find(projectPath,'/',1);
|
||
projectPath = projectPath.substring(0,index);
|
||
}
|
||
|
||
function showMsg(msg){
|
||
document.getElementById("ccc").innerHTML=msg;
|
||
document.getElementById("msg").style.display="block";
|
||
}
|
||
|
||
function hiddenMsg(){
|
||
document.getElementById("msg").style.display="none";
|
||
}
|
||
|
||
function validTitleNum(e){
|
||
var num = e.target.value;
|
||
if(isNaN(num)){
|
||
e.target.value = 1;
|
||
}else{
|
||
if(parseFloat(num) < 0){
|
||
e.target.value = 1;
|
||
}else{
|
||
num = Math.round(num);
|
||
if(num == 0){
|
||
num = 1;
|
||
}
|
||
e.target.value = num;
|
||
}
|
||
}
|
||
var file = document.getElementById("f").value;
|
||
if(file != '' && file != 'undefined'){
|
||
getColumnList(num);
|
||
}
|
||
}
|
||
|
||
|
||
function submitDataToInsert(){
|
||
|
||
var indexs = document.getElementsByClassName("indexs");
|
||
|
||
var len = indexs.length;
|
||
|
||
var fields = document.getElementsByClassName("fields");
|
||
|
||
var len1 = fields.length;
|
||
|
||
if(len1 == 0){
|
||
showMsg("请选择数据表字段名!");
|
||
return;
|
||
}
|
||
|
||
if(len == 0){
|
||
showMsg("请选择excel标题名!");
|
||
return;
|
||
}
|
||
|
||
if(len1 != len){
|
||
showMsg("字段名数量与标题名数量不匹配,请仔细校验核对!");
|
||
return;
|
||
}
|
||
|
||
var tableName = document.getElementById("tableN").value;
|
||
|
||
var filepath = document.getElementById("filepath").value;
|
||
|
||
var startIndex = document.getElementById("start").value;
|
||
|
||
if(startIndex == ''){
|
||
startIndex = document.getElementById("titleNum").value;
|
||
}else{
|
||
startIndex -= 1;
|
||
}
|
||
|
||
var endIndex = document.getElementById("end").value;
|
||
|
||
if(endIndex != ''){
|
||
endIndex -= 1;
|
||
}
|
||
|
||
var columnStr = "";
|
||
for(var i = 0; i<len ; i++){
|
||
if(columnStr == ""){
|
||
columnStr = indexs[i].value;
|
||
}else{
|
||
columnStr += "," + indexs[i].value;
|
||
}
|
||
}
|
||
|
||
|
||
var fieldStr = "";
|
||
for(var i = 0; i<len1 ; i++){
|
||
if(fieldStr == ""){
|
||
fieldStr = fields[i].value;
|
||
}else{
|
||
fieldStr += "," + fields[i].value;
|
||
}
|
||
}
|
||
|
||
var param = "?filepath="+filepath;
|
||
param+="&start="+startIndex;
|
||
param+="&end="+endIndex;
|
||
param+="&columnStr="+columnStr;
|
||
param+="&fieldStr="+fieldStr;
|
||
param+="&tableName="+tableName;
|
||
xmlhttp = null;
|
||
if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
|
||
xmlhttp = new XMLHttpRequest();
|
||
} else if (window.ActiveXObject) {// code for IE6, IE5
|
||
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
||
}
|
||
//编写回调函数
|
||
xmlhttp.onreadystatechange = function() {
|
||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||
var res = xmlhttp.responseText;
|
||
res=res.replace(/\"/g,"");
|
||
if(res.indexOf(",") != -1){
|
||
showMsg("数据插入成功,本次在"+tableName+"表中插入"+res.split(",")[1]+"条数据!");
|
||
}else if(res == 2){
|
||
showMsg("数据插入失败!");
|
||
}
|
||
}
|
||
}
|
||
//open设置请求方式和请求路径
|
||
xmlhttp.open("get", projectPath+'/submitDataToInsert'+param);//一个servlet，后面还可以写是否同步
|
||
//send 发送
|
||
xmlhttp.send();
|
||
}
|
||
|
||
function getColumnList(titleNum){
|
||
|
||
var filepath = document.getElementById("filepath").value;
|
||
|
||
document.getElementById("selectColumnList").innerHTML = "";
|
||
|
||
xmlhttp = null;
|
||
if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
|
||
xmlhttp = new XMLHttpRequest();
|
||
} else if (window.ActiveXObject) {// code for IE6, IE5
|
||
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
||
}
|
||
//编写回调函数
|
||
xmlhttp.onreadystatechange = function() {
|
||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||
|
||
var data = JSON.parse(xmlhttp.responseText);
|
||
var html = "";
|
||
if(data != [] && data != null && data.length > 0){
|
||
var len = data.length;
|
||
for(var i = 0;i<len;i++){
|
||
if(!(data[i] == '' || data[i] == 'null' || data[i] == null)){
|
||
html += "<label class='ls1' ><input class='inp1' field='"+data[i]+"' type='checkbox'><span>"+data[i]+"</span><input type='hidden' value='"+i+"'></label><br>";
|
||
}
|
||
}
|
||
}else{
|
||
showMsg("改行不存在标题名!");
|
||
return;
|
||
}
|
||
|
||
document.getElementById("columnList").innerHTML = html;
|
||
var eles = document.getElementsByClassName("inp1");
|
||
var len = eles.length;
|
||
|
||
for(var i = 0; i<len ; i++){
|
||
eles[i].addEventListener("click",function(e){
|
||
var next = e.target.nextElementSibling || e.target.nextSibling;
|
||
var id = next.innerText
|
||
var nnext = next.nextElementSibling || next.nextSibling;
|
||
var idx = nnext.value;
|
||
var selectColumnList = document.getElementById("selectColumnList");
|
||
if(e.target.checked){
|
||
selectColumnList.innerHTML = selectColumnList.innerHTML +
|
||
"<label id='"+id+"'><input class='indexs' type='hidden' value='"+idx+"'><span title='上移' style='cursor: pointer;margin-left:1em;' onclick='columnUpMove(event)'>👆</span><span class='column'>"+id+"</span><span style='cursor: pointer;' onclick='columnDownMove(event)' title='下移'>👇</span></label><br>";
|
||
}else{
|
||
var ele = document.getElementById(id);
|
||
var br = ele.nextElementSibling || ele.nextSibling;
|
||
selectColumnList.removeChild(ele);
|
||
selectColumnList.removeChild(br);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
//open设置请求方式和请求路径
|
||
xmlhttp.open("get", projectPath+'/getColumnListByTitleNumChange?filepath='+filepath+"&titleNum="+titleNum);//一个servlet，后面还可以写是否同步
|
||
//send 发送
|
||
xmlhttp.send();
|
||
}
|
||
|
||
function validStartNum(e){
|
||
var num = e.target.value;
|
||
if(num != '' && num != 'undefined' ){
|
||
if(isNaN(num)){
|
||
e.target.value = '';
|
||
}else{
|
||
if(parseFloat(num) < 0){
|
||
e.target.value = '';
|
||
}else{
|
||
num = Math.round(num);
|
||
if(num == 0){
|
||
num = 1;
|
||
}
|
||
e.target.value = num;
|
||
var endRowNum = document.getElementById("end").value;
|
||
if(endRowNum != '' && endRowNum != 'undefined' ){
|
||
if(num > endRowNum){
|
||
e.target.value = '';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function validEndNum(e){
|
||
var num = e.target.value;
|
||
if(num != '' && num != 'undefined' ){
|
||
if(isNaN(num)){
|
||
e.target.value = '';
|
||
}else{
|
||
if(parseFloat(num) < 0){
|
||
e.target.value = '';
|
||
}else{
|
||
num = Math.round(num);
|
||
if(num == 0){
|
||
num = 1;
|
||
}
|
||
e.target.value = num;
|
||
var startRowNum = document.getElementById("start").value;
|
||
if(startRowNum != '' && startRowNum != 'undefined' ){
|
||
if(num < startRowNum){
|
||
e.target.value = '';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function find(str,cha,num){
|
||
var x=str.indexOf(cha);
|
||
for(var i=0;i<num;i++){
|
||
x=str.indexOf(cha,x+1);
|
||
}
|
||
return x;
|
||
}
|
||
|
||
function getFiledListByTableName(){
|
||
|
||
var tableName = document.getElementById("tableN").value;
|
||
|
||
document.getElementById("selectFiledList").innerHTML = "";
|
||
|
||
if(tableName == ""){
|
||
document.getElementById("filedList").innerHTML = "";
|
||
}else{
|
||
xmlhttp = null;
|
||
if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
|
||
xmlhttp = new XMLHttpRequest();
|
||
} else if (window.ActiveXObject) {// code for IE6, IE5
|
||
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
||
}
|
||
//编写回调函数
|
||
xmlhttp.onreadystatechange = function() {
|
||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||
var data = JSON.parse(xmlhttp.responseText);
|
||
var html = "";
|
||
if(data != null && data.length > 0){
|
||
var len = data.length;
|
||
for(var i = 0;i<len;i++){
|
||
//+","+data[i].Type
|
||
html += "<label class='ls' ><input class='inp' field='"+data[i].Field+"' type='checkbox'><span>"+data[i].Field+"</span></label><br>";
|
||
}
|
||
}
|
||
document.getElementById("filedList").innerHTML = html;
|
||
var eles = document.getElementsByClassName("inp");
|
||
var len = eles.length;
|
||
for(var i = 0; i<len ; i++){
|
||
eles[i].addEventListener("click",function(e){
|
||
var next = e.target.nextElementSibling || e.target.nextSibling;
|
||
var id = next.innerText
|
||
var selectFiledList = document.getElementById("selectFiledList");
|
||
if(e.target.checked){
|
||
selectFiledList.innerHTML=selectFiledList.innerHTML+
|
||
"<label id='"+id+"'><input class='fields' type='hidden' value='"+id+"'><span title='上移' style='cursor: pointer;margin-left:1em;' onclick='fieldUpMove(event)'>👆</span><span class='field'>"+id+"</span><span style='cursor: pointer;' onclick='fieldDownMove(event)' title='下移'>👇</span></label><br>";
|
||
}else{
|
||
var ele = document.getElementById(id);
|
||
var br = ele.nextElementSibling || ele.nextSibling;
|
||
selectFiledList.removeChild(ele);
|
||
selectFiledList.removeChild(br);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
//open设置请求方式和请求路径
|
||
xmlhttp.open("get", projectPath+'/getFiledListByTableName?tableName='+tableName);//一个servlet，后面还可以写是否同步
|
||
//send 发送
|
||
xmlhttp.send();
|
||
}
|
||
}
|
||
|
||
function fieldUpMove(event){
|
||
var me = event.target.parentNode;
|
||
var meBr = me.nextElementSibling || me.nextSibling;
|
||
//var prevBr = me.previousElementSibling || me.previousSibling;
|
||
var prevBr = me.previousElementSibling
|
||
if(!(prevBr == 'undefined' || prevBr == 'null' || prevBr == null)){
|
||
//var prev = prevBr.previousElementSibling || prevBr.previousSibling;
|
||
var prev = prevBr.previousElementSibling;
|
||
var selectFiledList = document.getElementById("selectFiledList");
|
||
selectFiledList.removeChild(me);
|
||
selectFiledList.removeChild(meBr);
|
||
prev.parentNode.insertBefore(meBr,prev);
|
||
var newBr = prev.previousElementSibling || prev.previousSibling;
|
||
newBr.parentNode.insertBefore(me,newBr);
|
||
|
||
}
|
||
}
|
||
|
||
function fieldDownMove(event){
|
||
var me = event.target.parentNode;
|
||
var meBr = me.nextElementSibling || me.nextSibling;
|
||
var next = meBr.nextElementSibling || meBr.nextSibling;
|
||
if(!(next == 'undefined' || next == 'null' || next == null)){
|
||
var nextBr = next.nextElementSibling || next.nextSibling;
|
||
var selectFiledList = document.getElementById("selectFiledList");
|
||
selectFiledList.removeChild(next);
|
||
selectFiledList.removeChild(nextBr);
|
||
me.parentNode.insertBefore(nextBr,me);
|
||
var newBr = me.previousElementSibling || me.previousSibling;
|
||
newBr.parentNode.insertBefore(next,newBr);
|
||
}
|
||
}
|
||
|
||
/*原生JS版*/
|
||
document.getElementById("f").onchange = function() {
|
||
|
||
var fd = new FormData();
|
||
|
||
var ajax = new XMLHttpRequest();
|
||
|
||
var titleNum = document.getElementById("titleNum").value;
|
||
|
||
/* 把文件添加到表单里 */
|
||
var len = document.getElementById("f").length;
|
||
var fileName = document.getElementById("f").value;
|
||
|
||
if(fileName == ""){
|
||
document.getElementById("selectColumnList").innerHTML = "";
|
||
document.getElementById("columnList").innerHTML = "";
|
||
return;
|
||
}
|
||
|
||
var acceptFileTypes = /xls|xlsx$/i;
|
||
if(!acceptFileTypes.test(fileName)){
|
||
showMsg("请选择excel文件!");
|
||
document.getElementById("f").value="";
|
||
document.getElementById("columnList").innerHTML = "";
|
||
document.getElementById("selectColumnList").innerHTML = "";
|
||
return ;
|
||
}
|
||
if(len == 0){
|
||
document.getElementById("columnList").innerHTML = "";
|
||
}else{
|
||
|
||
fd.append("upfile", document.getElementById("f").files[0]);
|
||
|
||
ajax.open("post", projectPath+'/uploadexcel?titleNum='+titleNum, true);
|
||
|
||
ajax.onload = function () {
|
||
var data = JSON.parse(ajax.responseText);
|
||
var html = "";
|
||
if(data != null && data.length > 1){
|
||
var len = data.length;
|
||
for(var i = 0;i<len;i++){
|
||
if(!(data[i] == '' || data[i] == 'null' || data[i] == null)){
|
||
if(i == len - 1){
|
||
document.getElementById("filepath").value = data[i];
|
||
}else{
|
||
html += "<label class='ls1' ><input class='inp1' field='"+data[i]+"' type='checkbox'><span>"+data[i]+"</span><input type='hidden' value='"+i+"'></label><br>";
|
||
}
|
||
}
|
||
}
|
||
}else{
|
||
showMsg("改行不存在标题名!");
|
||
return;
|
||
}
|
||
document.getElementById("columnList").innerHTML = html;
|
||
var eles = document.getElementsByClassName("inp1");
|
||
var len = eles.length;
|
||
|
||
for(var i = 0; i<len ; i++){
|
||
|
||
eles[i].addEventListener("click",function(e){
|
||
var next = e.target.nextElementSibling || e.target.nextSibling;
|
||
var id = next.innerText
|
||
|
||
var nnext = next.nextElementSibling || next.nextSibling;
|
||
var idx = nnext.value;
|
||
var selectColumnList = document.getElementById("selectColumnList");
|
||
|
||
if(e.target.checked){
|
||
|
||
selectColumnList.innerHTML = selectColumnList.innerHTML +
|
||
"<label id='"+id+"'><input class='indexs' type='hidden' value='"+idx+"'><span title='上移' style='cursor: pointer;margin-left:1em;' onclick='columnUpMove(event)'>👆</span><span class='column'>"+id+"</span><span style='cursor: pointer;' onclick='columnDownMove(event)' title='下移'>👇</span></label><br>";
|
||
|
||
}else{
|
||
var ele = document.getElementById(id);
|
||
var br = ele.nextElementSibling || ele.nextSibling;
|
||
selectColumnList.removeChild(ele);
|
||
selectColumnList.removeChild(br);
|
||
|
||
}
|
||
});
|
||
}
|
||
};
|
||
ajax.send(fd);
|
||
}
|
||
}
|
||
|
||
function columnUpMove(event){
|
||
var me = event.target.parentNode;
|
||
var meBr = me.nextElementSibling || me.nextSibling;
|
||
//var prevBr = me.previousElementSibling || me.previousSibling;
|
||
var prevBr = me.previousElementSibling
|
||
if(!(prevBr == 'undefined' || prevBr == 'null' || prevBr == null)){
|
||
//var prev = prevBr.previousElementSibling || prevBr.previousSibling;
|
||
var prev = prevBr.previousElementSibling;
|
||
var selectFiledList = document.getElementById("selectColumnList");
|
||
selectFiledList.removeChild(me);
|
||
selectFiledList.removeChild(meBr);
|
||
prev.parentNode.insertBefore(meBr,prev);
|
||
var newBr = prev.previousElementSibling || prev.previousSibling;
|
||
newBr.parentNode.insertBefore(me,newBr);
|
||
|
||
}
|
||
}
|
||
|
||
function columnDownMove(event){
|
||
var me = event.target.parentNode;
|
||
var meBr = me.nextElementSibling || me.nextSibling;
|
||
var next = meBr.nextElementSibling || meBr.nextSibling;
|
||
if(!(next == 'undefined' || next == 'null' || next == null)){
|
||
var nextBr = next.nextElementSibling || next.nextSibling;
|
||
var selectFiledList = document.getElementById("selectColumnList");
|
||
selectFiledList.removeChild(next);
|
||
selectFiledList.removeChild(nextBr);
|
||
me.parentNode.insertBefore(nextBr,me);
|
||
var newBr = me.previousElementSibling || me.previousSibling;
|
||
newBr.parentNode.insertBefore(next,newBr);
|
||
}
|
||
}
|
||
|
||
|
||
</script> |