表头拖拽 嵌套方案解决

resources/js/queryForm/header.js

@@ -15,6 +15,7 @@ window.Header = function getHeader(object) {
     let columnArr = []; //列数组
 
     let moveTd = {}; //移动列
+    let isNested = _targetDom.getElementsByTagName("table").length>0;
 
     function getTargetChildNode(dom) { //递归获取input子节点
         if (!dom || dom.tagName==='INPUT')return dom;
@@ -36,49 +37,47 @@ window.Header = function getHeader(object) {
         });
         _targetDom.insertBefore(tr, _targetDom.firstChild);
     }
-    function appendFloat(th) {
-        th.style.position = "sticky";
-        th.style.position = "-webkit-sticky";
+    function appendFloat(div,cla="") {
+        div.style.overflowX = "hidden";
+        let th = document.createElement("th");
+        th.className = "header-float "+cla;
         th.style.top = _fixedTop+"px";
-        th.style.backgroundColor = "white";
-        th.style.zIndex = "99";
+        th.appendChild(div);
+        return th;
     }
     function createHeader() {//生成表头列
         let tr = document.createElement("tr");
-        tr.className = "text-center";
+        tr.className = "text-center text-nowrap";
         let firstTr = _targetDom.getElementsByTagName("tr")[0];
         let tds = [];
         if (firstTr)tds = firstTr.children;
 
         if (_isCheckAllBox){//是否开启全选
-            let th = document.createElement("th");
-            appendFloat(th);
-            if (firstTr) th.style.minWidth = tds[0].offsetWidth+"px";
-            th.className = "text-left";
+            let div = document.createElement("div");
             let check = document.createElement("input");
             check.type = "checkbox";
             check.id = "checkAll";
             if (firstTr)bindCheckbox(check);
-            th.appendChild(check);
-            tr.appendChild(th);
+            div.appendChild(check);
+            tr.appendChild(appendFloat(div,"text-left"));
         }
 
         let i = (_isCheckAllBox && firstTr) ? 1 : 0;
         for (i;i<(tds.length>0 ? tds.length : _columns.length);i++){
-            let th = document.createElement("th");
-            appendFloat(th);
+            let div = document.createElement("div");
             let column = _columns[(_isCheckAllBox && firstTr) ? i-1 : i];
             let wid = localStorage.getItem(_name+column.name);
             if (wid){
                 let trs = _targetDom.children;
                 while(trs[0].tagName !== 'TR')trs = trs[0].children;
                 for (let j=0;j<trs.length;j++){
-                    trs[j].children[i].style.minWidth = wid+"px";
+                    trs[j].children[i].firstChild.style.width = wid+"px";
                 }
             }
+            let th = appendFloat(div);
             if (column){
-                if (column.type === 'multi')  multiColumn(th,column);
-                else defaultColumn(th,column);
+                if (column.type === 'multi')  multiColumn(div,column);
+                else defaultColumn(div,column);
             }
             tr.appendChild(th);
         }
@@ -105,12 +104,11 @@ window.Header = function getHeader(object) {
             });
             th.appendChild(div);
         }
