Jelajahi Sumber

模块数据维护表头固定

zhangxc 5 tahun lalu
induk
melakukan
d2d5049ae7
3 mengubah file dengan 53 tambahan dan 16 penghapusan
  1. 23 1
      src/css/moduleManager.less
  2. 15 11
      src/html/moduleManager.html
  3. 15 4
      src/js/moduleManager.js

+ 23 - 1
src/css/moduleManager.less

@@ -20,6 +20,7 @@ h2{
 .totalSumBox{
     margin: 0 0 20px 0;
     text-align: right;
+    padding: 0 20px 0 0;
     .totalSum{
         color: red;
     }
@@ -28,7 +29,7 @@ table{
     width: 100%;
     border:1px solid #E2E5EF;
     border-collapse: collapse;/*关键代码*/
-  
+    min-width: 800px;
     thead{
         background: #EFF0F9;
        
@@ -50,9 +51,27 @@ table{
     }
     .moduleNumber{
         text-align: center;
+        width: 15%;
+        min-width: 30px;
+    }
+    .moduleName{
+        width: 55%;
+    }
+    .moduleScore{
+        text-align: center;
+        width: 15%;
+        min-width: 30px;
+    }
+    .moduleOpera{
+        text-align: center;
+        width: 15%;
+        min-width: 30px;
     }
     
 }
+.tableTitle table{
+    background: #EFF0F9;
+}
 .moduleScore, .totalSum{
     text-align: center;
     input{
@@ -73,6 +92,9 @@ table{
     cursor: pointer;
 }
 .tableWrapper{
+   
+}
+.tableInfo{
     overflow-y: auto;
 }
 .mask {

+ 15 - 11
src/html/moduleManager.html

@@ -15,17 +15,21 @@
        <div class="main-body">
            <p class="totalSumBox">当前分数合计:<span class="totalSum"></span></p>
            <div class="tableWrapper">
-                <table>
-                    <thead>
-                        <th class="moduleNumber">序号</th>
-                        <th class="moduleName">模块名称</th>
-                        <th class="moduleScore">分值</th>
-                        <th class="moduleOpera">操作</th>
-                    </thead>
-                    <tbody>
-
-                    </tbody>
-                </table>
+                <div  class="tableTitle">
+                    <table>
+                        <tr>
+                            <td class="moduleNumber">序号</td>
+                            <td class="moduleName">模块名称</td>
+                            <td class="moduleScore">分值</td>
+                            <td class="moduleOpera">操作</td>
+                        </tr>
+                    </table>
+                </div>
+                <div  class="tableInfo">
+                    <table>
+                   
+                    </table>
+                </div>
            </div>
             
             <!-- <div class="saveModuleBox">

+ 15 - 4
src/js/moduleManager.js

@@ -7,9 +7,14 @@ require('./modal.js');
 // const  layui = require('layui-src');
 const {api} = require('./api.js')
 const {post,getCookie} = require('./utils.js')
-$(".tableWrapper").css({
-    height:$(window).height()-180+'px'
-})
+function setTbaleInfoHei(){
+ 
+    $(".tableInfo").css({
+        height:$(window).height()-180+'px'
+    })
+}
+setTbaleInfoHei()
+
 //判断有无某一权限
 function hasData(data){
     let lis = JSON.parse(getCookie("codeLis"))
@@ -81,7 +86,12 @@ function renderTab(){
     //     <td class="totalSum"></td>
     // </tr>
     // `
-    $('table tbody').html(str)
+    $('.tableInfo table').html(str)
+    const tableInfoBox =  $(".tableInfo").height()
+    const tableInfoHei =  $(".tableInfo table").height()
+    if(tableInfoHei > tableInfoBox){
+        $(".tableTitle").css("paddingRight", 15+'px')
+    }
     // bindInput()
     bindModuleOpera()
     getTotalSum()
@@ -100,6 +110,7 @@ function bindModuleOpera(){
 }
 function getTotalSum(){
     let sum = 0
+    console.log('data', data)
     for(let i = 0; i < data.length; i++){
         if(data[i].score){
             sum += Number(data[i].score)