bootstrap使用

界面内容：

      折叠

      文件上传

      弹框

<html>
  <head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 折叠面板</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
   
  <link href="css/plugins/footable/footable.core.css" rel="stylesheet">
  <script src="js/plugins/footable/footable.all.min.js"></script>
   
  <!-- 文件上传-->
  <link rel="stylesheet" href="css/layui.css">
  <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
  <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
  <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
   
  <style>
  .succ-pop{
  height: 600px;
  background: rgb(100%,100%,100%);
  position: absolute;
  left: 25%;
  right: 25%;
  top: 10%;
  /*margin-left: -200px;*/
  /*margin-top: -150px;*/
  z-index: 999;
  border-radius: 5px;
  text-align:center
  }
  .succ-pop h3.title{
  text-align: center;
  font-size: 22px;
  color: #dfdfdf;
  }
  #div_header{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 90%;
  font-size: 22px;
  /*color: #dfdfdf;*/
  background: #212a31;
  }
   
  #div_body{
  position: absolute;
  top: 10%;
  right: 0;
  left: 0;
  bottom: 0%;
  font-size: 22px;
  /*color: #dfdfdf;*/
  background: #ffffff;
  }
  #a_btn{
  position: absolute;
  right: 5%;
  }
   
  #div_before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  }
   
  /*body{ text-align:center}*/
  /*div{*/
  /* border : 1px solid black;*/
  /* margin : 10px 20px 30px 40px;*/
  /*}*/
  /*样式2*/
  .file {
  position: relative;
  display: inline-block;
  background: #D0EEFF;
  border: 1px solid #99D3F5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1E88C7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  }
  .file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
  }
  .file:hover {
  background: #AADFFD;
  border-color: #78C3F3;
  color: #004974;
  text-decoration: none;
  }
  </style>
  </head>
  <body>
   
  <script type="text/javascript">
   
  function getDocumentInfo(id)
  {
  var li="";
   
  // $.ajax({
  // type: 'POST',
  // url: "testServlet",
  // data: {"id":id},
  // dataType: "json",
  // success: function (data) {
  //
  // },
  // error:{
  // }
  // })
   
  li+="<li>"+id+"</li>";
   
   
  $("#ol").text("");
  $("#ol").append(li);
   
  }
   
  //查询维度信息
  function selectCleanData(id)
  {
  // $.ajax({
  // type: 'POST',
  // url: "testServlet",
  // data: {"id":id},
  // dataType: "json",
  // success: function (data) {
  //
  // },
  // error:{
  // }
  // })
   
   
   
  }
   
  function cleanData()
  {
  var select1="";
  var select2="";
   
  alert("test")
  // $.ajax({
  // type: 'POST',
  // url: "testServlet",
  // data: {"id":id},
  // dataType: "json",
  // success: function (data) {
  //
  // },
  // error:{
  // }
  // })
   
  select1+="<option>行业</option><option>教育</option><option>地域</option>"
  select2="<option>2019</option>"
   
  $("#select1").text("");
  $("#select1").append(select1);
  $("#select2").text("");
  $("#select2").append(select2);
   
  $("#div").css("display","block");
  }
   
  $.ajax({
  type: 'POST',
  url: "testServlet",
  data: {"test":"1"},
  dataType: "json",
  success: function (data) {
   
  alert(JSON.stringify(data));
  //var jsons=params.message;
  // num_tr=data.length;
  // alert(num_tr);
  var div="";
  for(var i=0;i<data.length;i++)
  {
  div+=" <div class=\"panel panel-default\">\n" +
  " <div class=\"panel-heading\">\n" +
  " <h4 class=\"panel-title\">\n" +
  " <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse"+i+"\" onclick=\"getDocumentInfo("+data[i]["id"]+")\">\n" +
  " "+data[i]["title"]+
  // "<span class=\"label label-primary\">主要标签</span>\n" +
  " </a>\n" +
  " </h4>\n" +
  " </div>\n" +
  " <div id=\"collapse"+i+"\" class=\"panel-collapse collapse in\">\n" +
  " <div class=\"panel-body\" >\n" +
  " <table id=\"table1\" class=\"footable table table-stripped toggle-arrow-tiny\" data-page-size=\"8\">\n"+
  " <thead>\n" +
  " <tr>\n" +
  " <th data-toggle=\"true\">字段名</th>\n" +
  " <th >中文字段名</th>\n" +
  " <th>清洗记录</th>\n" +
  " <th data-hide=\"all\">数据类型</th>\n" +
  " <th data-hide=\"all\">数据长度</th>\n" +
  " <th data-hide=\"all\">备注</th>\n" +
  " <th>操作</th>\n" +
  " </tr>\n" +
  " </thead>\n"+
  " <tbody>\n";
   
  var content=data[i]["content"]
  for(var j=0;j<data[i]["content"].length;j++)
  {
  div+=
  " <tr>\n" +
  " <td>"+content[j]["name"]+"</td>\n" +
  " <td>"+content[j]["name_cn"]+"</td>\n" +
  " <td>行业维度</td>\n" +
  " <td>"+content[j]["type"]+"</td>\n" +
  " <td>"+content[j]["length"]+"</td>\n" +
  " <td>"+content[j]["meanings"]+"</td>\n" +
  " <td><a id=\"a\" onclick='cleanData()' href=\"#\">清洗</a></td>\n" +
  " </tr>\n";
  }
  div+=" </tbody>\n" +
  " <tfoot>\n" +
  " <tr>\n" +
  " <td colspan=\"5\">\n" +
  " <ul class=\"pagination pull-right\"></ul>\n" +
  " </td>\n" +
  " </tr>\n" +
  " </tfoot>\n" +
  " </table>\n" +
  " </div>\n" +
  " </div>\n" +
  " </div>";
  }
   
  $("#accordion").append(div);
   
  alert("alert");
  $(".footable").footable();
   
  $(".collapse").removeClass("in");
   
  },
  error:function () {
  }
   
  });
  </script>
   
  <!--主界面-->
  <!--***************************************************************************************************-->
  <div style="position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;">
  <div>
  <button id="btn" class="btn btn-success">文件上传</button>
  <p></p>
  <input onkeyup="myFunction()" type="text" class="form-control" id="filter"
  placeholder="搜索表格...">
  </div>
  <hr>
  <div class="" style="">
  <div class="row">
  <div class="col-md-8 ">
  <div class="panel-group" id="accordion">
   
   
  </div>
  </div>
   
  <div class="col-md-4">
  <pre class="pre-scrollable">
  <ol id="ol">
   
  </ol>
  </pre>
  </div>
  </div>
  </div>
  </div>
   
  <!--上传-->
  <!--***************************************************************************************************-->
  <div id="div_before">
   
  <div style="z-index: 0;position: absolute;top: 10%;left: 25%;bottom: 10%;right: 25%;background: #ffffff ;z-index: 1">
  <!-- <div style="background: #212a31;height: 100px;">-->
  <!-- <button class="btn btn-info"></button>-->
  <!-- <button id="a_btn" class="btn">关闭</button>-->
  <div style="background: #212a31;position: absolute;top: 0;right: 0;left: 0;bottom: 90%;">
  <button type="button" class="close c" aria-hidden="true" style="color: #ffffff;width: 10%;height: 100%;">
  <span style="color: #ffffff" aria-hidden="true">&times;</span>
  </button>
  </div>
  <!-- </div>-->
   
  <!-- <iframe src="upload.html" width="1000" height="750"></iframe>-->
  <div name="dropbox" id="dropbox" class="divcss5" align="center">
  <p style="text-align: center;margin-top: 20%">将文件拖拽至此区域<br>
  <br><span>-或-</span><br><br>
  <a style="width: 120px;text-align: center" href="javascript:void(0);" class="file">选择文件
  <input id="file" class="filePrew" type="file" name="file" multiple="multiple" onchange="javascript:onc();" >
  </a>
  </p>
  <table id="fileliststring" class="table table-hover layui-table" style="
  margin:20px auto;
  min-height: 0;
  width: 700px;
  height:auto; overflow:hidden;">
  </table>
  <button id="upload" class="layui-btn layui-btn-normal layui-btn-radius" style="display: none" type="submit" onclick="javascript:Upload();">上传文件</button>
  </div>
  </div>
  </div>
   
  <!--上传确认-->
  <!--***************************************************************************************************-->
  <div class="div" style="z-index: 1;background: rgba(0,0,0,0.5);display: none;position: absolute;top: 0;right: 0;left: 0;bottom: 0" class="panel-group">
  <div style="background: #FFFFFF ;position: absolute; left: 10%;right: 10%;top: 10%;bottom: 10%;">
  <div style="height: 100px;: 100px;position: absolute; left: 0;right: 0;top: 0;bottom: 0;background: #212a31">
  <button class="btn btn-success btn-info disabled">确认保存</button>
  <button class="btn btn-danger">内容错误</button>
  <button type="button" id="close" class="close" aria-hidden="true" style="color: #ffffff;width: 10%;height: 100%;">
  <span style="color: #ffffff" aria-hidden="true">&times;</span>
  </button>
  <!-- <button class="btn" style="position: absolute;right: 5%;">退出</button>-->
  </div>
   
  <div class="panel-group" style="position: absolute;top: 100px;left: 0;right: 0;">
  <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
  <a data-toggle="collapse" data-parent="#accordion"
  href="#collapseFour">
  点击我进行展开，再次点击我进行折叠。第 1 部分
  </a>
  </h4>
  </div>
  <div id="collapseFour" class="panel-collapse collapse in">
  <div class="panel-body">
  <table id="table" style="overflow:scroll;" class="table table-hover">
  <thead>
  <tr>
  <th>序号</th>
  <th>主从表关联ID</th>
  <th>调查单位名称</th>
  <th>所属地域</th>
  <th>企业名称</th>
  <th>组织机构代码或统一社会信用代码</th>
  <th>法定代表人</th>
  <th>单位负责人</th>
  <th>地址</th>
  <th>邮编</th>
  <th>电子邮箱</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr>
  <tr>
  <td>sid</td>
  <td>sRecordID</td>
  <td>sname</td>
  <td>sbelongwhere</td>
  <td>qke100</td>
  <td>qke09</td>
  <td>qke109</td>
  <td>qscharger</td>
  <td>qke101</td>
  <td>qke102</td>
  <td>qke108</td>
   
  </tr>
  <tr>
  <td>1</td>
  <td>14</td>
  <td>河北软件产业基地（石家庄）</td>
  <td>130196</td>
  <td>河北旭辉电气股份有限公司</td>
  <td>91130100732892243F</td>
  <td>张旭辉</td>
  <td>张旭辉</td>
  <td>石家庄高新区湘江道226号</td>
  <td>050035</td>
  <td>xhwlxm@126.com</td>
   
  </tr>
  </tbody>
  </table>
  </div>
  </div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
  <a data-toggle="collapse" data-parent="#accordion"
  href="#collapseFive">
  点击我进行展开，再次点击我进行折叠。第 2 部分
  </a>
  </h4>
  </div>
  <div id="collapseFive" class="panel-collapse collapse in">
  <div class="panel-body">
  <!-- <button class="button1">test</button>-->
  <table id="AlarmTable" style="overflow:scroll;" class="table table-hover">
  <thead>
  <tr>
  <th>序号</th>
  <th>主从表关联ID</th>
  <th>调查单位名称</th>
  <th>所属地域</th>
  <th>企业名称</th>
  <th>组织机构代码或统一社会信用代码</th>
  <th>法定代表人</th>
  <th>单位负责人</th>
  <th>地址</th>
  <th>邮编</th>
  <th>电子邮箱</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr>
  <tr>
  <td>sid</td>
  <td>sRecordID</td>
  <td>sname</td>
  <td>sbelongwhere</td>
  <td>qke100</td>
  <td>qke09</td>
  <td>qke109</td>
  <td>qscharger</td>
  <td>qke101</td>
  <td>qke102</td>
  <td>qke108</td>
   
  </tr>
  <tr>
  <td>1</td>
  <td>14</td>
  <td>河北软件产业基地（石家庄）</td>
  <td>130196</td>
  <td>河北旭辉电气股份有限公司</td>
  <td>91130100732892243F</td>
  <td>张旭辉</td>
  <td>张旭辉</td>
  <td>石家庄高新区湘江道226号</td>
  <td>050035</td>
  <td>xhwlxm@126.com</td>
   
  </tr>
  </tbody>
  </table>
   
  </div>
  </div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
  <a data-toggle="collapse" data-parent="#accordion"
  href="#collapseSix">
  <div>文件名</div>
  </a>
  </h4>
  </div>
  <div id="collapseSix" class="panel-collapse collapse in">
  <div class="panel-body">
  <table style="overflow:scroll;" class="table table-hover">
  <thead>
  <tr>
  <th>序号</th>
  <th>主从表关联ID</th>
  <th>调查单位名称</th>
  <th>所属地域</th>
  <th>企业名称</th>
  <th>组织机构代码或统一社会信用代码</th>
  <th>法定代表人</th>
  <th>单位负责人</th>
  <th>地址</th>
  <th>邮编</th>
  <th>电子邮箱</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr>
  <tr>
  <td>sid</td>
  <td>sRecordID</td>
  <td>sname</td>
  <td>sbelongwhere</td>
  <td>qke100</td>
  <td>qke09</td>
  <td>qke109</td>
  <td>qscharger</td>
  <td>qke101</td>
  <td>qke102</td>
  <td>qke108</td>
   
  </tr>
  <tr>
  <td>1</td>
  <td>14</td>
  <td>河北软件产业基地（石家庄）</td>
  <td>130196</td>
  <td>河北旭辉电气股份有限公司</td>
  <td>91130100732892243F</td>
  <td>张旭辉</td>
  <td>张旭辉</td>
  <td>石家庄高新区湘江道226号</td>
  <td>050035</td>
  <td>xhwlxm@126.com</td>
   
  </tr>
  </tbody>
  </table>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
   
  <!--数据清洗-->
  <!--***************************************************************************************************-->
  <div id="div" style="z-index: 1;display: none;background: rgba(0,0,0,0.5);position: absolute;top: 0;right: 0;left: 0;bottom: 0;">
  <div style="background: #ffffff;position: absolute;top: 20%;right: 25%;left: 25%;bottom: 10%;">
  <div style="background: #212a31;position: absolute;top: 0;right: 0;left: 0;bottom: 90%;">
  <button type="button" class="close c" aria-hidden="true" style="color: #ffffff;width: 10%;height: 100%;">
  <span style="color: #ffffff" aria-hidden="true">&times;</span>
  </button>
  </div>
  <div style="position: absolute;top: 10%;right: 0;left: 0;bottom: 0;">
  <form role="form">
  <div class="form-group col-lg-2">
  <label>清洗维度</label>
  <select class="form-control" id="select1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  </select>
  <label>清洗年份</label>
  <select class="form-control" id="select2">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  </select>
  </div>
  <div style="position: absolute;top: 25%" class="col-md-12">
  <button type="button" class="btn btn-primary btn-lg btn-block btn-success">确认清洗</button>
  <button type="button" class="btn btn-primary btn-lg btn-block btn-warning c">取消</button>
  <hr>
  <div style="overflow: scroll;max-height: 250px">
  <table class="table table-condensed" style="">
  <thead>
  <tr>
  <th>年份</th>
  <th>维度名</th>
  <th>维度编码</th></tr>
  </thead>
  <tbody>
  <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td></tr>
  <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td></tr>
  <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td></tr>
  <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td></tr>
  <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td></tr>
  <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td></tr>
  <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td></tr>
  <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td></tr>
  <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td></tr>
  <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td></tr>
  <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td></tr>
  <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td></tr>
  </tbody>
  </table>
  </div>
  </div>
  </form>
  </div>
  </div>
  </div>
  <script>
  $(document).ready(function(){
  $(".footable").footable();
   
  $(".collapse").removeClass("in");
   
  // $("#upload").click(function (){
  // $(".div").css("display","block");
  // })
   
  $("#a").click(function (){
  alert("test")
  $("#div").css("display","block");
  })
   
  $(".c").click(function (){
  $("#div").css("display","none");
  $("#div_before").css("display","none");
  })
  $("#close").click(function (){
  $(".div").css("display","none");
  })
   
  $("#btn").click(function (){
  $("#div_before").css("display","block");
  })
  // $("#a_btn").click(function (){
  // $("#div_before").css("display","none");
  // })
  });
  </script>
   
  <script>
  var uploadFiles = new Array();
  $(function(){
  //阻止浏览器默认行为。
  $(document).on({
  dragleave:function(e){ //拖离
  e.preventDefault();
  },
  drop:function(e){ //拖后放
  e.preventDefault();
  },
  dragenter:function(e){ //拖进
  e.preventDefault();
  },
  dragover:function(e){ //拖来拖去
  e.preventDefault();
  }
  });
  var box = document.getElementById('dropbox'); //拖拽区域
  box.addEventListener("drop",function(e){
  e.preventDefault(); //取消默认浏览器拖拽效果
  var fileList = e.dataTransfer.files; //获取文件对象
  //检测是否是拖拽文件到页面的操作
  if(fileList.length == 0){
  return false;
  }
  AddFiles(fileList);
  },false);
  });
  function Refresh(){
  location.reload();
  }
   
  function Upload(){
  AddFiles(new Array());
  if(uploadFiles.length <= 0){
  // Refresh();
  $(".div").css("display","block");
  return;
  }
  uploadcount = uploadFiles.length ;
  var FileController = "UploadServlet"; // 接收上传文件的后台地址
  // FormData 对象
   
  var form = new FormData();
  form.append("file", uploadFiles[0]);
  // XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();
  xhr.open("post", FileController, true);
  xhr.onload = function () {
  Upload();
  };
  xhr.send(form);
  uploadFiles.splice(0,1);
   
  }
  function onc(){
  var files = document.getElementById("file").files;
  if(files.length < 0){
  return ;
  }
  AddFiles(files);
  }
  function AddFiles(files){
  var errstr = "";
  for(var i=0; i< files.length; i++){
  var filename = files[i].name;
  var isfind = false;
  for(var j=0; j< uploadFiles.length; j++){
  if(uploadFiles[j].name == filename){
  isfind = true;
  break;
  }
  }
  var index1=filename.lastIndexOf(".");
  var index2=filename.length;
  var postf=filename.substring(index1+1,index2);//后缀名
  //var myarray = new Array('JPG','jpg','jpeg','JPEG','gif','GIF','png','PNG','txt','xlsx','xls','doc','docx','rtf','csv');
  var myarray=new Array('xlsx','xlsx','csv');
  if($.inArray(postf,myarray) == -1){
  errstr += filename + "/";
  continue;
  }
  if(isfind == false){
  uploadFiles.push(files[i]);
  }
  }
  if(errstr != ""){
  alert("文件格式错误:"+errstr);
  }
  var fileliststring = "";
  if(uploadFiles.length<=0){
  $("#upload").hide();
  }
  else{$("#upload").show();}
  for(var j=0; j< uploadFiles.length; j++){
  fileliststring += "<tr><td align='center'>"+uploadFiles[j].name +"</td>"+"<td align='center'>大小:" + (uploadFiles[j].size / 1000) + "k" + "</td></tr>";
  }
  document.getElementById("fileliststring").innerHTML=fileliststring;
  }
   
  function deleted() {
  alert("完成");
  $.ajax({
  type: 'POST',
  url: "DeleteServlet",
  data: {"test": "1"},
  dataType: "json",
  success: function (data) {
  }
  })
  }
  </script>
  </body>
  </html>
posted @ 2021-12-08 22:18  新古董  阅读(40)  评论(0)    收藏  举报