新增 table 的 `cellExpandedMode` 基础属性，用于设置所有单元格默认展开方式

新增 table 的 `cellExpandedWidth` 基础属性，用于设置所有单元格默认展开后的宽度
新增 table 的 `expandedMode` 表头属性，用于设置当前表头单元格展开方式，优先级高于 `cellExpandedMode`

src/css/layui.css

@@ -1157,6 +1157,7 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
 .layui-table-grid-down .layui-icon{position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; font-size: 14px;}
 .layui-table-grid-down:hover{background-color: #fbfbfb;}
 
+/* 单元格多行展开风格  */
 .layui-table-expanded{height: 95px;}
 .layui-table-expanded .layui-table-cell,
 .layui-table-view .layui-table[lay-size="sm"] .layui-table-expanded .layui-table-cell,
@@ -1165,6 +1166,14 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
 .layui-table-cell-c:hover{border-color: #16b777;}
 .layui-table-expanded td:hover .layui-table-cell{overflow: auto;}
 
+/* 单元格 TIPS 展开风格  */
+body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12);}
+.layui-table-tips-main{margin: -49px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5F5F5F;}
+.layui-table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #5F5F5F; border-radius: 50%; color: #fff;}
+.layui-table-tips-c:hover{background-color: #777;}
+.layui-table-tips-c:before{position: relative; right: -2px;}
+
+
 /** 树表 **/
 .layui-table-tree-nodeIcon {max-width: 20px;}
 .layui-table-tree-nodeIcon > * {width: 100%;}

src/modules/table.js

@@ -1310,6 +1310,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       }, 50);
       that.haveInit = true;
 
+      layer.close(that.tipsIndex);
     };
 
     table.cache[that.key] = data; //记录数据
@@ -1875,6 +1876,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
       layui.stope(e);
       _DOC.trigger('table.tool.panel.remove');
+      layer.close(that.tipsIndex);
 
       switch(events){
         case 'LAYTABLE_COLS': // 筛选列
@@ -2069,6 +2071,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
             dict.rule.style.width = setWidth + 'px';
             thatTable.setGroupWidth(thisTable.eventMoveElem);
+            layer.close(that.tipsIndex);
           }
         }
       }).on('mouseup', function(e){
@@ -2460,14 +2463,44 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
       var elemCell = td.children(ELEM_CELL);
       var ELEM_CELL_C = 'layui-table-cell-c';
       var elemCellClose = $('<i class="layui-icon layui-icon-up '+ ELEM_CELL_C +'">');
+      var expandedMode = col.expandedMode || options.cellExpandedMode;
 
+      // 展开风格
+      if (expandedMode === 'tips') { // TIPS 展开风格
+        that.tipsIndex = layer.tips([
+          '<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 23) +'px;'+ function(){
+            if(options.size === 'sm'){
+              return 'padding: 4px 15px; font-size: 12px;';
+            }
+            if(options.size === 'lg'){
+              return 'padding: 14px 15px;';
+            }
+            return '';
+          }() +'">',
+            elemCell.html(),
+          '</div>',
+          '<i class="layui-icon layui-table-tips-c layui-icon-close"></i>'
+        ].join(''), elemCell[0], {
+          tips: [3, ''],
+          time: -1,
+          anim: -1,
+          maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2,
+          isOutAnim: false,
+          skin: 'layui-table-tips',
+          success: function(layero, index){
+            layero.find('.layui-table-tips-c').on('click', function(){
+              layer.close(index);
+            });
+          }
+        });
+      } else { // 多行展开风格
         // 恢复其他已经展开的单元格
         that.elem.find('.'+ ELEM_CELL_C).trigger('click');
 
         // 设置当前单元格展开宽度
         that.cssRules(key, function(item){
           var width = item.style.width;
-        var expandedWidth = col.expandedWidth || (that.elem.width() / 3);
+          var expandedWidth = col.expandedWidth || options.cellExpandedWidth;
 
           // 展开后的宽度不能小于当前宽度
           if(expandedWidth < parseFloat(width)) expandedWidth = parseFloat(width);
@@ -2498,6 +2531,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
           });
           $this.remove();
         });
+      }
 
       othis.remove();
       layui.stope(e);
@@ -2981,5 +3015,3 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
   exports(MOD_NAME, table);
 });
-
-