|
|
@@ -1,212 +1,136 @@
|
|
|
-<!DOCTYPE html>
|
|
|
+<!DOCTYPE HTML>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
- <title>table</title>
|
|
|
- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap-grid.css" rel="stylesheet">
|
|
|
- <style type="text/css">
|
|
|
- #test th{
|
|
|
- position: sticky;
|
|
|
- position: -webkit-sticky;
|
|
|
+ <title>简单的模态框(Modal)</title>
|
|
|
+ <style>
|
|
|
+ .modal:before {
|
|
|
+ content: "";
|
|
|
+ display: none;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ position: fixed;
|
|
|
top: 0;
|
|
|
- z-index:999;
|
|
|
- background-color: white;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .modal:target:before {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .modal:target .modal-dialog {
|
|
|
+ -webkit-transform: translate(0, 0);
|
|
|
+ -ms-transform: translate(0, 0);
|
|
|
+ transform: translate(0, 0);
|
|
|
+ top: 20%;
|
|
|
+ }
|
|
|
+ .modal-dialog {
|
|
|
+ background: #fefefe;
|
|
|
+ border: #333 solid 1px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: -120px;
|
|
|
+ position: fixed;
|
|
|
+ left: 35%;
|
|
|
+ z-index: 11;
|
|
|
+ width: 800px;
|
|
|
+ -webkit-transform: translate(0, -500%);
|
|
|
+ -ms-transform: translate(0, -500%);
|
|
|
+ transform: translate(0, -500%);
|
|
|
+ -webkit-transition: -webkit-transform 0.3s ease-out;
|
|
|
+ -moz-transition: -moz-transform 0.3s ease-out;
|
|
|
+ -o-transition: -o-transform 0.3s ease-out;
|
|
|
+ transition: transform 0.3s ease-out;
|
|
|
+ }
|
|
|
+ .modal-body {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ .modal-header {
|
|
|
+ border-bottom: #eee solid 1px;
|
|
|
+ }
|
|
|
+ .modal-header h2 {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ .box-shadow-dark{
|
|
|
+ box-shadow: 0 0 10px 5px rgba(0,0,0,0.9);
|
|
|
+ z-index:100;
|
|
|
+ position:relative;
|
|
|
+ }
|
|
|
+ .modal-body-div{
|
|
|
+ width: 30%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .modal-body-item{
|
|
|
+ margin: 10px;
|
|
|
+ border: 3px solid red;
|
|
|
+ border-radius: 5px;
|
|
|
+ height:100px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column
|
|
|
+ }
|
|
|
+ .modal-body-item-text{
|
|
|
+ margin-left:10%;
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ .modal-footer {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ .modal-footer {
|
|
|
+ border-top: #eee solid 1px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ background: #428bca;
|
|
|
+ border: #357ebd solid 1px;
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 8px 15px;
|
|
|
+ text-decoration: none;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 60px;
|
|
|
+ position: relative;
|
|
|
+ transition: color .1s ease;
|
|
|
+ }
|
|
|
+ .btn:hover {
|
|
|
+ background: #357ebd;
|
|
|
}
|
|
|
</style>
|
|
|
- <link href="{{ mix('css/app.css') }}" rel="stylesheet">
|
|
|
</head>
|
|
|
<body>
|
|
|
-<button onclick="a()">11111111</button>
|
|
|
-<table id="table" cellspacing="0" cellpadding="2" width="100%" border="1">
|
|
|
- <tr id="test" style="white-space: nowrap !important;">
|
|
|
- <th >用户编号</th>
|
|
|
- <th>试用时间</th>
|
|
|
- <th>转正时间</th>
|
|
|
- <th>生日时间</th>
|
|
|
- <th>民族</th>
|
|
|
- <th>身高</th>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td style="overflow-x: hidden"><div>1</div>200004512312312321321</td>
|
|
|
- <td>2001-2-15</td>
|
|
|
- <td>2001-3-15</td>
|
|
|
- <td>1978-8-5</td>
|
|
|
- <td>汉</td>
|
|
|
- <td rowspan="2">162</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td colspan="3">1</td>
|
|
|
- <td>2</td>
|
|
|
- <td>3</td>
|
|
|
- </tr>
|
|
|
-</table>
|
|
|
-<div id="setting-1" onclick="tt()" style="position: fixed;bottom: 0;left: 0;background-color: #1b1e21;width: 50px;height: 50px;cursor: pointer;text-align: center;border-radius: 3px">
|
|
|
- <h1><span class="fa fa-spin fa-gear" style="color: white;"></span></h1>
|
|
|
-</div>
|
|
|
-<div id="setting-2" style="background-color: white;position: fixed;bottom: 0;left: 0;width: 100%;display: none">
|
|
|
- <div style="width: 100%;background-color: RGB(245,245,200);border-top: 1px solid #1b1e21">
|
|
|
- <div style="width: 30px;display:inline-block;text-align: center"><span class="fa fa-gear"></span></div>
|
|
|
- <div style="width: 5%;display:inline-block;border-left: 1px solid #aaaaaa;text-align: center;cursor: pointer;background-color: #3490dc;color: white">显示列</div>
|
|
|
- <div style="width: 5%;display:inline-block;border-left: 1px solid #aaaaaa;text-align: center;cursor: pointer">表头设置</div>
|
|
|
- <b style="float: right;margin-right:10px;cursor: pointer;font-size: 18px">×</b>
|
|
|
- </div>
|
|
|
- <div style="width: 100%;min-height: 50px;margin: 10px 50px 20px 50px">
|
|
|
- <div id="setting-column">
|
|
|
- <label style="width: 7%;">
|
|
|
- <label style="float: left;white-space: nowrap">
|
|
|
- <label style="display: inline-block">
|
|
|
- <input type="checkbox" id="column-x" class="fixed-checkbox" checked value="1" onclick="test()">
|
|
|
- <label for="column-x" class="h-100"></label>
|
|
|
- </label>
|
|
|
- <label style="display: inline-block"><div>测试啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div></label>
|
|
|
- </label>
|
|
|
- </label>
|
|
|
- <label style="width: 7%;">
|
|
|
- <label style="float: left">
|
|
|
- <input type="checkbox" id="column-x" class="fixed-checkbox" checked value="1" onclick="test()">
|
|
|
- <label for="column-x"></label> 测试
|
|
|
- </label>
|
|
|
- </label>
|
|
|
- <div><button class="btn btn-sm btn-success">保存</button></div>
|
|
|
+<a href="#modal-one">111</a>
|
|
|
+<div class="modal" id="modal-one" aria-hidden="true">
|
|
|
+ <div class="modal-dialog">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h2>选择仓库</h2>
|
|
|
</div>
|
|
|
- <div id="setting-header">
|
|
|
- 清除本地列宽设置:
|
|
|
- <button type="button" class="btn btn-sm btn-outline-danger">清除全部</button>
|
|
|
- <button type="button" class="btn btn-sm btn-outline-danger">清除本页</button>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="modal-body-div" data-id="1">
|
|
|
+ <div class="box-shadow-dark modal-body-item"><div class="modal-body-item-text">测试喜喜喜喜喜喜喜喜喜喜顶顶顶顶顶顶顶顶顶顶顶</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body-div">
|
|
|
+ <div class="box-shadow-dark modal-body-item"><div class="modal-body-item-text">测试喜喜喜喜喜喜喜喜喜喜顶顶顶顶顶顶顶顶顶顶顶</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body-div">
|
|
|
+ <div class="box-shadow-dark modal-body-item"><div class="modal-body-item-text">测试喜喜喜喜喜喜喜喜喜喜顶顶顶顶顶顶顶顶顶顶顶</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body-div">
|
|
|
+ <div class="box-shadow-dark modal-body-item"><div class="modal-body-item-text">测试喜喜喜喜喜喜喜喜喜喜顶顶顶顶顶顶顶顶顶顶顶</div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <a href="#" class="btn" onclick="test()">确 定</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
- function a() {
|
|
|
- let trs = document.getElementById("table").getElementsByTagName("tr");
|
|
|
- let count = trs[0].children.length;
|
|
|
- let show = [1,5];
|
|
|
- for (let i=0;i<trs.length;i++){
|
|
|
- if (count!==trs[i].children.length){
|
|
|
- let pointer = [];
|
|
|
- for (let j=0;j<trs[i].children.length;j++){
|
|
|
- if (trs[i].children[j] && trs[i].children[j].colSpan>1){
|
|
|
- for (let k=0;k<trs[i].children[j].colSpan;k++)pointer.push(j);
|
|
|
- }else pointer.push(j);
|
|
|
- }
|
|
|
- console.log(pointer)
|
|
|
- for (let j=0;j<show.length;j++){
|
|
|
- let dom = trs[i].children[pointer[show[j]]];
|
|
|
- console.log(j,pointer[show[j]])
|
|
|
- if (dom){
|
|
|
- if (dom.colSpan>1)dom.colSpan--;
|
|
|
- else dom.hidden = true;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- function tt() {
|
|
|
- let width = document.documentElement.clientWidth;
|
|
|
- let div = document.getElementById("setting-2");
|
|
|
- div.style.width = width+"px";
|
|
|
- div.style.height = "100"+"px";
|
|
|
- div.style.display = "block";
|
|
|
- document.getElementById("setting-1").style.display = "none";
|
|
|
- }
|
|
|
function test() {
|
|
|
- localStorage.setItem("name:xx1",[11,22,33]);
|
|
|
- localStorage.setItem("name:xx2","22");
|
|
|
- localStorage.setItem("name:xx3","33");
|
|
|
- for (let i=0;i<localStorage.length;i++){
|
|
|
- console.log(localStorage.key(i))
|
|
|
- console.log(localStorage.getItem(localStorage.key(i)));
|
|
|
- }
|
|
|
- let _name = "column:xxx.";
|
|
|
-
|
|
|
- let val = event.target.value;
|
|
|
- let checked = event.target.checked;
|
|
|
-
|
|
|
- console.log(checked);
|
|
|
- }
|
|
|
-</script>
|
|
|
-<script type="text/javascript">
|
|
|
- var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
|
|
|
|
|
|
- var table = document.getElementById("table");
|
|
|
- function a1() {
|
|
|
- let div = document.createElement("div");
|
|
|
- div.className = "test ";
|
|
|
- div.className += "test1";
|
|
|
- div.className += "test2";
|
|
|
- console.log(div);
|
|
|
- }
|
|
|
- function a2() {
|
|
|
- for (let i=0;i<table.children[0].children.length;i++){
|
|
|
- let arr = table.children[0].children[i].children;
|
|
|
- for (let j=0;j<arr.length;j++){
|
|
|
- let td = arr[j];
|
|
|
- let div = document.createElement("div");
|
|
|
- div.style.overflowX = "hidden";
|
|
|
- let count = td.childNodes.length;
|
|
|
- for (let k=0;k<count;k++){div.appendChild(td.childNodes[0]);}
|
|
|
- td.appendChild(div);
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- var down = false;
|
|
|
- for (i = 0; i < table.rows[0].cells.length; i++) {
|
|
|
- table.rows[0].cells[i].onmousedown = function () {
|
|
|
- //记录单元格
|
|
|
- tTD = this;
|
|
|
- if (event.offsetX > tTD.offsetWidth - 10) {
|
|
|
- down = true;
|
|
|
- tTD.oldX = event.x;
|
|
|
- tTD.oldWidth = tTD.offsetWidth;
|
|
|
- }
|
|
|
- //记录Table宽度
|
|
|
- table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
|
|
|
- tTD.tableWidth = table.offsetWidth;
|
|
|
- };
|
|
|
- table.rows[0].cells[i].onmousemove = function () {
|
|
|
- //更改鼠标样式
|
|
|
- if (event.offsetX > this.offsetWidth - 10)
|
|
|
- this.style.cursor = 'col-resize';
|
|
|
- else
|
|
|
- this.style.cursor = 'default';
|
|
|
- //取出暂存的Table Cell
|
|
|
- if (tTD == undefined) tTD = this;
|
|
|
- }
|
|
|
- }
|
|
|
- document.onmouseup = function () {
|
|
|
- if (down) {
|
|
|
- //结束宽度调整
|
|
|
- if (tTD == undefined) tTD = this;
|
|
|
- down = false;
|
|
|
- tTD.style.cursor = 'default';
|
|
|
- }
|
|
|
- };
|
|
|
- document.onmousemove = function () {
|
|
|
- if (down) {
|
|
|
- //调整宽度
|
|
|
- if (down) {
|
|
|
- tTD.style.cursor = 'default';
|
|
|
- if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
|
|
|
- tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
|
|
|
- //调整列宽
|
|
|
- tTD.style.width = tTD.width;
|
|
|
- tTD.style.cursor = 'col-resize';
|
|
|
- //调整该列中的每个Cell
|
|
|
- table = tTD;
|
|
|
- while (table.tagName != 'TABLE') table = table.parentElement;
|
|
|
- setTimeout(()=>{
|
|
|
- for (i = 0; i < table.rows.length; i++) {
|
|
|
- let td = table.rows[i].cells[tTD.cellIndex];
|
|
|
- td.firstChild.style.width = tTD.width+"px";
|
|
|
- }
|
|
|
- });
|
|
|
- //调整整个表
|
|
|
- table.width = tTD.tableWidth + (tTD.offsetWidth - tTD.oldWidth);
|
|
|
- table.style.width = table.width;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|