优化 table 列宽自适应

layui · Nov 18, 2017 · 33e7e9a · 33e7e9a
1 parent 74d08a6
commit 33e7e9a
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 33 deletions.
diff --git a/dist/css/layui.css b/dist/css/layui.css
diff --git a/dist/lay/modules/table.js b/dist/lay/modules/table.js
diff --git a/dist/layui.all.js b/dist/layui.all.js
diff --git a/examples/table.html b/examples/table.html
@@ -101,7 +101,7 @@
       <th lay-data="{checkbox:true}"></th>
       <th lay-data="{field:'username', width:200}">昵称</th>
       <th lay-data="{field:'joinTime', width:150}">加入时间</th>
-      <th lay-data="{field:'sign', width:300}">签名</th>
+      <th lay-data="{field:'sign'}">签名</th>
     </tr> 
   </thead>
   <tbody>
@@ -129,7 +129,7 @@
 <table class="layui-table" lay-filter="parse-table-demo">
   <thead>
     <tr>
-     <td rowspan="2" lay-data="{field:'louceng', width:200}">楼层</td>
+     <td rowspan="2" lay-data="{field:'louceng'}">楼层</td>
      <td colspan="2">1单元</td>
      <td colspan="2">2单元</td>
     </tr>
@@ -198,7 +198,6 @@
       ,{field:'logins', title:'登入次数', width:100, sort: true}
       ,{field:'joinTime', title:'加入时间', width:120}
       ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
-      ,
     ]]
   });
 
@@ -212,7 +211,7 @@
       ,last: false
       ,layout: ['limit', 'prev', 'page', 'next', 'count'] //自定义分页布局
     }
-    //,height: 300
+    ,height: 300
     ,cellMinWidth: 80
     ,cols: [[
       {type:'numbers'}
@@ -223,7 +222,6 @@
       ,{field:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'}
       ,{field:'lock', title:'是否锁定', templet: '#checkboxTpl', minWidth: 110, align:'center'}
       ,{field:'city', title:'城市'}
-      ,
     ]]
   });
 
@@ -280,6 +278,19 @@
   //直接赋值数据
   table.render({
     elem: '#demo'
+    //,width: 900
+    //,height: 274
+    ,cols: [[ //标题栏
+      {type: 'checkbox', LAY_CHECKED: true}
+      ,{field: 'id', title: 'ID', width: 80, sort: true}
+      ,{type: 'space', width: 100} //空列
+      ,{field: 'username', title: '用户名', width: 120}
+      ,{field: 'email', title: '邮箱', width: 150}
+      ,{field: 'sign', title: '签名', width: 150}
+      ,{field: 'sex', title: '性别', width: 80}
+      ,{field: 'city', title: '城市', width: 100}
+      ,{field: 'experience', title: '积分', width: 80, sort: true}
+    ]]
     ,data: [{
       "id": "10001"
       ,"username": "杜甫"
@@ -370,21 +381,7 @@
       ,"logins": "106"
       ,"joinTime": "2016-10-14"
     }]
-    ,width: 900
-    //,height: 274
-    ,cols: [[ //标题栏
-      {type: 'checkbox', LAY_CHECKED: true}
-      ,{field: 'id', title: 'ID', width: 80, sort: true}
-      ,{type: 'space', width: 100} //空列
-      ,{field: 'username', title: '用户名', width: 120}
-      ,{field: 'email', title: '邮箱', width: 150}
-      ,{field: 'sign', title: '签名', width: 150}
-      ,{field: 'sex', title: '性别', width: 80}
-      ,{field: 'city', title: '城市', width: 100}
-      ,{field: 'experience', title: '积分', width: 80, sort: true}
-    ]]
-
-    ,id:'test111'
+
     ,skin: 'row' //表格风格
     ,even: true
     //,size: 'lg' //尺寸
@@ -412,7 +409,9 @@
       layer.msg(checkStatus.isAll ? '全选': '未全选')
     }
     ,parseTable: function(){
-      table.init('parse-table-demo',{limit: 1});
+      table.init('parse-table-demo', {
+        limit: 3
+      });
     }
   };
 

diff --git a/src/css/layui.css b/src/css/layui.css
@@ -287,7 +287,7 @@ a cite{font-style: normal; *cursor:pointer;}
 .layui-colla-item,
 .layui-colla-content{border-top-width: 1px; border-top-style: solid;}
 .layui-colla-item:first-child{border-top: none;}
-.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #f2f2f2; cursor: pointer;}
+.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #f2f2f2; cursor: pointer; font-size: 14px;}
 .layui-colla-content{display: none; padding: 10px 15px; line-height: 22px; color: #666;}
 .layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}
 

diff --git a/src/lay/modules/table.js b/src/lay/modules/table.js
@@ -530,8 +530,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form'], function(exports){
               if(item3.type === 'checkbox'){
                 return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
                   var checkName = table.config.checkName;
+                  //如果是全选
                   if(item3[checkName]){
-                    tplData[checkName] = item3[checkName];
+                    item1[checkName] = item3[checkName];
                     return item3[checkName] ? 'checked' : '';
                   }
                   return tplData[checkName] ? 'checked' : '';
@@ -818,17 +819,20 @@ layui.define(['laytpl', 'laypage', 'layer', 'form'], function(exports){
     ,scollHeight = that.layMain.height() - that.layMain.prop('clientHeight') //横向滚动条高度
     ,getScrollWidth = that.getScrollWidth(that.layMain[0]) //获取主容器滚动条宽度，如果有的话
     ,outWidth = layMainTable.outerWidth() - that.layMain.width(); //表格内容器的超出宽度
-    
-    //如果存在自动列宽，则要保证绝对填充满，并且不能出现滚动条
-    if(that.autoColNums && !that.scrollPatchWStatus){
+
+    //如果存在自动列宽，则要保证绝对填充满，并且不能出现横向滚动条
+    if(that.autoColNums && outWidth < 5 && !that.scrollPatchWStatus){
       var th = that.layHeader.eq(0).find('thead th:last-child')
       ,field = th.data('field');
       that.getCssRule(field, function(item){
         var width = item.style.width || th.outerWidth();
-        item.style.width = (parseFloat(width) - getScrollWidth - function(){
-          if(outWidth < 0) return outWidth;
-          if(outWidth < 5) return outWidth;
-        }()) + 'px';
+        item.style.width = (parseFloat(width) - getScrollWidth - outWidth) + 'px';
+
+        //二次校验，如果仍然出现横向滚动条
+        if(that.layMain.height() - that.layMain.prop('clientHeight') > 0){
+          item.style.width = parseFloat(item.style.width) - 1 + 'px';
+        }
+
         that.scrollPatchWStatus = true;
       });
     }