优化 table 初始化时的样式渲染及多行模式的内容结构

src/modules/table.js

@@ -258,29 +258,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     ,'<div class="layui-table-column layui-table-page layui-hide">'
       ,'<div class="layui-inline layui-table-pageview" id="layui-table-page{{=d.index}}"></div>'
     ,'</div>'
-
-    ,'<style>'
-    ,'{{# layui.each(d.data.cols, function(i1, item1){'
-      ,'layui.each(item1, function(i2, item2){ }}'
-        ,'.laytable-cell-{{=d.index}}-{{=i1}}-{{=i2}}{ '
-        ,'{{# if(item2.width){ }}'
-          ,'width: {{=item2.width}}px;'
-        ,'{{# } }}'
-        ,' }'
-      ,'{{# });'
-    ,'}); }}'
-    ,'{{# if(d.data.lineStyle){'
-      ,'var cellClassName = ".layui-table-view-"+ d.index +" .layui-table-body .layui-table .layui-table-cell";'
-    ,'}}'
-      ,'{{= cellClassName }}{'
-        ,'display: -webkit-box; -webkit-box-align: center; -moz-box-align: start; white-space: normal; {{- d.data.lineStyle }} '
-      ,'}'
-      ,'{{= cellClassName }}:hover{overflow: auto;}'
-    ,'{{# } }}'
-    ,'{{# if(d.data.css){ }}'
-      ,'{{- d.data.css }}'
-    ,'{{# } }}'
-    ,'</style>'
   ].join('');
 
   var _WIN = $(window);
@@ -385,13 +362,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       options.height = $(that.parentDiv).height() - that.parentHeightGap;
     }
 
-    //开始插入替代元素
+    // 开始插入替代元素
     var othis = options.elem;
     var hasRender = othis.next('.' + ELEM_VIEW);
 
-    //主容器
+    // 主容器
     var reElem = that.elem = $('<div></div>');
 
+    // 添加 className
     reElem.addClass(function(){
       var arr = [
         ELEM_VIEW,
@@ -418,11 +396,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       index: that.index //索引
     }));
 
-    //生成替代元素
+    // 初始化样式
-    hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
+    that.renderStyle();
+
+    // 生成替代元素
+    hasRender[0] && hasRender.remove(); // 如果已经渲染，则 Rerender
     othis.after(reElem);
 
-    //各级容器
+    // 各级容器
     that.layTool = reElem.find(ELEM_TOOL);
     that.layBox = reElem.find(ELEM_BOX);
     that.layHeader = reElem.find(ELEM_HEADER);
@@ -443,11 +424,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     // 让表格平铺
     that.fullSize();
 
-    that.pullData(that.page); //请求数据
+    that.pullData(that.page); // 请求数据
-    that.events(); //事件
+    that.events(); // 事件
   };
 
-  //根据列类型，定制化参数
+  // 根据列类型，定制化参数
   Class.prototype.initOpts = function(item){
     var that = this
     var options = that.config;
@@ -458,7 +439,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       numbers: 60
     };
 
-    //让 type 参数兼容旧版本
+    // 让 type 参数兼容旧版本
     if(item.checkbox) item.type = "checkbox";
     if(item.space) item.type = "space";
     if(!item.type) item.type = "normal";
@@ -553,6 +534,60 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
   };
 
