diff --git a/README.md b/README.md index 7ca05a9..0c06dec 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,7 @@ ```javascript new SmartTable({ selector: '#smartTable', + hoverBgColor: '#C5DFFF', height: 300, align: 'left', size: 'middle' @@ -80,6 +81,7 @@ | height | number or function | no | 可指定表格的高度 | | | align | string | no | 表格文本的水平排列方式(left、center、right) | center | | size | string | no | 每一行的垂直高度风格(large、middle、small) | small | +| hoverBgColor | string | no | body中每行hover时的背景色 | '#EFF8FF' | ## 本地开发 ### 启动项目 diff --git a/dist/smartTable.min.js b/dist/smartTable.min.js index 00bd242..fd5feba 100644 --- a/dist/smartTable.min.js +++ b/dist/smartTable.min.js @@ -1 +1 @@ -/*! smartTable v1.1.1 | (c) pengyajun 2020 | Released under the MIT License. */!function(t){var e={};function r(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=t,r.c=e,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(o,i,function(e){return t[e]}.bind(null,i));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=4)}([function(t,e,r){var o=r(1),i=r(2);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[t.i,i,""]]);var a={insert:"head",singleton:!1},n=(o(t.i,i,a),i.locals?i.locals:{});t.exports=n},function(t,e,r){"use strict";var o,i=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},a=function(){var t={};return function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}t[e]=r}return t[e]}}(),n={};function l(t,e,r){for(var o=0;o*,.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]||"",o=t[3];if(!o)return r;if(e&&"function"==typeof btoa){var i=(n=o,l=btoa(unescape(encodeURIComponent(JSON.stringify(n)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(l),"/*# ".concat(s," */")),a=o.sources.map((function(t){return"/*# sourceURL=".concat(o.sourceRoot||"").concat(t," */")}));return[r].concat(a).concat([i]).join("\n")}var n,l,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 o=0;oe}function a(t,e){let r=document.createElement(t);return e&&(r.className=e),r}function n(t,e){return t.appendChild(e)}function l(t,e){return e.forEach(e=>{t.appendChild(e)}),t}function s(t,e){t.removeChild(e)}function d(t,e){return t.cloneNode(e)}function f(t,e){return t.querySelector(e)}function c(t,e){return t.querySelectorAll(e)}function h(t){let e=t.childNodes,r=a("div","smart-table_cell");for(;e.length;)n(r,e[0]);n(t,r)}function u(t,e,r,o){let i=a("div",t),s=a("table","smart-table_"+r);return s.style.width=e.size.tabelWidth-1+"px",l(s,[m(e.colgroup),o]),n(i,s),i}function b(t,e){let r=m(t.colgroup);e.replaceChild(r,f(e,"colgroup"))}function p(t,e,r){return Number.parseInt(t.getAttribute(e)||r)}function m(t){if(!t)return;let e=a("colgroup");return t.forEach(t=>{let r=a("col");r.setAttribute("width",t),n(e,r)}),e}function g(t,e,r){let o=d(e,!0);return c(f(o,"tr"),"th").forEach((t,e)=>{-1===r.thead.indexOf("field-"+e)&&t.classList.add("is-hidden")}),u("smart-table_fixed-header-wrapper",t,"header",o)}function x(t,e,r,o){let i=d(e,!0);c(i,"tr").forEach(t=>{let e=-1;c(t,"td").forEach((t,i)=>{"left"===o?e=i:e+=p(t,"colspan",1),-1===r.tbody.indexOf("field-"+e)&&t.classList.add("is-hidden")})});let a=u("smart-table_fixed-body-wrapper",t,"body",i);return a.style.top=t.size.theadHeight+"px",a.style.height=t.size.tbodyHeight-(t.scrollX?t.gutterWidth:0)+"px",a}function A(t,e,r,o,i,n){let s=a("div",i);return"right"===n&&(s.style.right=(t.scrollY?t.gutterWidth:0)+"px"),l(s,[e,r]),s.style.width=o.width+"px",s.style.height=t.size.fixWrapperHeigth-(t.scrollX?t.gutterWidth:0)+"px",s}let w;function y(t,e,r){if(e){let o=f(e,".smart-table_header"),i=f(e,".smart-table_body");b(t,o),b(t,i);const a=c(f(e,"tr"),"th");let n=0;a.forEach((e,r)=>{"is-hidden"!=e.className&&(n+=t.colgroup[r])}),e.style.width=n+"px",o.style.width=r+"px",i.style.width=r+"px"}}function v(t){this instanceof v||console.error("Smart Table is a constructor and should be called with the `new` keyword"),window.addEventListener("load",()=>{setTimeout(this._init(t),0)})}v.prototype._init=function(t={}){t.selector||console.error("Smart Table init need a selector");const e=this;e.$options=t;const r=t.selector&&f(document,String(t.selector).trim());if(!r)return;const i=f(r,"table");if(!i)return;e.gutterWidth=function(){if(void 0!==w)return w;const t=a("div","smart-table");n(document.body,t);const e=a("div");e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",n(t,e);const r=e.offsetWidth;e.style.overflow="scroll";const o=a("div");o.style.width="100%",n(e,o);const i=o.offsetWidth;return s(t.parentNode,t),w=r-i,w}(),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 d=f(i,"thead"),m=f(i,"tbody");c(d,"th").forEach(t=>h(t)),c(m,"td").forEach(t=>h(t)),i.hasAttribute("stripe")&&m.classList.add("stripe"),i.style.width="100%",e.$root=r;const v=d.offsetHeight,E=i.offsetHeight;let W=t.height;if(W=("function"==typeof W?W():W)||E,W=W>v?W:v+100,e.size={theadHeight:v,tbodyHeight:W-v,tabelWidth:i.offsetWidth,wrapperWidth:i.offsetWidth,tableHeight:W,fixWrapperHeigth:E>W?W:E},e.props=function(t){let e={},r=[],o=c(t,"tr");return o.forEach((t,e)=>{let o=r[e]||[];c(t,"th").forEach(t=>{let i=p(t,"rowspan",1),a=p(t,"colspan",1),n=function(t){for(let e=0,r=t.length;e1)for(let t=1;t1)for(let t=1;t{let e=p(t,"width",0);0===e&&(e=t.offsetWidth>80?t.offsetWidth:80),o.push(e)}):c(f(e,"tr"),"td").forEach(t=>{let e=t.offsetWidth;e+=e<50?10:e>=50&&e<100?30:40,o.push(e)}),o}(d,m,e.props.theadLength),e.size.tabelWidth=i.style.width=e.colgroup.reduce((t,e)=>t+e),e.scrollY=W0;e--)if(l[e].hasAttribute("fixed")){if(e===d)break;n.thead.push("field-"+e);let o=p(l[e],"colspan",1);for(let e=0;e0){o=o>i.width?o:i.width;const a=g(t,e,i),l=x(t,r,i,"left");n(t.$root,A(t,a,l,i,"smart-table_fixed","left")),t.$fixedLeft=l}if(l.thead.length>0){o+=l.width;const i=g(t,e,l),s=x(t,r,l,"right");if(n(t.$root,A(t,i,s,l,"smart-table_fixed-right","right")),t.$fixedRight=s,t.scrollY){let e=a("div","smart-table_fixed-right-patch");e.style.width=t.gutterWidth+"px",e.style.height=t.size.theadHeight+"px",n(t.$root,e)}}t.$root.style.minWidth=o+"px"}(e,d,m),e.data=function(t,e){let r=t.$fixedLeft&&c(t.$fixedLeft,"tbody tr"),o=t.$fixedRight&&c(t.$fixedRight,"tbody tr"),i=[];return c(e,"tr").forEach((t,e)=>{if(!t.hasAttribute("unsort")){let a={$el:t,$fixedLeftEl:r&&r[e],$fixedRightEl:o&&o[e],$key:"$$rowkey"+e};c(t,"td .cell").forEach((t,e)=>{a["field-"+e]=t.innerHTML}),i.push(a)}}),i}(e,m),function(t){(function(t){t.$tbodyWrapper.addEventListener("scroll",()=>function(t){!function(t,e){let r,o=0;return function(){let i=this,a=(new Date).getTime()-o,n=arguments;function l(){o=(new Date).getTime(),e.apply(i,n)}r&&clearTimeout(r),a>t?l():r=setTimeout(l,t-a)}}(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})})(t),function(t){let e=c(t.$tbodyWrapper,"tr"),r=c(t.$root,".smart-table_fixed .smart-table_fixed-body-wrapper tr"),o=c(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"),o.length>0&&(o[e].className="smart-table_hover-tr")}),t.addEventListener("mouseleave",()=>{t.className="",r.length>0&&(r[e].className=""),o.length>0&&(o[e].className="")})})}(t),function(t){let e=Array.from(c(t.$root,"th[sort]"));0!==e.length&&e.forEach(r=>{r.addEventListener("click",i=>{i.stopPropagation();let a="ASC",n=r.getAttribute("sort")||"string";r.classList.contains("asc")?(r.classList.remove("asc"),r.classList.add("desc"),a="DESC"):(r.classList.remove("desc"),r.classList.add("asc")),e=e.map(t=>(r!=t&&t.classList.remove("asc","desc"),t)),o(t,r.getAttribute("sortkey"),a,n)})})}(t),function(t){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,o=t.size.tabelWidth,i=e.offsetWidth,a=parseInt(o*(i/r)),n=f(t.$theadWrapper,".smart-table_header"),l=f(t.$tbodyWrapper,".smart-table_body");t.colgroup.forEach((function(e,r){t.colgroup[r]=parseInt(a*(e/o))+1})),t.size.wrapperWidth=i,t.size.tabelWidth=a,n.style.width=a+"px",l.style.width=a+"px",b(t,n),b(t,l),y(t,f(e,".smart-table_fixed"),a),y(t,f(e,".smart-table_fixed-right"),a)}))}(t)}(e),e.scrollY){let t=a("th");t.setAttribute("width",e.gutterWidth),t.setAttribute("rowspan",e.props.shapes.length),n(f(d,"tr"),t)}};var E=v;window.SmartTable=E}]); \ No newline at end of file +/*! smartTable v1.1.1 | (c) pengyajun 2020 | Released under the MIT License. */!function(t){var e={};function r(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=t,r.c=e,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(o,i,function(e){return t[e]}.bind(null,i));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=4)}([function(t,e,r){var o=r(1),i=r(2);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[t.i,i,""]]);var n={insert:"head",singleton:!1},s=(o(t.i,i,n),i.locals?i.locals:{});t.exports=s},function(t,e,r){"use strict";var o,i=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},n=function(){var t={};return function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}t[e]=r}return t[e]}}(),s={};function a(t,e,r){for(var o=0;o*,.smart-table th.is-hidden>*{visibility:hidden}.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.stb-cust-large thead{font-size:16px}.smart-table.stb-cust-large tbody{font-size:15px}.smart-table.stb-cust-large td,.smart-table.stb-cust-large th{padding:12px 0}.smart-table.stb-cust-middle thead{font-size:15px}.smart-table.stb-cust-middle tbody{font-size:14px}.smart-table.stb-cust-middle td,.smart-table.stb-cust-middle th{padding:10px 0}.smart-table.stb-cust-left td,.smart-table.stb-cust-left th{text-align:left}.smart-table.stb-cust-right td,.smart-table.stb-cust-right th{text-align:right}.smart-table .stb_cell{overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;padding:0 4px;line-height:23px}.smart-table th>.stb_cell{display:inline-block;position:relative;vertical-align:middle}.smart-table .stb_body,.smart-table .stb_footer,.smart-table .stb_header{table-layout:fixed;border-collapse:separate;background:#fff}.smart-table .stb_header-wrapper{overflow:hidden}.smart-table .stb_body-wrapper{overflow:auto}.smart-table .stb_fixed,.smart-table .stb_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 .stb_fixed-right{top:0;left:auto;right:0;box-shadow:-1px 0 8px rgba(0,0,0,0.08)}.smart-table .stb_fixed-right .stb_fixed-body-wrapper,.smart-table .stb_fixed-right .stb_fixed-footer-wrapper,.smart-table .stb_fixed-right .stb_fixed-header-wrapper{left:auto;right:0}.smart-table .stb_fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#F5F7FB}.smart-table .stb_fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.smart-table .stb_fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.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}.smart-table *{box-sizing:border-box}\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]||"",o=t[3];if(!o)return r;if(e&&"function"==typeof btoa){var i=(s=o,a=btoa(unescape(encodeURIComponent(JSON.stringify(s)))),l="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(l," */")),n=o.sources.map((function(t){return"/*# sourceURL=".concat(o.sourceRoot||"").concat(t," */")}));return[r].concat(n).concat([i]).join("\n")}var s,a,l;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 o=0;oe}function n(t,e){let r=document.createElement(t);return e&&(r.className=e),r}function s(t,e){return t.appendChild(e)}function a(t,e){return e.forEach(e=>{t.appendChild(e)}),t}function l(t,e){t.removeChild(e)}function d(t,e){return t.cloneNode(e)}function f(t,e){return t.querySelector(e)}function c(t,e){return t.querySelectorAll(e)}function h(t){let e=t.childNodes,r=n("div","stb_cell");for(;e.length;)s(r,e[0]);s(t,r)}function u(t,e,r,o,i){let l=n("div",t),d=n("table","stb_"+r);return d.style.width=e.size.tabelWidth-1+"px",a(d,[g(e.colgroup,e.gutterWidth,i),o]),s(l,d),l}function b(t,e){let r=g(t.colgroup);e.replaceChild(r,f(e,"colgroup"))}function p(t,e,r){return Number.parseInt(t.getAttribute(e)||r)}function g(t,e,r){if(!t)return;let o=n("colgroup");if(t.forEach(t=>{let e=n("col");e.setAttribute("width",t),s(o,e)}),r){let t=n("col");t.setAttribute("width",e),s(o,t)}return o}function m(t,e,r){let o=d(e,!0);return c(o,"tr:first-child>th").forEach((t,e)=>{-1===r.thead.indexOf("field-"+e)&&t.classList.add("is-hidden")}),u("stb_fixed-header-wrapper",t,"header",o)}function x(t,e,r,o){let i=d(e,!0);c(i,"tr").forEach(t=>{let e=-1;c(t,"td").forEach((t,i)=>{"left"===o?e=i:e+=p(t,"colspan",1),-1===r.tbody.indexOf("field-"+e)&&t.classList.add("is-hidden")})});let n=u("stb_fixed-body-wrapper",t,"body",i);return n.style.top=t.size.theadHeight+"px",n.style.height=t.size.tbodyHeight-(t.scrollX?t.gutterWidth:0)+"px",n}function A(t,e,r,o,i,s){let l=n("div",i);return"right"===s&&(l.style.right=(t.scrollY?t.gutterWidth:0)+"px"),a(l,[e,r]),l.style.width=o.width+"px",l.style.height=t.size.fixWrapperHeigth-(t.scrollX?t.gutterWidth:0)+"px",l}let y;function w(t,e,r){if(e){let o=f(e,".stb_header"),i=f(e,".stb_body");b(t,o),b(t,i);const n=c(e,"tr:first-child>th");let s=0;n.forEach((e,r)=>{"is-hidden"!=e.className&&(s+=t.colgroup[r])}),e.style.width=s+"px",o.style.width=r+"px",i.style.width=r+"px"}}function v(t){this instanceof v||console.error("Smart Table is a constructor and should be called with the `new` keyword"),window.addEventListener("load",()=>{setTimeout(this._init(t),0)})}v.prototype._init=function(t={}){t.selector||console.error("Smart Table init need a selector");const e=this;e.$options=t;const r=t.selector&&f(document,String(t.selector).trim());if(!r)return;const i=f(r,"table");if(!i)return;e.style={hoverBgColor:t.hoverBgColor||"#EFF8FF"},e.gutterWidth=function(){if(void 0!==y)return y;const t=n("div","smart-table");s(document.body,t);const e=n("div");e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",s(t,e);const r=e.offsetWidth;e.style.overflow="scroll";const o=n("div");o.style.width="100%",s(e,o);const i=o.offsetWidth;return l(t.parentNode,t),y=r-i,y}(),r.classList.add("smart-table"),t.size&&r.classList.add("stb-cust-"+t.size),t.align&&r.classList.add("stb-cust-"+t.align);const d=f(i,"thead"),g=f(i,"tbody");c(d,"th").forEach(t=>h(t)),c(g,"td").forEach(t=>h(t)),i.hasAttribute("stripe")&&g.classList.add("stripe"),i.style.width="100%",e.$root=r;const v=d.offsetHeight,E=i.offsetHeight;let W=t.height;if(W=("function"==typeof W?W.call():W)||E,W=W>v?W:v+100,e.size={theadHeight:v,tbodyHeight:W-v,tabelWidth:i.offsetWidth,wrapperWidth:i.offsetWidth,tableHeight:W,fixWrapperHeigth:E>W?W:E},e.props=function(t){let e={},r=[],o=c(t,"tr");return o.forEach((t,e)=>{let o=r[e]||[];c(t,"th").forEach(t=>{let i=p(t,"rowspan",1),n=p(t,"colspan",1),s=function(t){for(let e=0,r=t.length;e1)for(let t=1;t1)for(let t=1;tth").forEach(t=>{let e=p(t,"width",0);0===e&&(e=t.offsetWidth>80?t.offsetWidth:80),o.push(e)}):c(e,"tr:first-child>td").forEach(t=>{let e=t.offsetWidth;e+=e<50?10:e>=50&&e<100?30:40,o.push(e)}),o}(d,g,e.props.theadLength),e.size.tabelWidth=i.style.width=e.colgroup.reduce((t,e)=>t+e),e.scrollY=Wth"),l=a.length;let d=0;if(0!==l){if(a[0].hasAttribute("fixed"))for(let t=0;t0;e--)if(a[e].hasAttribute("fixed")){if(e===d)break;s.thead.push("field-"+e);let o=p(a[e],"colspan",1);for(let e=0;e0){o=o>i.width?o:i.width;const n=m(t,e,i),a=x(t,r,i,"left");s(t.$root,A(t,n,a,i,"stb_fixed","left")),t.$fixedLeft=a}if(a.thead.length>0){o+=a.width;const i=m(t,e,a),l=x(t,r,a,"right");if(s(t.$root,A(t,i,l,a,"stb_fixed-right","right")),t.$fixedRight=l,t.scrollY){let e=n("div","stb_fixed-right-patch");e.style.width=t.gutterWidth+"px",e.style.height=t.size.theadHeight+"px",s(t.$root,e)}}t.$root.style.minWidth=o+"px"}(e,d,g),e.data=function(t,e){let r=t.$fixedLeft&&c(t.$fixedLeft,"tbody tr"),o=t.$fixedRight&&c(t.$fixedRight,"tbody tr"),i=[];return c(e,"tr").forEach((t,e)=>{if(!t.hasAttribute("unsort")){let n={$el:t,$fixedLeftEl:r&&r[e],$fixedRightEl:o&&o[e],$key:"$$rowkey"+e};c(t,"td .stb_cell").forEach((t,e)=>{n["field-"+e]=t.innerHTML}),i.push(n)}}),i}(e,g),function(t){(function(t){t.$tbodyWrapper.addEventListener("scroll",()=>function(t){!function(t,e){let r,o=0;return function(){let i=this,n=(new Date).getTime()-o,s=arguments;function a(){o=(new Date).getTime(),e.apply(i,s)}r&&clearTimeout(r),n>t?a():r=setTimeout(a,t-n)}}(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})})(t),function(t){let e=c(t.$tbodyWrapper,"tr"),r=c(t.$root,".stb_fixed .stb_fixed-body-wrapper tr"),o=c(t.$root,".stb_fixed-right .stb_fixed-body-wrapper tr");e.forEach((e,i)=>{e.addEventListener("mouseenter",()=>{e.style.background=t.style.hoverBgColor,r.length>0&&(r[i].style.background=t.style.hoverBgColor),o.length>0&&(o[i].style.background=t.style.hoverBgColor)}),e.addEventListener("mouseleave",()=>{e.style.background="",r.length>0&&(r[i].style.background=""),o.length>0&&(o[i].style.background="")})})}(t),function(t){let e=Array.from(c(t.$root,"th[sort]"));0!==e.length&&e.forEach(r=>{r.addEventListener("click",i=>{i.stopPropagation();let n="ASC",s=r.getAttribute("sort")||"string";r.classList.contains("asc")?(r.classList.remove("asc"),r.classList.add("desc"),n="DESC"):(r.classList.remove("desc"),r.classList.add("asc")),e=e.map(t=>(r!=t&&t.classList.remove("asc","desc"),t)),o(t,r.getAttribute("sortkey"),n,s)})})}(t),function(t){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,o=t.size.tabelWidth,i=e.offsetWidth,n=parseInt(o*(i/r)),s=f(t.$theadWrapper,".stb_header"),a=f(t.$tbodyWrapper,".stb_body");t.colgroup.forEach((function(e,r){t.colgroup[r]=parseInt(n*(e/o))+1})),t.size.wrapperWidth=i,t.size.tabelWidth=n,s.style.width=n+"px",a.style.width=n+"px",b(t,s),b(t,a),w(t,f(e,".stb_fixed"),n),w(t,f(e,".stb_fixed-right"),n)}))}(t)}(e),e.scrollY){let t=n("th");t.setAttribute("width",e.gutterWidth),t.setAttribute("rowspan",e.props.shapes.length),s(f(d,"tr"),t)}};var E=v;window.SmartTable=E}]); \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 4ddd9f8..e96365c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -37,8 +37,8 @@ } td img { - width: 50px; - height: 50px; + width: 30px; + height: 30px; } @@ -228,7 +228,8 @@