-        return th;
     }
 
     function defaultColumn(th,column) { //默认列样式的生成
-        if (column.style)for (let key in column.style)if (column.style.hasOwnProperty(key)) th.style[key] = column.style[key];
-        if (column.class)th.className =  column.class;
+        if (column.style)for (let key in column.style)if (column.style.hasOwnProperty(key)) th.parentElement.style[key] = column.style[key];
+        if (column.class)th.parentElement.className +=  column.class;
         let span = document.createElement("span");
         span.style.display = "inline-block";
         if (!column.neglect){
@@ -122,7 +120,6 @@ window.Header = function getHeader(object) {
         }
         span.appendChild(document.createTextNode((column.value ? column.value : '')));
         th.appendChild(span);
-        return th;
     }
 
     //点击事件触发的排序规则
@@ -246,22 +243,44 @@ window.Header = function getHeader(object) {
             if (moveTd.oldX){
                 event.stopPropagation();
                 let diff = event.clientX-moveTd.oldX;
-                let newWidth = moveTd.dom.offsetWidth+diff+"px";
-                setTimeout(()=>{
-                    let trs = _targetDom.children;
-                    if (trs){
-                        while(trs[0].tagName !== 'TR')trs = trs[0].children;
-                        for (let j=0;j<trs.length;j++){
-                            if (trs[j].children[moveTd.index]) trs[j].children[moveTd.index].style.minWidth = newWidth;
+                let newWidth = moveTd.dom.firstChild.offsetWidth+diff+"px";
+                if (diff!==0){
+                    let trs = _targetDom.getElementsByTagName("tr");
+                    for (let j=(_before ? 1 : 0);j<trs.length;j++){
+                        if (isNested){
+                            let table = trs[j].parentElement;
+                            while (table.tagName!=='TABLE') table = table.parentElement;
+                            if (table.id!==object.el)continue;
                         }
+                        trs[j].children[moveTd.index].firstChild.style.width = newWidth;
+                        trs[j].children[moveTd.index].style.minWidth = newWidth;
                     }
-                },0);
-                moveTd.oldX = event.clientX;
+                    moveTd.oldX = event.clientX;
+                }
             }
         };
     }
+    function repaintDom() {
+        let trs = _targetDom.getElementsByTagName("tr");
+        for (let i=0;i<trs.length;i++){
+            if (isNested){
+                let table = trs[i].parentElement;
+                while (table.tagName!=='TABLE') table = table.parentElement;
+                if (table.id!==object.el)continue;
+            }
+            let tds = trs[i].children;
+            for (let j=0;j<tds.length;j++){
+                let div = document.createElement("div");
+                div.style.overflowX = "hidden";
+                let count = tds[j].childNodes.length;
+                for (let k=0;k<count;k++){div.appendChild(tds[j].childNodes[0]);}
+                tds[j].appendChild(div);
+            }
+        }
+    }
     //初始化
     this.init = function() {
+        repaintDom();
         createHeader();
         if (_before)createHeaderBefore();
     };

resources/sass/text.scss

@@ -225,4 +225,12 @@
 //规定最小宽度
 .td-min-width-80 tr td{
     min-width: 80px;
+}
+
+//浮动表头
+.header-float{
+    position: sticky;
+    position: -webkit-sticky;
+    background-color: white;
+    z-index: 99;
 }

resources/views/order/index/delivering.blade.php

@@ -81,12 +81,16 @@
                             </div>
                             <span v-else>@{{ order.soreference5 }}</span>
                         </td>
-                        <td class="text-muted text-wrap text-letter" style="max-width: 200px">@{{ order.c_contact }}</td>
-                        <td class="text-muted text-wrap text-letter" style="width: 150px">@{{ order.c_tel2?order.c_tel2:order.c_tel1 }}</td>
+                        <td class="text-muted text-wrap text-letter">
+                            <div class="text-overflow-warp-200">@{{ order.c_contact }}</div>
+                        </td>
+                        <td class="text-muted text-wrap text-letter">
+                            <div class="text-overflow-warp-200" style="min-width: 150px">@{{ order.c_tel2?order.c_tel2:order.c_tel1 }}</div>
+                        </td>
                         <td class="text-nowrap"> @{{ order.c_province }}</td>
                         <td class="text-nowrap"> @{{ order.c_city }}</td>
-                        <td class="text-nowrap"> @{{ order.c_district }}</td>
-                        <td class="text-muted text-wrap text-letter" style="max-width: 500px">@{{ order.c_address1 }}</td>
+                        <td class="text-nowrap"><div class="text-overflow-warp-200">@{{ order.c_district }}</div></td>
+                        <td class="text-muted text-wrap text-letter"><div class="text-overflow-warp-200" style="min-width: 200px">@{{ order.c_address1 }}</div></td>
                         <td class="text-nowrap">@{{ order.waveno }}</td>
                         <td class="text-nowrap"> @{{ order.warehouseid }}</td>
                         <td class="text-nowrap"><span v-if="order.edisendflag2=='Y'">是</span><span v-if="order.edisendflag2=='N'">否</span><span v-if="order.edisendflag2=='W'">错误</span></td>

resources/views/test.blade.php

@@ -16,7 +16,7 @@
 <body>
 <button onclick="a()">11111111</button>
 <table id="table" cellspacing="0" cellpadding="2" width="100%" border="1">
-    <tr id="test">
+    <tr id="test" style="white-space: nowrap !important;">
         <th >用户编号</th>
         <th>试用时间</th>
         <th>转正时间</th>
@@ -25,7 +25,7 @@
         <th>身高</th>
     </tr>
     <tr>
-        <td style="overflow-x: hidden">200004512312312321321</td>
+        <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>
@@ -246,19 +246,35 @@
         <td>2001-3-23</td>
         <td>2001-2-23</td>
         <td>汉</td>
-        <td>171</td>
+        <td>171
+
+        </td>
     </tr>
 </table>
 <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 a() {
+        let dd = document.getElementById("table");
+        console.log(dd.getElementsByTagName("table"))
+    }
+    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);
             }
         }
@@ -308,9 +324,12 @@
                 //调整该列中的每个Cell
                 table = tTD;
                 while (table.tagName != 'TABLE') table = table.parentElement;
-                for (i = 0; i < table.rows.length; i++) {
-                    table.rows[i].cells[tTD.cellIndex].width = tTD.width;
-                }
+                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;