暂时提交

resources/js/queryForm/header.js

@@ -129,7 +129,7 @@ window.Header = function getHeader(object) {
                 window.sort.sort(_this._data,columnArrTemp,sortType);
             }
         }
-    };
+    }
     //追加表头字段
     function append() {
         _this._columns.forEach(function (column) {

resources/views/customer/project/area.blade.php

@@ -26,8 +26,8 @@
                 <input id="all" type="checkbox" @click="checkAll($event)">全选
             </label>
             <table class="d-none" id="headerRoll"></table>
-            <table class="table table-sm table-striped table-hover" id="headerParent">
-                <tr class="text-nowrap" id="header"></tr>
+            <table class="table table-sm table-striped table-hover table-bordered" id="headerParent">
+                {{--<tr class="text-nowrap" id="header"></tr>--}}
                 <tr v-for="(area,i) in areas">
                     <td>
                         <label><input type="checkbox" :value="area.id" v-model="checkData"></label>
@@ -41,8 +41,8 @@
                         <span v-if="area.status=='已完成'" class="text-success font-weight-bold">@{{ area.status }}</span>
                         <span v-if="area.status=='已审核'" class="text-primary font-weight-bold">@{{ area.status }}</span>
                     </td>
-                    <td>@{{ area.userOwnerGroupName }}</td>
-                    <td>@{{ area.customerName }}</td>
+                    <td style="min-width: 50px">@{{ area.userOwnerGroupName }}</td>
+                    <td style="min-width: 50px">@{{ area.customerName }}</td>
                     <td>@{{ area.ownerName }}</td>
                     <td>@{{ area.countingMonth }}</td>
                     <td>@{{ area.updatedAt }}</td>
@@ -148,7 +148,7 @@
 
 @section('lastScript')
     <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
-    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
+    <script type="text/javascript" src="{{asset('js/test.js')}}"></script>
     <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
     <script>
         let vue = new Vue({
@@ -231,8 +231,8 @@
                 });
                 this.form.init();
                 let column = [
-                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
-                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
+
+                    {name:'index',value: '序号', neglect: true},
                     {name:'index',value: '序号', neglect: true},
                     {name:'status',value: '状态'},
                     {name:'userOwnerGroupName',value: '项目组'},
@@ -247,19 +247,12 @@
                     {name:'areaOnFlat',value: '平面区', neglect: true},
                     {name:'accountingArea',value: '结算', neglect: true},
                 ];
-                let _this=this;
-                setTimeout(function () {
-                    let header = new Header({
-                        el: "#header",
-                        column: column,
-                        data: _this.reports,
-                        restorationColumn: 'id',
-                        fixedTop:($('#form_div').height())+2,
-                        offset:0.5,
-                        vue:vue
-                    });
-                    header.init();
-                },0);
+                new Header({
+                    el: "headerParent",
+                    column: column,
+                    data: this.reports,
+                    fixedTop:($('#form_div').height())+2,
+                }).init();
             },
             methods:{
                 openAll(index){

resources/views/test1.blade.php

@@ -5,170 +5,505 @@
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <title>表头列头固定 -- Sara</title>
     <style>
-        body{font-size:12px;}
-        .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}
-        .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}
-        .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}
-        .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}
-        .dd{height:200px!important; height:208px; overflow-y:hidden;}
-        .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}
-        .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}
-        .ee{width:618px!important; width:620px}
-        .t_i_h table{width:600px;}
-        .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}
-        .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}
-        .cc table{width:600px; }
-        .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}
+        table tr td{
+            border: 2px solid #d5aba1
+        }
+        table tr th{
+            border: 2px solid #1b1e21;
+        }
+        div.sticky {
+            position: -webkit-sticky;
+            position: sticky;
+            top: 0;
+            background-color: white;
+            z-index: 1030;
+        }
     </style>
     <script>
         function aa(){
-            var a=document.getElementById("cc").scrollTop;
-            var b=document.getElementById("cc").scrollLeft;
-            document.getElementById("dd").scrollTop=a;
-            document.getElementById("hh").scrollLeft=b;
+            let ta = document.getElementById("table");
+            let tds = ta.getElementsByTagName("tr")[0].getElementsByTagName("td");
+            for (let i=0;i<tds.length;i++){
+                console.log(tds[i].offsetWidth);
+            }
         }
     </script>
 </head>
 <body>
