新增表格列表内容弹窗展示

public/assets/css/backend.css

@@ -1613,4 +1613,25 @@ table.table-nowrap thead > tr > th {
   display: block;
   border-bottom: 1px solid #ddd;
 }
+.autocontent {
+  position: relative;
+}
+.autocontent .autocontent-caret {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  line-height: 1;
+  background: #eee;
+  color: #ddd;
+  vertical-align: middle;
+  padding: 0 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.autocontent .autocontent-caret:hover {
+  color: #ccc;
+}
 /*# sourceMappingURL=backend.css.map */

public/assets/css/frontend.css

@@ -1108,4 +1108,25 @@ main.content {
   display: block;
   border-bottom: 1px solid #ddd;
 }
+.autocontent {
+  position: relative;
+}
+.autocontent .autocontent-caret {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  line-height: 1;
+  background: #eee;
+  color: #ddd;
+  vertical-align: middle;
+  padding: 0 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.autocontent .autocontent-caret:hover {
+  color: #ccc;
+}
 /*# sourceMappingURL=frontend.css.map */

public/assets/js/require-table.js

@@ -196,6 +196,8 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
                 //当刷新表格时
                 table.on('refresh.bs.table', function (e, settings, data) {
                     $(Table.config.refreshbtn, toolbar).find(".fa").addClass("fa-spin");
+                    //移除指定浮动弹窗
+                    $(".layui-layer-autocontent").remove();
                 });
                 //当执行搜索时
                 table.on('search.bs.table common-search.bs.table', function (e, settings, data) {
@@ -463,9 +465,6 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
                     $("tbody", table).dragsort({
                         itemSelector: 'tr:visible',
                         dragSelector: "a.btn-dragsort",
-                        dragBegin: function (a, b) {
-                            $("[data-toggle='tooltip']", this).tooltip("destroy");
-                        },
                         dragEnd: function (a, b) {
                             var element = $("a.btn-dragsort", this);
                             var data = table.bootstrapTable('getData');
@@ -549,6 +548,30 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
                         }
                     );
                 });
+                table.on("mouseenter mouseleave", ".autocontent", function (e) {
+                    var target = $(".autocontent-item", this).get(0);
+                    if (!target) return;
+                    if (e.type === 'mouseenter') {
+                        if (target.scrollWidth > target.offsetWidth) {
+                            $(this).append("<div class='autocontent-caret'><i class='fa fa-chevron-down'></div>");
+                        }
+                    } else {
+                        $(".autocontent-caret", this).remove();
+                    }
+                });
+                table.on("click", ".autocontent-caret", function () {
+                    var text = $(this).prev().text();
+                    var tdrect = $(this).parent().get(0).getBoundingClientRect();
+                    tdrect.x += document.documentElement.scrollLeft;
+                    tdrect.y += document.documentElement.scrollTop;
+                    var index = Layer.open({id: 'autocontent', skin: 'layui-layer-fast layui-layer-autocontent', title: false, content: text, btn: false, anim: false, shade: 0, isOutAnim: false, area: 'auto', maxWidth: 450, maxHeight: 350, offset: [tdrect.y, tdrect.x]});
+
+                    $(document).one("mousedown", function (e) {
+                        if ($(e.target).closest(".layui-layer").length === 0) {
+                            Layer.close(index);
+                        }
+                    });
+                });
 
                 //修复dropdown定位溢出的情况
                 if (options.fixDropdownPosition) {
@@ -730,8 +753,8 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
                     return html.join(' ');
                 },
                 content: function (value, row, index) {
-                    var width = this.width != undefined ? (this.width.match(/^\d+$/) ? this.width + "px" : this.width) : "250px";
+                    var width = this.width != undefined ? (this.width.toString().match(/^\d+$/) ? this.width + "px" : this.width) : "250px";
-                    return "<div style='white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:" + width + ";'>" + value + "</div>";
+                    return "<div class='autocontent-item' style='white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:" + width + ";'>" + value + "</div>";
                 },
                 status: function (value, row, index) {
                     var custom = {normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'};

public/assets/less/backend.less

@@ -1663,3 +1663,27 @@ table.table-nowrap {
 
     }
 }
+
+.autocontent {
+    position: relative;
+
+    .autocontent-caret {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        line-height: 1;
+        background: #eee;
+        color: #ddd;
+        vertical-align: middle;
+        padding: 0 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            color: #ccc;
+        }
+    }
+}

public/assets/less/frontend.less

@@ -969,3 +969,27 @@ main.content {
 
     }
 }
+
+.autocontent {
+    position: relative;
+
+    .autocontent-caret {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        line-height: 1;
+        background: #eee;
+        color: #ddd;
+        vertical-align: middle;
+        padding: 0 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            color: #ccc;
+        }
+    }
+}