LayUI-数据表格字段内容过多无法全部显示,鼠标悬浮显示省略内容问题解决!...

本人使用LayUI开发,发现数据表格内容过多显示不完整时LayUI居然不支持鼠标悬浮显示全部信息,网上也有其他网友有解决方案,不过都是治标不治本,通过研究源码已解决该问题!

1、找到table.js文件;

2、js中找到

M.prototype.renderData = function (e, n, o, r) {}

函数,该函数是用于拼装table使用的。

仔细研究该函数(网友自己去看一下源码)会发现拼装html时根本就没有添加title属性。我们只需要把该属性添加上去再把值拼装到title中即可。

请各位查看绿色带有下划线的代码,加上这一段代码就可以实现了!代码不多解释,我也只是根据他们的逻辑修改的,在深入就看不懂了!惭愧!

M.prototype.renderData = function (e, n, o, r) {
    var c = this, s = c.config, u = e[s.response.dataName] || [], y = [], p = [], m = [], v = function () {
        return !r && c.sortKey ? c.sort(c.sortKey.field, c.sortKey.sort, !0) : (layui.each(u, function (e, a) {
            var l = [], o = [], u = [], h = e + s.limit * (n - 1) + 1;
            0 !== a.length && (r || (a[d.config.indexName] = e), c.eachCols(function (e, n) {
                var r = n.field || e, f = a[r];
                c.getColElem(c.layHeader, r);
                if (void 0 !== f && null !== f || (f = ""), !(n.colspan > 1)) {
                    var y = ['<td data-field="' + r + '" ' + function () {
                        var e = [];
                        return n.edit && e.push('data-edit="' + n.edit + '"'), n.align && e.push('align="' + n.align + '"'), n.templet && e.push('data-content="' + f + '"'), n.toolbar && e.push('data-off="true"'), n.event && e.push('lay-event="' + n.event + '"'), n.style && e.push('style="' + n.style + '"'), n.minWidth && e.push('data-minwidth="' + n.minWidth + '"'), e.join(" ")
                    }() + ">", '<div title="' + function () {
                        var e = t.extend(!0, {LAY_INDEX: h}, a);
                        return "normal" === n.type ? i(t(n.templet).html() || String(f)).render(e) : ''
                    }() + '" class="layui-table-cell laytable-cell-' + function () {
                        var e = s.index + "-" + r;
                        return "normal" === n.type ? e : e + " laytable-cell-" + n.type
                    }() + '">' + function () {
                        var e = t.extend(!0, {LAY_INDEX: h}, a);
                        return "checkbox" === n.type ? '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" ' + function () {
                            var t = d.config.checkName;
                            return n[t] ? (a[t] = n[t], n[t] ? "checked" : "") : e[t] ? "checked" : ""
                        }() + ">" : "numbers" === n.type ? h : n.toolbar ? i(t(n.toolbar).html() || "").render(e) : n.templet ? function () {
                            return "function" == typeof n.templet ? n.templet(e) : i(t(n.templet).html() || String(f)).render(e)
                        }() : f
                    }(), "</div></td>"].join("");
                    l.push(y), n.fixed && "right" !== n.fixed && o.push(y), "right" === n.fixed && u.push(y)
                }
            }), y.push('<tr data-index="' + e + '">' + l.join("") + "</tr>"), p.push('<tr data-index="' + e + '">' + o.join("") + "</tr>"), m.push('<tr data-index="' + e + '">' + u.join("") + "</tr>"))
        }), c.layBody.scrollTop(0), c.layMain.find("." + f).remove(), c.layMain.find("tbody").html(y.join("")), c.layFixLeft.find("tbody").html(p.join("")), c.layFixRight.find("tbody").html(m.join("")), c.renderForm(), c.syncCheckAll(), c.haveInit ? c.scrollPatch() : setTimeout(function () {
            c.scrollPatch()
        }, 50), c.haveInit = !0, void l.close(c.tipsIndex))
    };
    return c.key = s.id || s.index, d.cache[c.key] = u, c.layPage[0 === u.length && 1 == n ? "addClass" : "removeClass"](h), r ? v() : 0 === u.length ? (c.renderForm(), c.layFixed.remove(), c.layMain.find("tbody").html(""), c.layMain.find("." + f).remove(), c.layMain.append('<div class="' + f + '">' + s.text.none + "</div>")) : (v(), void(s.page && (s.page = t.extend({
        elem: "layui-table-page" + s.index,
        count: o,
        limit: s.limit,
        limits: s.limits || [10, 20, 30, 40, 50, 60, 70, 80, 90],
        groups: 3,
        layout: ["prev", "page", "next", "skip", "count", "limit"],
        prev: '<i class="layui-icon">&#xe603;</i>',
        next: '<i class="layui-icon">&#xe602;</i>',
        jump: function (e, t) {
            t || (c.page = e.curr, s.limit = e.limit, c.pullData(e.curr, c.loading()))
        }
    }, s.page), s.page.count = o, a.render(s.page))))
}

转载于:https://my.oschina.net/u/2244237/blog/1844736

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页