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 = ['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(" ")
                    }() + ">", '
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 ? '+ 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 }(), "
"].join(""); l.push(y), n.fixed && "right" !== n.fixed && o.push(y), "right" === n.fixed && u.push(y) } }), y.push('' + l.join("") + ""), p.push('' + o.join("") + ""), m.push('' + u.join("") + "")) }), 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('
f + '">' + s.text.none + "
")) : (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: '', next: '', 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

你可能感兴趣的:(LayUI-数据表格字段内容过多无法全部显示,鼠标悬浮显示省略内容问题解决!...)