本人使用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(" ") }() + ">", ' "].join(""); l.push(y), n.fixed && "right" !== n.fixed && o.push(y), "right" === n.fixed && u.push(y) } }), y.push('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 }(), "' + 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)))) }