-<div class="t_n">
-    <span>序号</span>
-    <div class="dd" id="dd">
-        <table cellpadding="0" cellspacing="0" border="0" class="t_number">
-            <tbody>
-            <tr>
-                <td>1</td>
-            </tr>
-            <tr>
-                <td>2</td>
-            </tr>
-            <tr>
-                <td>3</td>
-            </tr>
-            <tr>
-                <td>4</td>
-            </tr>
-            <tr>
-                <td>5</td>
-            </tr>
-            <tr>
-                <td>6</td>
-            </tr>
-            <tr>
-                <td>7</td>
-            </tr>
-            <tr>
-                <td>8</td>
-            </tr>
-            <tr>
-                <td>9</td>
-            </tr>
-            <tr>
-                <td>10</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-</div>
-<!--table-->
-<div class="t_i">
-    <div class="t_i_h" id="hh">
-        <div class="ee">
-            <table cellpadding="0" cellspacing="0" border="0">
-                <tr>
-                    <td width="10%">标题A</td>
-                    <td width="20%">标题B</td>
-                    <td width="10%">标题C</td>
-                    <td width="20%">标题D</td>
-                    <td width="20%">标题E</td>
-                    <td width="20%">标题F</td>
-                </tr>
-            </table>
-        </div>
-    </div>
-    <div class="cc" id="cc" onscroll="aa()">
-        <table cellpadding="0" cellspacing="0" border="0">
-            <tr>
-                <td width="10%">1</td>
-                <td width="20%">1</td>
-                <td width="10%">1</td>
-                <td width="20%">1</td>
-                <td width="20%">1</td>
-                <td width="20%">1</td>
-            </tr>
-            <tr>
-                <td>2</td>
-                <td>2</td>
-                <td>2</td>
-                <td>2</td>
-                <td>2</td>
-                <td>2</td>
-            </tr>
-            <tr>
-                <td>3</td>
-                <td>3</td>
-                <td>3</td>
-                <td>3</td>
-                <td>3</td>
-                <td>3</td>
-            </tr>
-            <tr>
-                <td>4</td>
-                <td>4</td>
-                <td>4</td>
-                <td>4</td>
-                <td>4</td>
-                <td>4</td>
-            </tr>
-            <tr>
-                <td>5</td>
-                <td>5</td>
-                <td>5</td>
-                <td>5</td>
-                <td>5</td>
-                <td>5</td>
-            </tr>
-            <tr>
-                <td>6</td>
-                <td>6</td>
-                <td>6</td>
-                <td>6</td>
-                <td>6</td>
-                <td>6</td>
-            </tr>
-            <tr>
-                <td>7</td>
-                <td>7</td>
-                <td>7</td>
-                <td>7</td>
-                <td>7</td>
-                <td>7</td>
-            </tr>
-            <tr>
-                <td>8</td>
-                <td>8</td>
-                <td>8</td>
-                <td>8</td>
-                <td>8</td>
-                <td>8</td>
-            </tr>
-            <tr>
-                <td>9</td>
-                <td>9</td>
-                <td>9</td>
-                <td>9</td>
-                <td>9</td>
-                <td>9</td>
-            </tr>
-            <tr>
-                <td>10</td>
-                <td>10</td>
-                <td>10</td>
-                <td>10</td>
-                <td>10</td>
-                <td>10</td>
-            </tr>
-        </table>
-    </div>
+<div  class="sticky">
+    <table>
+        <tr>
+            <th style="min-width: 600px;">标题1</th>
+            <th style="min-width: 600px;">标题2</th>
+            <th style="min-width: 600px;">标题3</th>
+            <th style="min-width: 600px;">标题4</th>
+            <th style="min-width: 600px;">标题5</th>
+            <th style="min-width: 600px;">标题6</th>
+            <th style="min-width: 600px;">标题7</th>
+            <th style="min-width: 600px;">标题8</th>
+            <th style="min-width: 600px;" onclick="aa()">标题9</th>
+        </tr>
+    </table>
 </div>
+<table id="table">
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr><tr>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+        <td>111</td>
+    </tr>
+    <tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr>
+    <tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr>
+    <tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr>
+    <tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr>
+    <tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr><tr>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+        <td>222</td>
+    </tr>
+
+</table>
 </body>
 </html>