diff --git a/dist/index.html b/dist/index.html index 2306546..38e6067 100644 --- a/dist/index.html +++ b/dist/index.html @@ -39,7 +39,7 @@ height: 50px; } - +

Smart Table Example diff --git a/dist/smartTable.190a78fd.js b/dist/smartTable.4c1d3136.js similarity index 66% rename from dist/smartTable.190a78fd.js rename to dist/smartTable.4c1d3136.js index e0c6738..e322707 100644 --- a/dist/smartTable.190a78fd.js +++ b/dist/smartTable.4c1d3136.js @@ -12,16 +12,16 @@ t[e] = r } return t[e] } }(), l = {}; - function s(t, e, r) { for (var a = 0; a < e.length; a++) { var o = { css: e[a][1], media: e[a][2], sourceMap: e[a][3] }; + function n(t, e, r) { for (var a = 0; a < e.length; a++) { var o = { css: e[a][1], media: e[a][2], sourceMap: e[a][3] }; l[t][a] ? l[t][a](o) : l[t].push(u(o, r)) } } - function n(t) { var e = document.createElement("style"), + function s(t) { var e = document.createElement("style"), a = t.attributes || {}; if (void 0 === a.nonce) { var o = r.nc; o && (a.nonce = o) } if (Object.keys(a).forEach((function(t) { e.setAttribute(t, a[t]) })), "function" == typeof t.insert) t.insert(e); else { var l = i(t.insert || "head"); if (!l) throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."); - l.appendChild(e) } return e } var d, c = (d = [], function(t, e) { return d[t] = e, d.filter(Boolean).join("\n") }); + l.appendChild(e) } return e } var d, f = (d = [], function(t, e) { return d[t] = e, d.filter(Boolean).join("\n") }); - function f(t, e, r, a) { var o = r ? "" : a.css; if (t.styleSheet) t.styleSheet.cssText = c(e, o); + function c(t, e, r, a) { var o = r ? "" : a.css; if (t.styleSheet) t.styleSheet.cssText = f(e, o); else { var i = document.createTextNode(o), l = t.childNodes; l[e] && t.removeChild(l[e]), l.length ? t.insertBefore(i, l[e]) : t.appendChild(i) } } @@ -34,17 +34,17 @@ p = 0; function u(t, e) { var r, a, o; if (e.singleton) { var i = p++; - r = b || (b = n(e)), a = f.bind(null, r, i, !1), o = f.bind(null, r, i, !0) } else r = n(e), a = h.bind(null, r, e), o = function() {! function(t) { if (null === t.parentNode) return !1; + r = b || (b = s(e)), a = c.bind(null, r, i, !1), o = c.bind(null, r, i, !0) } else r = s(e), a = h.bind(null, r, e), o = function() {! function(t) { if (null === t.parentNode) return !1; t.parentNode.removeChild(t) }(r) }; return a(t), function(e) { if (e) { if (e.css === t.css && e.media === t.media && e.sourceMap === t.sourceMap) return; a(t = e) } else o() } } - t.exports = function(t, e, r) { return (r = r || {}).singleton || "boolean" == typeof r.singleton || (r.singleton = o()), t = r.base ? t + r.base : t, e = e || [], l[t] || (l[t] = []), s(t, e, r), - function(e) { if (e = e || [], "[object Array]" === Object.prototype.toString.call(e)) { l[t] || (l[t] = []), s(t, e, r); for (var a = e.length; a < l[t].length; a++) l[t][a](); + t.exports = function(t, e, r) { return (r = r || {}).singleton || "boolean" == typeof r.singleton || (r.singleton = o()), t = r.base ? t + r.base : t, e = e || [], l[t] || (l[t] = []), n(t, e, r), + function(e) { if (e = e || [], "[object Array]" === Object.prototype.toString.call(e)) { l[t] || (l[t] = []), n(t, e, r); for (var a = e.length; a < l[t].length; a++) l[t][a](); l[t].length = e.length, 0 === l[t].length && delete l[t] } } } }, function(t, e, r) { (e = r(3)(!1)).push([t.i, '.smart-table{position:relative;overflow:hidden;box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;color:#606266;border:1px solid #EBEEF5;border-right:none;border-bottom:none}.smart-table:after,.smart-table:before{content:"";position:absolute;background-color:#ebeef5;z-index:1}.smart-table:before{left:0;bottom:0;width:100%;height:1px}.smart-table:after{top:0;right:0;width:1px;height:100%}.smart-table table{border-spacing:0;border:0}.smart-table tr{transition:background-color .25s ease}.smart-table thead{color:#909399;font-weight:500;background:#F5F7FA}.smart-table thead tr{background:#F5F7FA}.smart-table tbody.stripe tr:nth-child(2n){background-color:#F5F7FA}.smart-table th{user-select:none;overflow:hidden}.smart-table th[sort]{cursor:pointer}.smart-table th[sort] :after{margin-left:5px;content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAAXNSR0IArs4c6QAAAR5JREFUKBVjYKA7+P//P/OBo2dmHzx6rgab5YzIgseOPeb8/e/Vyv8M/33B4owM0+2tjHMYGRn/wdTBNRw7dlXo9/8fm4E2WMEkQTQjA+N6OWmhKEVFxR8QPpA8eOqyLMPvXzuBijVBgugAaMNhPi4mP0NDww8sIMn/f35aMP1nnA00DV0thP+fgeHz93/mQM5O7ArwiIKNPHDkjCMTEwM/HnUM//4zvXSwNjoOdhIzK9O7f7//LQXaLIlNE9DUW+zMjO4gObijjx8/r/Dr79+dQE1qyJoYGRlOcbMzeJuYmLwBiTPBJC0tDR9wczBYgxTAxIDsbUDFjjDFIHG4DTBFFy9e5P7w+c/q/4wML+2tjFKBQfoHJoeTBiUPXJIAbjheeFXAZxsAAAAASUVORK5CYII=")}.smart-table th[sort].desc :after{content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAAXNSR0IArs4c6QAAASdJREFUKBVjYKA7+P//P/OBo2dmHzx6rgab5YzIgseOPeb8/e/Vyv8M/33B4owM0+2tjHMYGRn/wdTBNRw7dlXo9/8fm4E2WMEkQTQjA+N6OWmhKEVFxR8QPpA8eOqyLMPvXzuBijVBgugAaMNhPi4mP0NDww8sIMn/f35aMP1nnA00DV0thP+fgeHz93/mQM5O7ArwiIKNdF7435HhHwM/HnUMDEwML/fGMx4HO+kfE8O7//8YljL8Z5DEpomRkeEW+z8Gd5AcE4jYH8t4kYOBwQokAeIjA6DYKR52BusdiYwPQOIovvRd9l/ky0+Grf//M5iBJRkZtvGIMIRu9mX8BuKDAIoGkIDbov/cv/4wrAbKvHRQYEhtcGT8AxLHC0JX/WfGpQAAJIlcYMXwsAoAAAAASUVORK5CYII=")}.smart-table th[sort].asc :after{content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAAXNSR0IArs4c6QAAARlJREFUKBVjYKA7aPj/n8lx/v+pQFyFzXJGZEHPbf/Zf7xkWPr/P0MwSJyRkWGqfQJDXgMj4z+YOrgGl1X/+f9+Ydj4n4HBHiYJ1bSWQ5whersX408wH0S4Lv8v9ecHw3agyXogPjoAmnqQmYfBf08Y40cWkOSfnww2DIwMS4FOWIquGMb/+5XBGsjeBuMTTYP9cODIGUcmJgZ+fLr+/Wd66WBtdBzsJGZWpnf/fv9bCvSwJDZNQFNvsTMzuoPk4KF0/Ph5hV9//+4EalJD1gT01yludgZvExOTNyBxJpikpaXhA24OBmuQApgYkL0NqNgRphgkDrcBpujixYvcHz7/Wf2fkeGlvZVRKiMj4x+YHE76////zLgkATPDVMggLp6aAAAAAElFTkSuQmCC")}.smart-table td,.smart-table th{padding:6px 0;min-width:50px;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative;text-align:left;border-bottom:1px solid #EBEEF5;border-right:1px solid #EBEEF5;text-align:center}.smart-table td.is-hidden>*,.smart-table th.is-hidden>*{visibility:hidden}.smart-table.smart-table-custom-large td,.smart-table.smart-table-custom-large th{padding:12px 0}.smart-table.smart-table-custom-middle td,.smart-table.smart-table-custom-middle th{padding:10px 0}.smart-table.smart-table-custom-left td,.smart-table.smart-table-custom-left th{text-align:left}.smart-table.smart-table-custom-right td,.smart-table.smart-table-custom-right th{text-align:right}.smart-table .smart-table_cell{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:23px;padding-left:4px;padding-right:4px}.smart-table th>.smart-table_cell{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;vertical-align:middle;padding-left:4px;padding-right:4px;width:100%}.smart-table .smart-table_body,.smart-table .smart-table_footer,.smart-table .smart-table_header{table-layout:fixed;border-collapse:separate;background:#fff}.smart-table .smart-table_header-wrapper{overflow:hidden}.smart-table .smart-table_body-wrapper{overflow:auto}.smart-table .smart-table_fixed,.smart-table .smart-table_fixed-right{position:absolute;top:0;left:0;overflow-x:hidden;overflow-y:hidden;box-shadow:0 -1px 8px rgba(0,0,0,0.08)}.smart-table .smart-table_fixed-right{top:0;left:auto;right:0;box-shadow:-1px 0 8px rgba(0,0,0,0.08)}.smart-table .smart-table_fixed-right .smart-table_fixed-body-wrapper,.smart-table .smart-table_fixed-right .smart-table_fixed-footer-wrapper,.smart-table .smart-table_fixed-right .smart-table_fixed-header-wrapper{left:auto;right:0}.smart-table .smart-table_fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#F5F7FA}.smart-table .smart-table_fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.smart-table .smart-table_fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.smart-table .smart-table_hover-tr{background-color:#f0f5fd !important}.smart-table ::-webkit-scrollbar{width:8px;height:8px;background-color:#e9edf4}.smart-table ::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:2em;-webkit-border-radius:2em;-moz-border-radius:2em;-o-border-radius:2em}.smart-table ::-webkit-scrollbar-thumb:hover{background-color:#9bbbfa}\n', ""]), t.exports = e }, function(t, e, r) { "use strict"; t.exports = function(t) { var e = []; return e.toString = function() { return this.map((function(e) { var r = function(t, e) { var r = t[1] || "", - a = t[3]; if (!a) return r; if (e && "function" == typeof btoa) { var o = (l = a, s = btoa(unescape(encodeURIComponent(JSON.stringify(l)))), n = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s), "/*# ".concat(n, " */")), - i = a.sources.map((function(t) { return "/*# sourceURL=".concat(a.sourceRoot || "").concat(t, " */") })); return [r].concat(i).concat([o]).join("\n") } var l, s, n; return [r].join("\n") }(e, t); return e[2] ? "@media ".concat(e[2], " {").concat(r, "}") : r })).join("") }, e.i = function(t, r) { "string" == typeof t && (t = [ + a = t[3]; if (!a) return r; if (e && "function" == typeof btoa) { var o = (l = a, n = btoa(unescape(encodeURIComponent(JSON.stringify(l)))), s = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(n), "/*# ".concat(s, " */")), + i = a.sources.map((function(t) { return "/*# sourceURL=".concat(a.sourceRoot || "").concat(t, " */") })); return [r].concat(i).concat([o]).join("\n") } var l, n, s; return [r].join("\n") }(e, t); return e[2] ? "@media ".concat(e[2], " {").concat(r, "}") : r })).join("") }, e.i = function(t, r) { "string" == typeof t && (t = [ [null, t, ""] ]); for (var a = 0; a < t.length; a++) { var o = [].concat(t[a]); r && (o[2] ? o[2] = "".concat(r, " and ").concat(o[2]) : o[2] = r), e.push(o) } }, e } }, function(t, e, r) { "use strict"; @@ -52,10 +52,10 @@ r(0); function a(t, e, r, a) { if (!t.data || t.data.length < 1) return; let i = function t(e, r, a, i) { if (e.length <= 1) return e; let l = [], - s = [], - n = e.length, - d = Math.floor(n / 2), - c = e.splice(d, 1)[0]; for (let t = 0; t < n - 1; t++) o(e[t][r], c[r], a, i) ? l.push(e[t]) : s.push(e[t]); return t(l, r, a, i).concat(c, t(s, r, a, i)) }(JSON.parse(JSON.stringify(t.data)), e, r, a); + n = [], + s = e.length, + d = Math.floor(s / 2), + f = e.splice(d, 1)[0]; for (let t = 0; t < s - 1; t++) o(e[t][r], f[r], a, i) ? l.push(e[t]) : n.push(e[t]); return t(l, r, a, i).concat(f, t(n, r, a, i)) }(JSON.parse(JSON.stringify(t.data)), e, r, a); JSON.stringify(t.data) !== JSON.stringify(i) && (! function(t, e) { let r = 0; for (let a = 0; a < e.length; a++) { const o = e[a]; let i = 0; for (; i < t.length; i++) { const l = t[i]; if (o.$key === l.$key) { if (o.$el = l.$el, o.$fixedLeftEl = l.$fixedLeftEl, o.$fixedRightEl = l.$fixedRightEl, i < r) { const t = e[a - 1], r = t.$el.nextSibling; if (r.parentNode.insertBefore(l.$el, r), t.$fixedLeftEl) { const e = t.$fixedLeftEl.nextSibling; e.parentNode.insertBefore(l.$fixedLeftEl, e) } if (t.$fixedRightEl) { const e = t.$fixedRightEl.nextSibling; @@ -67,90 +67,92 @@ function l(t, e) { return t.appendChild(e) } + function n(t, e) { return e.forEach(e => { t.appendChild(e) }), t } + function s(t, e) { return t.cloneNode(e) } - function n(t, e) { return t.querySelector(e) } + function d(t, e) { return t.querySelector(e) } - function d(t, e) { return t.querySelectorAll(e) } + function f(t, e) { return t.querySelectorAll(e) } function c(t) { let e = t.childNodes, r = i("div", "smart-table_cell"); for (; e.length;) l(r, e[0]); l(t, r) } - function f(t, e, r, a) { let o = i("div"); - o.className = t; let s = i("table"); return s.className = "smart-table_" + r, s.style.width = e.size.tabelWidth - 1 + "px", l(s, p(e.colgroup)), l(s, a), l(o, s), o } + function h(t, e, r, a) { let o = i("div", t), + s = i("table", "smart-table_" + r); return s.style.width = e.size.tabelWidth - 1 + "px", n(s, [u(e.colgroup), a]), l(o, s), o } - function h(t, e) { let r = p(t.colgroup); - e.replaceChild(r, n(e, "colgroup")) } + function b(t, e) { let r = u(t.colgroup); + e.replaceChild(r, d(e, "colgroup")) } - function b(t, e, r) { return Number.parseInt(t.getAttribute(e) || r) } + function p(t, e, r) { return Number.parseInt(t.getAttribute(e) || r) } - function p(t) { if (!t) return; let e = i("colgroup"); return t.forEach(t => { let r = i("col"); + function u(t) { if (!t) return; let e = i("colgroup"); return t.forEach(t => { let r = i("col"); r.setAttribute("width", t), l(e, r) }), e } - function u(t, e, r) { if (e) { let a = n(e, ".smart-table_header"), - o = n(e, ".smart-table_body"); - h(t, a), h(t, o); const i = d(n(e, "tr"), "th"); let l = 0; + function m(t, e, r) { if (e) { let a = d(e, ".smart-table_header"), + o = d(e, ".smart-table_body"); + b(t, a), b(t, o); const i = f(d(e, "tr"), "th"); let l = 0; i.forEach((e, r) => { "is-hidden" != e.className && (l += t.colgroup[r]) }), e.style.width = l + "px", a.style.width = r + "px", o.style.width = r + "px" } } - function m(t) { this instanceof m || console.error("Smart Table is a constructor and should be called with the `new` keyword"), window.addEventListener("load", () => { setTimeout(this._init(t), 0) }) } - m.prototype._init = function(t = {}) { t.selector || console.error("Smart Table init need a selector"); const e = this; - e.$options = t, e.scrollbarFit = 8; const r = t.selector && n(document, String(t.selector).trim()); if (!r) return; const o = n(r, "table"); if (!o) return; - r.classList.add("smart-table"), t.size && r.classList.add("smart-table-custom-" + t.size), t.align && r.classList.add("smart-table-custom-" + t.align); const p = n(o, "thead"), - m = n(o, "tbody"); - d(p, "th").forEach(t => c(t)), d(m, "td").forEach(t => c(t)), o.hasAttribute("stripe") && m.classList.add("stripe"), o.style.width = "100%", e.$root = r; const g = p.offsetHeight, - x = o.offsetHeight; let A = t.height; var w, y; if (A = ("function" == typeof A ? A() : A) || x, A = A > g ? A : g + 100, e.size = { theadHeight: g, tbodyHeight: A - g, tabelWidth: o.offsetWidth, wrapperWidth: o.offsetWidth, tableHeight: A, fixWrapperHeigth: x > A ? A : x }, e.props = function(t) { let e = {}, + function g(t) { this instanceof g || console.error("Smart Table is a constructor and should be called with the `new` keyword"), window.addEventListener("load", () => { setTimeout(this._init(t), 0) }) } + g.prototype._init = function(t = {}) { t.selector || console.error("Smart Table init need a selector"); const e = this; + e.$options = t; const r = t.selector && d(document, String(t.selector).trim()); if (!r) return; const o = d(r, "table"); if (!o) return; + r.classList.add("smart-table"), t.size && r.classList.add("smart-table-custom-" + t.size), t.align && r.classList.add("smart-table-custom-" + t.align); const u = d(o, "thead"), + g = d(o, "tbody"); + f(u, "th").forEach(t => c(t)), f(g, "td").forEach(t => c(t)), o.hasAttribute("stripe") && g.classList.add("stripe"), o.style.width = "100%", e.$root = r; const x = u.offsetHeight, + A = o.offsetHeight; let w = t.height; var y, v; if (w = ("function" == typeof w ? w() : w) || A, w = w > x ? w : x + 100, e.size = { theadHeight: x, tbodyHeight: w - x, tabelWidth: o.offsetWidth, wrapperWidth: o.offsetWidth, tableHeight: w, fixWrapperHeigth: A > w ? w : A }, e.props = function(t) { let e = {}, r = [], - a = d(t, "tr"); return a.forEach((t, e) => { let a = r[e] || []; - d(t, "th").forEach(t => { let o = b(t, "rowspan", 1), - i = b(t, "colspan", 1), + a = f(t, "tr"); return a.forEach((t, e) => { let a = r[e] || []; + f(t, "th").forEach(t => { let o = p(t, "rowspan", 1), + i = p(t, "colspan", 1), l = function(t) { for (let e = 0, r = t.length; e < r; e++) if (void 0 === t[e]) return e }(a) || a.length; if (a[l] = t, t.hasAttribute("sort") && t.setAttribute("sortkey", "field-" + l), i > 1) for (let t = 1; t < i; t++) a[l + t] = 0; if (o > 1) for (let t = 1; t < o; t++) { let a = r[e + t] || []; for (let t = 0; t < i; t++) a[l + t] = 0; r[e + t] = a } - r[e] = a }) }), e.theadLength = a.length, e.shapes = r, e }(p), e.colgroup = function(t, e, r) { let a = []; return 1 === r ? d(n(t, "tr"), "th").forEach(t => { let e = b(t, "width", 0); - 0 === e && (e = t.offsetWidth > 80 ? t.offsetWidth : 80), a.push(e) }) : d(n(e, "tr"), "td").forEach(t => { let e = t.offsetWidth; - e += e < 50 ? 10 : e >= 50 && e < 100 ? 30 : 40, a.push(e) }), a }(p, m, e.props.theadLength), e.size.tabelWidth = o.style.width = e.colgroup.reduce((t, e) => t + e), e.hasVerticalScroll = A < o.offsetHeight, e.hasHorizontalScroll = r.offsetWidth < e.size.tabelWidth, function(t, e) { let { colgroup: r, props: a } = e; const o = r.length; let i = { thead: [], tbody: [], width: 0 }, - l = { thead: [], tbody: [], width: 0 }; const s = d(n(t, "tr"), "th"), - c = s.length; let f = 0; if (0 !== c) { if (s[0].hasAttribute("fixed")) - for (let t = 0; t < c - 1; t++) - if (s[t].hasAttribute("fixed")) { f = t, i.thead.push("field-" + t); let e = b(s[t], "colspan", 1); for (let a = 0; a < e; a++) i.tbody.push("field-" + (t + a)), i.width = i.width + r[t + a] } - if (s[c - 1].hasAttribute("fixed")) { let t = 0; for (let e = c - 1; e > 0; e--) - if (s[e].hasAttribute("fixed")) { if (e === f) break; - l.thead.push("field-" + e); let a = b(s[e], "colspan", 1); for (let e = 0; e < a; e++) t++, l.tbody.push("field-" + (o - t)), l.width = l.width + r[o - t] } } } - a.fixedLeft = i, a.fixedRight = l }(p, e), e.$theadWrapper = f("smart-table_header-wrapper", e, "header", p), e.$tbodyWrapper = f("smart-table_body-wrapper", e, "body", m), l(r, e.$theadWrapper), l(r, e.$tbodyWrapper), e.size.theadHeight = p.offsetHeight, e.size.tbodyHeight = A - p.offsetHeight, w = o.parentNode, y = o, w.removeChild(y), function(t, e, r) { const { fixedLeft: a, fixedRight: o } = t.props; let c = 320; if (d(t.$root, ".smart-table_body-wrapper").forEach(e => { e.style.height = t.size.tbodyHeight + "px" }), a.thead.length > 0) { c = c > a.width ? c : a.width; let o = s(e, !0); - d(n(o, "tr"), "th").forEach((t, e) => {-1 === a.thead.indexOf("field-" + e) && t.classList.add("is-hidden") }); let h = f("smart-table_fixed-header-wrapper", t, "header", o), - b = s(r, !0); - d(b, "tr").forEach(t => { d(t, "td").forEach((t, e) => {-1 === a.tbody.indexOf("field-" + e) && t.classList.add("is-hidden") }) }); let p = f("smart-table_fixed-body-wrapper", t, "body", b); - p.style.top = t.size.theadHeight + "px", p.style.height = t.size.tbodyHeight - (t.hasHorizontalScroll ? t.scrollbarFit : 0) + "px"; let u = i("div"); - u.className = "smart-table_fixed", l(u, h), l(u, p), u.style.width = a.width + "px", u.style.height = t.size.fixWrapperHeigth - (t.hasHorizontalScroll ? t.scrollbarFit : 0) + "px", l(t.$root, u), t.$fixedLeft = p } if (o.thead.length > 0) { c += o.width; let a = s(e, !0); - d(n(a, "tr"), "th").forEach((t, e) => {-1 === o.thead.indexOf("field-" + e) && t.classList.add("is-hidden") }); let h = f("smart-table_fixed-header-wrapper", t, "header", a), - b = s(r, !0); - d(b, "tr").forEach(t => { d(t, "td").forEach((t, e) => {-1 === o.tbody.indexOf("field-" + e) && t.classList.add("is-hidden") }) }); let p = f("smart-table_fixed-body-wrapper", t, "body", b); - p.style.top = t.size.theadHeight + "px", p.style.height = t.size.tbodyHeight - (t.hasHorizontalScroll ? t.scrollbarFit : 0) + "px"; let u = i("div"); if (u.className = "smart-table_fixed-right", u.style.right = (t.hasVerticalScroll ? t.scrollbarFit : 0) + "px", l(u, h), l(u, p), u.style.width = o.width + "px", u.style.height = t.size.fixWrapperHeigth - (t.hasHorizontalScroll ? t.scrollbarFit : 0) + "px", l(t.$root, u), t.$fixedRight = p, t.hasVerticalScroll) { let e = i("div"); - e.className = "smart-table_fixed-right-patch", e.style.width = t.scrollbarFit + "px", e.style.height = t.size.theadHeight + "px", l(t.$root, e) } } - t.$root.style.minWidth = c + "px" }(e, p, m), e.data = function(t, e) { let r = t.$fixedLeft && d(t.$fixedLeft, "tbody tr"), - a = t.$fixedRight && d(t.$fixedRight, "tbody tr"), - o = []; return d(e, "tr").forEach((t, e) => { if (!t.hasAttribute("unsort")) { let i = { $el: t, $fixedLeftEl: r && r[e], $fixedRightEl: a && a[e], $key: "$$rowkey" + e }; - d(t, "td .cell").forEach((t, e) => { i["field-" + e] = t.innerHTML }), o.push(i) } }), o }(e, m), function(t) { let e = Array.from(d(t.$root, "th[sort]")); + r[e] = a }) }), e.theadLength = a.length, e.shapes = r, e }(u), e.colgroup = function(t, e, r) { let a = []; return 1 === r ? f(d(t, "tr"), "th").forEach(t => { let e = p(t, "width", 0); + 0 === e && (e = t.offsetWidth > 80 ? t.offsetWidth : 80), a.push(e) }) : f(d(e, "tr"), "td").forEach(t => { let e = t.offsetWidth; + e += e < 50 ? 10 : e >= 50 && e < 100 ? 30 : 40, a.push(e) }), a }(u, g, e.props.theadLength), e.size.tabelWidth = o.style.width = e.colgroup.reduce((t, e) => t + e), e.hasVerticalScroll = w < o.offsetHeight, e.hasHorizontalScroll = r.offsetWidth < e.size.tabelWidth, function(t, e) { let { colgroup: r, props: a } = e; const o = r.length; let i = { thead: [], tbody: [], width: 0 }, + l = { thead: [], tbody: [], width: 0 }; const n = f(d(t, "tr"), "th"), + s = n.length; let c = 0; if (0 !== s) { if (n[0].hasAttribute("fixed")) + for (let t = 0; t < s - 1; t++) + if (n[t].hasAttribute("fixed")) { c = t, i.thead.push("field-" + t); let e = p(n[t], "colspan", 1); for (let a = 0; a < e; a++) i.tbody.push("field-" + (t + a)), i.width = i.width + r[t + a] } + if (n[s - 1].hasAttribute("fixed")) { let t = 0; for (let e = s - 1; e > 0; e--) + if (n[e].hasAttribute("fixed")) { if (e === c) break; + l.thead.push("field-" + e); let a = p(n[e], "colspan", 1); for (let e = 0; e < a; e++) t++, l.tbody.push("field-" + (o - t)), l.width = l.width + r[o - t] } } } + a.fixedLeft = i, a.fixedRight = l }(u, e), e.$theadWrapper = h("smart-table_header-wrapper", e, "header", u), e.$tbodyWrapper = h("smart-table_body-wrapper", e, "body", g), n(r, [e.$theadWrapper, e.$tbodyWrapper]), e.size.theadHeight = u.offsetHeight, e.size.tbodyHeight = w - u.offsetHeight, y = o.parentNode, v = o, y.removeChild(v), function(t, e, r) { const { fixedLeft: a, fixedRight: o } = t.props; let c = 320; if (f(t.$root, ".smart-table_body-wrapper").forEach(e => { e.style.height = t.size.tbodyHeight + "px" }), a.thead.length > 0) { c = c > a.width ? c : a.width; let o = s(e, !0); + f(d(o, "tr"), "th").forEach((t, e) => {-1 === a.thead.indexOf("field-" + e) && t.classList.add("is-hidden") }); let b = h("smart-table_fixed-header-wrapper", t, "header", o), + p = s(r, !0); + f(p, "tr").forEach(t => { f(t, "td").forEach((t, e) => {-1 === a.tbody.indexOf("field-" + e) && t.classList.add("is-hidden") }) }); let u = h("smart-table_fixed-body-wrapper", t, "body", p); + u.style.top = t.size.theadHeight + "px", u.style.height = t.size.tbodyHeight - (t.hasHorizontalScroll ? 8 : 0) + "px"; let m = i("div", "smart-table_fixed"); + n(m, [b, u]), m.style.width = a.width + "px", m.style.height = t.size.fixWrapperHeigth - (t.hasHorizontalScroll ? 8 : 0) + "px", l(t.$root, m), t.$fixedLeft = u } if (o.thead.length > 0) { c += o.width; let a = s(e, !0); + f(d(a, "tr"), "th").forEach((t, e) => {-1 === o.thead.indexOf("field-" + e) && t.classList.add("is-hidden") }); let b = h("smart-table_fixed-header-wrapper", t, "header", a), + p = s(r, !0); + f(p, "tr").forEach(t => { f(t, "td").forEach((t, e) => {-1 === o.tbody.indexOf("field-" + e) && t.classList.add("is-hidden") }) }); let u = h("smart-table_fixed-body-wrapper", t, "body", p); + u.style.top = t.size.theadHeight + "px", u.style.height = t.size.tbodyHeight - (t.hasHorizontalScroll ? 8 : 0) + "px"; let m = i("div", "smart-table_fixed-right"); if (m.style.right = (t.hasVerticalScroll ? 8 : 0) + "px", n(m, [b, u]), m.style.width = o.width + "px", m.style.height = t.size.fixWrapperHeigth - (t.hasHorizontalScroll ? 8 : 0) + "px", l(t.$root, m), t.$fixedRight = u, t.hasVerticalScroll) { let e = i("div", "smart-table_fixed-right-patch"); + e.style.width = "8px", e.style.height = t.size.theadHeight + "px", l(t.$root, e) } } + t.$root.style.minWidth = c + "px" }(e, u, g), e.data = function(t, e) { let r = t.$fixedLeft && f(t.$fixedLeft, "tbody tr"), + a = t.$fixedRight && f(t.$fixedRight, "tbody tr"), + o = []; return f(e, "tr").forEach((t, e) => { if (!t.hasAttribute("unsort")) { let i = { $el: t, $fixedLeftEl: r && r[e], $fixedRightEl: a && a[e], $key: "$$rowkey" + e }; + f(t, "td .cell").forEach((t, e) => { i["field-" + e] = t.innerHTML }), o.push(i) } }), o }(e, g), function(t) { let e = Array.from(f(t.$root, "th[sort]")); 0 !== e.length && e.forEach(r => { r.addEventListener("click", o => { o.stopPropagation(); let i = "ASC", l = r.getAttribute("sort") || "string"; r.classList.contains("asc") ? (r.classList.remove("asc"), r.classList.add("desc"), i = "DESC") : (r.classList.remove("desc"), r.classList.add("asc")), e = e.map(t => (r != t && t.classList.remove("asc", "desc"), t)), a(t, r.getAttribute("sortkey"), i, l) }) }) }(e), function(t) { t.$tbodyWrapper.addEventListener("scroll", () => function(t) {! function(t, e) { let r, a = 0; return function() { let o = this, i = (new Date).getTime() - a, l = arguments; - function s() { a = (new Date).getTime(), e.apply(o, l) } - r && clearTimeout(r), i > t ? s() : r = setTimeout(s, t - i) } }(20, () => { t.$theadWrapper.scrollLeft = t.$tbodyWrapper.scrollLeft, t.$fixedLeft && (t.$fixedLeft.scrollTop = t.$tbodyWrapper.scrollTop), t.$fixedRight && (t.$fixedRight.scrollTop = t.$tbodyWrapper.scrollTop) })() }(t), { passive: !0 }), window.addEventListener("resize", function(t, e) { let r = null; return function() { null !== r && clearTimeout(r), r = setTimeout(e, t) } }(600, () => { let e = t.$root, + function n() { a = (new Date).getTime(), e.apply(o, l) } + r && clearTimeout(r), i > t ? n() : r = setTimeout(n, t - i) } }(20, () => { t.$theadWrapper.scrollLeft = t.$tbodyWrapper.scrollLeft, t.$fixedLeft && (t.$fixedLeft.scrollTop = t.$tbodyWrapper.scrollTop), t.$fixedRight && (t.$fixedRight.scrollTop = t.$tbodyWrapper.scrollTop) })() }(t), { passive: !0 }), window.addEventListener("resize", function(t, e) { let r = null; return function() { null !== r && clearTimeout(r), r = setTimeout(e, t) } }(600, () => { let e = t.$root, r = t.size.wrapperWidth, a = t.size.tabelWidth, o = e.offsetWidth, i = parseInt(a * (o / r)), - l = n(t.$theadWrapper, ".smart-table_header"), - s = n(t.$tbodyWrapper, ".smart-table_body"); - t.colgroup.forEach((function(e, r) { t.colgroup[r] = parseInt(i * (e / a)) + 1 })), t.size.wrapperWidth = o, t.size.tabelWidth = i, l.style.width = i + "px", s.style.width = i + "px", h(t, l), h(t, s), u(t, n(e, ".smart-table_fixed"), i), u(t, n(e, ".smart-table_fixed-right"), i) })); let e = d(t.$tbodyWrapper, "tr"), - r = d(t.$root, ".smart-table_fixed .smart-table_fixed-body-wrapper tr"), - a = d(t.$root, ".smart-table_fixed-right .smart-table_fixed-body-wrapper tr"); + l = d(t.$theadWrapper, ".smart-table_header"), + n = d(t.$tbodyWrapper, ".smart-table_body"); + t.colgroup.forEach((function(e, r) { t.colgroup[r] = parseInt(i * (e / a)) + 1 })), t.size.wrapperWidth = o, t.size.tabelWidth = i, l.style.width = i + "px", n.style.width = i + "px", b(t, l), b(t, n), m(t, d(e, ".smart-table_fixed"), i), m(t, d(e, ".smart-table_fixed-right"), i) })); let e = f(t.$tbodyWrapper, "tr"), + r = f(t.$root, ".smart-table_fixed .smart-table_fixed-body-wrapper tr"), + a = f(t.$root, ".smart-table_fixed-right .smart-table_fixed-body-wrapper tr"); e.forEach((t, e) => { t.addEventListener("mouseenter", () => { t.className = "smart-table_hover-tr", r.length > 0 && (r[e].className = "smart-table_hover-tr"), a.length > 0 && (a[e].className = "smart-table_hover-tr") }), t.addEventListener("mouseleave", () => { t.className = "", r.length > 0 && (r[e].className = ""), a.length > 0 && (a[e].className = "") }) }) }(e), e.hasVerticalScroll) { let t = i("th"); - t.setAttribute("width", e.scrollbarFit), t.setAttribute("rowspan", e.props.shapes.length), l(n(p, "tr"), t) } }; var g = m; - window.SmartTable = g }]); \ No newline at end of file + t.setAttribute("width", 8), t.setAttribute("rowspan", e.props.shapes.length), l(d(u, "tr"), t) } }; var x = g; + window.SmartTable = x }]); \ No newline at end of file diff --git a/lib/core/core.js b/lib/core/core.js index 3f78e15..b587fbc 100644 --- a/lib/core/core.js +++ b/lib/core/core.js @@ -4,20 +4,22 @@ import { import { cloneNode, appendChild, + appendChildren, removeChild, createElement, querySelector, querySelectorAll } from './node-ops'; import { - createTabelWrapper, - getEmptyIndexInArray, - getIntByAttr, throttle, debounce, + getIntByAttr, refactorCell, - replaceColGroup + replaceColGroup, + createTabelWrapper, + getEmptyIndexInArray } from './utils'; +import scrollBarWidth from './scrollbar-width'; export default function initMixin(Table) { Table.prototype._init = function(options = {}) { @@ -26,13 +28,13 @@ export default function initMixin(Table) { } const vm = this; vm.$options = options; - vm.scrollbarFit = 8; - const root = options.selector && querySelector(document, String(options.selector).trim()); if (!root) return; const table = querySelector(root, "table"); if (!table) return; + vm.gutterWidth = scrollBarWidth(); + root.classList.add("smart-table"); options.size && root.classList.add("smart-table-custom-" + options.size) @@ -73,17 +75,16 @@ export default function initMixin(Table) { //根据头部列的二维数组 获取最小表格宽度 vm.size.tabelWidth = table.style.width = vm.colgroup.reduce((total, num) => total + num); //垂直方向是否有滚动条 - vm.hasVerticalScroll = customHeight < table.offsetHeight; + vm.scrollY = customHeight < table.offsetHeight; //水平方向是否有滚动条 - vm.hasHorizontalScroll = root.offsetWidth < vm.size.tabelWidth; + vm.scrollX = root.offsetWidth < vm.size.tabelWidth; //初始化fixed元素及宽度 initFixed(thead, vm); //初始化table 拆分table的thead和tbody vm.$theadWrapper = createTabelWrapper("smart-table_header-wrapper", vm, "header", thead); vm.$tbodyWrapper = createTabelWrapper("smart-table_body-wrapper", vm, "body", tbody); - appendChild(root, vm.$theadWrapper); - appendChild(root, vm.$tbodyWrapper); + appendChildren(root, [vm.$theadWrapper, vm.$tbodyWrapper]) vm.size.theadHeight = thead.offsetHeight; vm.size.tbodyHeight = customHeight - thead.offsetHeight; @@ -98,19 +99,15 @@ export default function initMixin(Table) { initSortEvent(vm); bindEvents(vm); - if (vm.hasVerticalScroll) { + if (vm.scrollY) { let th = createElement("th"); - th.setAttribute("width", vm.scrollbarFit); + th.setAttribute("width", vm.gutterWidth); th.setAttribute("rowspan", vm.props.shapes.length); appendChild(querySelector(thead, "tr"), th); } } } -function refactorTable() { - -} - function rollupFixed(vm, theadModel, tbodyModel) { const { fixedLeft, @@ -143,12 +140,11 @@ function rollupFixed(vm, theadModel, tbodyModel) { }) let bodyWrapper = createTabelWrapper("smart-table_fixed-body-wrapper", vm, "body", tbody); bodyWrapper.style.top = vm.size.theadHeight + "px"; - bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px"; + bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px"; let fixedContainer = createElement("div", "smart-table_fixed"); - appendChild(fixedContainer, headerWrapper); - appendChild(fixedContainer, bodyWrapper); + appendChildren(fixedContainer, [headerWrapper, bodyWrapper]); fixedContainer.style.width = fixedLeft.width + "px"; - fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px"; + fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.scrollX ? vm.gutterWidth : 0)) + "px"; appendChild(vm.$root, fixedContainer); vm.$fixedLeft = bodyWrapper; } @@ -175,18 +171,17 @@ function rollupFixed(vm, theadModel, tbodyModel) { }) let bodyWrapper = createTabelWrapper("smart-table_fixed-body-wrapper", vm, "body", tbody); bodyWrapper.style.top = vm.size.theadHeight + "px"; - bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px"; + bodyWrapper.style.height = (vm.size.tbodyHeight - (vm.scrollX ? vm.gutterWidth : 0)) + "px"; let fixedContainer = createElement("div", "smart-table_fixed-right"); - fixedContainer.style.right = (vm.hasVerticalScroll ? vm.scrollbarFit : 0) + "px"; - appendChild(fixedContainer, headerWrapper); - appendChild(fixedContainer, bodyWrapper); + fixedContainer.style.right = (vm.scrollY ? vm.gutterWidth : 0) + "px"; + appendChildren(fixedContainer, [headerWrapper, bodyWrapper]); fixedContainer.style.width = fixedRight.width + "px"; - fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.hasHorizontalScroll ? vm.scrollbarFit : 0)) + "px"; + fixedContainer.style.height = (vm.size.fixWrapperHeigth - (vm.scrollX ? vm.gutterWidth : 0)) + "px"; appendChild(vm.$root, fixedContainer); vm.$fixedRight = bodyWrapper; - if (vm.hasVerticalScroll) { + if (vm.scrollY) { let rightPatch = createElement("div", "smart-table_fixed-right-patch"); - rightPatch.style.width = vm.scrollbarFit + "px"; + rightPatch.style.width = vm.gutterWidth + "px"; rightPatch.style.height = vm.size.theadHeight + "px"; appendChild(vm.$root, rightPatch) } diff --git a/lib/core/node-ops.js b/lib/core/node-ops.js index 60bbdb9..c16493a 100644 --- a/lib/core/node-ops.js +++ b/lib/core/node-ops.js @@ -5,7 +5,14 @@ export function createElement(tagName, className) { } export function appendChild(node, child) { - return node.appendChild(child); + return node.appendChild(child) +} + +export function appendChildren(node, children) { + children.forEach(child => { + node.appendChild(child) + }) + return node } export function insertBefore(parentNode, newNode, referenceNode) { diff --git a/lib/core/scrollbar-width.js b/lib/core/scrollbar-width.js new file mode 100644 index 0000000..c77f549 --- /dev/null +++ b/lib/core/scrollbar-width.js @@ -0,0 +1,34 @@ +import { + appendChild, + removeChild, + createElement, +} from './node-ops'; + +let scrollBarWidth; + +export default function() { + if (scrollBarWidth !== undefined) return scrollBarWidth; + + const wrapper = createElement('div', 'smart-table'); + appendChild(document.body, wrapper); + + const outer = createElement('div'); + outer.style.visibility = 'hidden'; + outer.style.width = '100px'; + outer.style.position = 'absolute'; + outer.style.top = '-9999px'; + appendChild(wrapper, outer) + + const widthNoScroll = outer.offsetWidth; + outer.style.overflow = 'scroll'; + + const inner = createElement('div'); + inner.style.width = '100%'; + appendChild(outer, inner); + + const widthWithScroll = inner.offsetWidth; + removeChild(wrapper.parentNode, wrapper); + scrollBarWidth = widthNoScroll - widthWithScroll; + + return scrollBarWidth; +}; \ No newline at end of file diff --git a/lib/core/utils.js b/lib/core/utils.js index 071acc3..ee6d455 100644 --- a/lib/core/utils.js +++ b/lib/core/utils.js @@ -1,7 +1,9 @@ import { - createElement, appendChild, - querySelector + removeChild, + createElement, + querySelector, + appendChildren, } from './node-ops'; export function refactorCell(cell) { @@ -17,8 +19,7 @@ export function createTabelWrapper(className, vm, type, content) { let wrapper = createElement("div", className); let table = createElement("table", "smart-table_" + type); table.style.width = (vm.size.tabelWidth - 1) + "px"; - appendChild(table, createColgroup(vm.colgroup)); - appendChild(table, content) + appendChildren(table, [createColgroup(vm.colgroup), content]) appendChild(wrapper, table) return wrapper; } @@ -55,10 +56,6 @@ export function throttle(delay, callback) { callback.apply(self, args) } - function clear() { - timeoutID = undefined; - } - if (timeoutID) { clearTimeout(timeoutID) } @@ -81,18 +78,6 @@ export function debounce(delay, callback) { } } -export function isWindows() { - var agent = navigator.userAgent.toLowerCase(); - if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) { - return true; - } - if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) { - return true; - } - return false; -} - -//创建colgroup节点 function createColgroup(arr) { if (!arr) return; let colgroup = createElement("colgroup");