+  // 初始化样式
+  Class.prototype.renderStyle = function() {
+    var that = this;
+    var options = that.config;
+    var index = that.index;
+    var text = [];
+
+    // 单元格宽度
+    layui.each(options.cols, function(i1, item1) {
+      layui.each(item1, function(i2, item2) {
+        var key = [index, i1, i2].join('-');
+        var val = item2.width ? ['width: ', item2.width, 'px'].join('') : '';
+        text.push('.laytable-cell-'+ key +'{'+ val +'}');
+      });
+    });
+
+    // 自定义行样式
+    (function (lineStyle) {
+      if (!lineStyle) return;
+      var trClassName = '.layui-table-view-'+ index +' .layui-table-body .layui-table tr';
+      var rules = lineStyle.split(';');
+      var cellMaxHeight = 'none';
+
+      // 计算单元格最大高度
+      layui.each(rules, function(i, rule) {
+        rule = rule.split(':');
+        if (rule[0] === 'height') {
+          var val = parseFloat(rule[1]);
+          if (!isNaN(val)) cellMaxHeight = (val - 1) + 'px';
+          return true;
+        }
+      });
+
+      // 多行相关样式
+      layui.each([
+        '{'+ lineStyle +'}',
+        '.layui-table-cell{height: auto; max-height: '+ cellMaxHeight +'; white-space: normal; text-overflow: clip;}',
+        '> td:hover > .layui-table-cell{overflow: auto;}'
+      ], function(i, val) {
+        text.push(trClassName + ' ' + val);
+      });
+    })(options.lineStyle);
+
+    // 自定义 css 属性
+    if (options.css) text.push(options.css);
+
+    // 生成 style
+    lay.style({
+      target: that.elem[0],
+      text: text.join(''),
+      id: 'DF-'+ index
+    });
+  };
+
   // 初始工具栏
   Class.prototype.renderToolbar = function(){
     var that = this
@@ -784,7 +819,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
       // 给未分配宽的列平均分配宽
       if(item3.width === 0){
-        that.getCssRule(item3.key, function(item){
+        that.cssRules(item3.key, function(item){
           item.style.width = Math.floor(function(){
             if(autoWidth < minWidth) return minWidth;
             if(autoWidth > maxWidth) return maxWidth;
@@ -795,7 +830,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
       // 给设定百分比的列分配列宽
       else if(/\d+%$/.test(item3.width)){
-        that.getCssRule(item3.key, function(item){
+        that.cssRules(item3.key, function(item){
           var width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth);
           width < minWidth && (width = minWidth);
           width > maxWidth && (width = maxWidth);
@@ -805,7 +840,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
       // 给拥有普通 width 值的列分配最新列宽
       else {
-        that.getCssRule(item3.key, function(item){
+        that.cssRules(item3.key, function(item){
           item.style.width = item3.width + 'px';
         });
       }
@@ -828,7 +863,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       var th = getEndTh();
       var key = th.data('key');
 
-      that.getCssRule(key, function(item){
+      that.cssRules(key, function(item){
         var width = item.style.width || th.outerWidth();
         item.style.width = (parseFloat(width) + patchNums) + 'px';
 
@@ -1662,20 +1697,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
     }
   };
 
-  // 获取 cssRule
+  // 获取对应单元格的 cssRules
-  Class.prototype.getCssRule = function(key, callback){
+  Class.prototype.cssRules = function(key, callback){
     var that = this;
     var style = that.elem.children('style')[0];
-    var sheet = style.sheet || style.styleSheet || {};
+
-    var rules = sheet.cssRules || sheet.rules;
+    lay.getStyleRules(style, function(item){
-    layui.each(rules, function(i, item){
+      if (item.selectorText === ('.laytable-cell-'+ key)) {
-      if(item.selectorText === ('.laytable-cell-'+ key)){
         return callback(item), true;
       }
     });
   };
 
-  //让表格铺满
+  // 让表格铺满
   Class.prototype.fullSize = function(){
     var that = this;
     var options = that.config;
@@ -2002,7 +2036,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
         e.preventDefault();
         dict.offset = [e.clientX, e.clientY]; //记录初始坐标
 
-        that.getCssRule(key, function(item){
+        that.cssRules(key, function(item){
           var width = item.style.width || othis.outerWidth();
           dict.rule = item;
           dict.ruleWidth = parseFloat(width);
@@ -2061,7 +2095,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
           delete thisTable.eventMoveElem;
 
           // 列拖拽宽度后的事件
-          thatTable.getCssRule(key, function(item){
+          thatTable.cssRules(key, function(item){
             col.width = parseFloat(item.style.width);
             layui.event.call(th[0], MOD_NAME, 'colResized('+ filter +')', {
               col: col,
@@ -2433,7 +2467,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       that.elem.find('.'+ ELEM_CELL_C).trigger('click');
 
       // 设置当前单元格展开宽度
-      that.getCssRule(key, function(item){
+      that.cssRules(key, function(item){
         var width = item.style.width;
         var expandedWidth = col.expandedWidth || (that.elem.width() / 3);
 
@@ -2443,7 +2477,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
         elemCellClose.data('cell-width', width);
         item.style.width = expandedWidth + 'px';
 
-        that.scrollPatch(); // 滚动条补丁
+        setTimeout(function(){
+          that.scrollPatch(); // 滚动条补丁
+        });
       });
 
       // 设置当前单元格展开样式
@@ -2458,7 +2494,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       elemCellClose.on('click', function(){
         var $this = $(this);
         that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
-        that.getCssRule(key, function(item){
+        that.cssRules(key, function(item){
           item.style.width =  $this.data('cell-width'); // 恢复单元格展开前的宽度
           that.resize(); // 滚动条补丁
         });