diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..61e2b05 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,492 @@ + + + + + + + + Smart Example + + + + + +

Smart Table Example + GitHub

+
+
+

API

+

new SmartUI.Table(options)

+

options: {

+

   selector: 元素容器"string" 必填

+

   tableHeight: 容器高度，数值或函数"number string function" 默认500

+

   size: 表格尺寸（行高度），"string：large、middle、small" 默认small

+

   textAlign: 表格对齐格式，"string：left、rigth、center" 默认center

+

   scrollbarWidth: window系统下滚动条宽度，"number" 默认macos：0 windows:8

+

}

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Id
+ 		+
日期
+ 		+
姓名
+ 		+
省份
+ 		+
市区
+ 		+
地址
+ 		+
邮编
+
+
12
+ 		+
2016-01-03
+ 		+
1王小虎
+ 		+
1上海
+ 		+
2普陀区
+ 		+
3上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
13
+ 		+
2016-02-03
+ 		+
2王小虎
+ 		+
3上海
+ 		+
4普陀区
+ 		+
2上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
14
+ 		+
2016-03-03
+ 		+
3王小虎
+ 		+
4上海
+ 		+
1普陀区
+ 		+
6上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
13
+ 		+
2016-02-03
+ 		+
2王小虎
+ 		+
3上海
+ 		+
4普陀区
+ 		+
2上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
14
+ 		+
2016-03-03
+ 		+
3王小虎
+ 		+
4上海
+ 		+
1普陀区
+ 		+
6上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
13
+ 		+
2016-02-03
+ 		+
2王小虎
+ 		+
3上海
+ 		+
4普陀区
+ 		+
2上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
14
+ 		+
2016-03-03
+ 		+
3王小虎
+ 		+
4上海
+ 		+
1普陀区
+ 		+
6上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
15
+ 		+
2016-04-03
+ 		+
5王小虎
+ 		+
6上海
+ 		+
7普陀区
+ 		+
8上海市普陀区金沙江路 1518 弄
+ 		+
200331
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Id
+ 		+
日期
+ 		+
配送信息
+ 		+
操作
+
+
姓名
+ 		+
地址
+
+
省份
+ 		+
市区
+ 		+
地址
+ 		+
邮编
+
+
11
+ 		+
2016-05-02
+ 		+
王小虎2
+ 		+
上海2
+ 		+
普陀区2
+ 		+
上海市普陀区金沙江路 1518 弄2
+ 		+
200332
+ 		+
查看2
+
+
2
+ 		+
2016-05-03
+ 		+
上小虎3
+ 		+
上海3
+ 		+
普陀区3
+ 		+
上海市普陀区金沙江路 1518 弄3
+ 		+
200333
+ 		+
查看3
+
+
13
+ 		+
2016-01-03
+ 		+
小小虎1
+ 		+
上海1
+ 		+
普陀区1
+ 		+
上海市普陀区金沙江路 1518 弄1
+ 		+
200331
+ 		+
查看1
+
+
5
+ 		+
2016-05-04
+ 		+
王小虎4
+ 		+
上海4
+ 		+
普陀区4
+ 		+
上海市普陀区金沙江路 1518 弄4
+ 		+
200334
+ 		+
查看4
+
+
13
+ 		+
2016-01-03
+ 		+
小小虎1
+ 		+
上海1
+ 		+
普陀区1
+ 		+
上海市普陀区金沙江路 1518 弄1
+ 		+
200331
+ 		+
查看1
+
+
5
+ 		+
2016-05-04
+ 		+
王小虎4
+ 		+
上海4
+ 		+
普陀区4
+ 		+
上海市普陀区金沙江路 1518 弄4
+ 		+
200334
+ 		+
查看4
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/dist/smartTable.26faa588.js b/dist/smartTable.26faa588.js new file mode 100644 index 0000000..2a5e445 --- /dev/null +++ b/dist/smartTable.26faa588.js @@ -0,0 +1 @@ +!function(e){var t={};function r(o){if(t[o])return t[o].exports;var a=t[o]={i:o,l:!1,exports:{}};return e[o].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(o,a,function(t){return e[t]}.bind(null,a));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=4)}([function(e,t,r){var o=r(1),a=r(2);"string"==typeof(a=a.__esModule?a.default:a)&&(a=[[e.i,a,""]]);var l={insert:"head",singleton:!1},i=(o(e.i,a,l),a.locals?a.locals:{});e.exports=i},function(e,t,r){"use strict";var o,a=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},l=function(){var e={};return function(t){if(void 0===e[t]){var r=document.querySelector(t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}e[t]=r}return e[t]}}(),i={};function n(e,t,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 .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:8px;padding-right:4px}.smart-table th>.cell{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;vertical-align:middle;padding-left:8px;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',""]),e.exports=t},function(e,t,r){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=function(e,t){var r=e[1]||"",o=e[3];if(!o)return r;if(t&&"function"==typeof btoa){var a=(i=o,n=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(n),"/*# ".concat(s," */")),l=o.sources.map((function(e){return"/*# sourceURL=".concat(o.sourceRoot||"").concat(e," */")}));return[r].concat(l).concat([a]).join("\n")}var i,n,s;return[r].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r){"string"==typeof e&&(e=[[null,e,""]]);for(var o=0;ot}function l(e,t,r,o){let a=document.createElement("div");a.className=e;let l=document.createElement("table");return l.className="smart-table_"+r,l.style.width=t.size.tabelWidth-1+"px",l.appendChild(s(t.colgroup)),l.appendChild(o),a.appendChild(l),a}function i(e,t){let r=s(e.colgroup);t.replaceChild(r,t.querySelector("colgroup"))}function n(e,t,r){return Number.parseInt(e.getAttribute(t)||r)}function s(e){if(!e)return;let t=document.createElement("colgroup");return e.forEach(e=>{let r=document.createElement("col");r.setAttribute("width",e),t.appendChild(r)}),t}function d(e,t,r){if(t){let o=t.querySelector(".smart-table_header"),a=t.querySelector(".smart-table_body");i(e,o),i(e,a);const l=t.querySelector("tr").querySelectorAll("th");let n=0;l.forEach((function(t,r){"is-hidden"!=t.className&&(n+=e.colgroup[r])})),t.style.width=n+"px",o.style.width=r+"px",a.style.width=r+"px"}}function c(e){this instanceof c||console.error("Smart Table is a constructor and should be called with the `new` keyword"),window.addEventListener("load",()=>{setTimeout(this._init(e),0)})}c.prototype._init=function(e={}){e.selector||console.error("Smart Table init need a selector");const t=this;var r;t.$options=e,t.isWindows=(r=navigator.userAgent.toLowerCase()).indexOf("win32")>=0||r.indexOf("wow32")>=0||r.indexOf("win64")>=0||r.indexOf("wow64")>=0,t.scrollbarFit=e.scrollbarWidth?e.scrollbarWidth:8;const a=e.selector&&document.querySelector(String(e.selector).trim());if(!a)return;const s=a.querySelector("table");if(!s)return;e.size&&a.classList.add("smart-table-custom-"+e.size),e.textAlign&&a.classList.add("smart-table-custom-"+e.textAlign);const c=s.querySelector("thead"),f=s.querySelector("tbody");s.hasAttribute("stripe")&&f.classList.add("stripe"),s.style.width="100%",t.$root=a;const h=c.offsetHeight,u=s.offsetHeight;let b=e.tableHeight;if(b=("function"==typeof b?b():b)||u,b=b>h?b:h+100,t.size={theadHeight:h,tbodyHeight:b-h,tabelWidth:s.offsetWidth,wrapperWidth:s.offsetWidth,tableHeight:b,fixWrapperHeigth:u>b?b:u},t.props=function(e){let t={},r=[],o=e.querySelectorAll("tr");return o.forEach((e,t)=>{let o=r[t]||[];e.querySelectorAll("th").forEach(e=>{let a=n(e,"rowspan",1),l=n(e,"colspan",1),i=function(e){for(let t=0,r=e.length;t1)for(let e=1;e1)for(let e=1;e{let t=n(e,"width",0);0===t&&(t=e.offsetWidth>80?e.offsetWidth:80),o.push(t)}):t.querySelector("tr").querySelectorAll("td").forEach(e=>{let t=e.offsetWidth;t+=t<50?10:t>=50&&t<100?30:40,o.push(t)}),o}(c,f,t.props.theadLength),t.size.tabelWidth=s.style.width=t.colgroup.reduce((e,t)=>e+t),t.hasVerticalScroll=b0;t--)if(s[t].hasAttribute("fixed")){if(t===c)break;i.thead.push("field-"+t);let o=n(s[t],"colspan",1);for(let t=0;t{t.style.height=e.size.tbodyHeight+"px"}),o.thead.length>0){i=i>o.width?i:o.width;let a=t.cloneNode(!0);a.querySelector("tr").querySelectorAll("th").forEach((e,t)=>{-1===o.thead.indexOf("field-"+t)&&e.classList.add("is-hidden")});let n=l("smart-table_fixed-header-wrapper",e,"header",a),s=r.cloneNode(!0);s.querySelectorAll("tr").forEach(e=>{e.querySelectorAll("td").forEach((e,t)=>{-1===o.tbody.indexOf("field-"+t)&&e.classList.add("is-hidden")})});let d=l("smart-table_fixed-body-wrapper",e,"body",s);d.style.top=e.size.theadHeight+"px",d.style.height=e.size.tbodyHeight-(e.hasHorizontalScroll?e.scrollbarFit:0)+"px";let c=document.createElement("div");c.className="smart-table_fixed",c.appendChild(n),c.appendChild(d),c.style.width=o.width+"px",c.style.height=e.size.fixWrapperHeigth-(e.hasHorizontalScroll?e.scrollbarFit:0)+"px",e.$root.appendChild(c),e.$fixedLeft=d}if(a.thead.length>0){i+=a.width;let o=t.cloneNode(!0);o.querySelector("tr").querySelectorAll("th").forEach((e,t)=>{-1===a.thead.indexOf("field-"+t)&&e.classList.add("is-hidden")});let n=l("smart-table_fixed-header-wrapper",e,"header",o),s=r.cloneNode(!0);s.querySelectorAll("tr").forEach(e=>{e.querySelectorAll("td").forEach((e,t)=>{-1===a.tbody.indexOf("field-"+t)&&e.classList.add("is-hidden")})});let d=l("smart-table_fixed-body-wrapper",e,"body",s);d.style.top=e.size.theadHeight+"px",d.style.height=e.size.tbodyHeight-(e.hasHorizontalScroll?e.scrollbarFit:0)+"px";let c=document.createElement("div");if(c.className="smart-table_fixed-right",c.style.right=(e.hasVerticalScroll?e.scrollbarFit:0)+"px",c.appendChild(n),c.appendChild(d),c.style.width=a.width+"px",c.style.height=e.size.fixWrapperHeigth-(e.hasHorizontalScroll?e.scrollbarFit:0)+"px",e.$root.appendChild(c),e.$fixedRight=d,e.hasVerticalScroll){let t=document.createElement("div");t.className="smart-table_fixed-right-patch",t.style.width=e.scrollbarFit+"px",t.style.height=e.size.theadHeight+"px",e.$root.appendChild(t)}}e.$root.style.minWidth=i+"px"}(t,c,f),t.data=function(e,t){let r=e.$fixedLeft&&e.$fixedLeft.querySelectorAll("tbody tr"),o=e.$fixedRight&&e.$fixedRight.querySelectorAll("tbody tr"),a=[];return t.querySelectorAll("tr").forEach((e,t)=>{if(!e.hasAttribute("unsort")){let l={$el:e,$fixedLeftEl:r&&r[t],$fixedRightEl:o&&o[t],$key:"$$rowkey"+t};e.querySelectorAll("td .cell").forEach((e,t)=>{l["field-"+t]=e.innerHTML}),a.push(l)}}),a}(t,f),function(e){let t=Array.from(e.$root.querySelectorAll("th[sort]"));0!==t.length&&t.forEach(r=>{r.addEventListener("click",a=>{a.stopPropagation();let l="ASC",i=r.getAttribute("sort")||"string";r.classList.contains("asc")?(r.classList.remove("asc"),r.classList.add("desc"),l="DESC"):(r.classList.remove("desc"),r.classList.add("asc")),t=t.map(e=>(r!=e&&e.classList.remove("asc","desc"),e)),o(e,r.getAttribute("sortkey"),l,i)})})}(t),function(e){e.$tbodyWrapper.addEventListener("scroll",()=>function(e){!function(e,t){let r,o=0;return function(){let a=this,l=(new Date).getTime()-o,i=arguments;function n(){o=(new Date).getTime(),t.apply(a,i)}r&&clearTimeout(r),l>e?n():r=setTimeout(n,e-l)}}(20,()=>{e.$theadWrapper.scrollLeft=e.$tbodyWrapper.scrollLeft,e.$fixedLeft&&(e.$fixedLeft.scrollTop=e.$tbodyWrapper.scrollTop),e.$fixedRight&&(e.$fixedRight.scrollTop=e.$tbodyWrapper.scrollTop)})()}(e),{passive:!0}),window.addEventListener("resize",function(e,t){let r=null;return function(){null!==r&&clearTimeout(r),r=setTimeout(t,e)}}(600,()=>{let t=e.$root,r=e.size.wrapperWidth,o=e.size.tabelWidth,a=t.offsetWidth,l=parseInt(o*(a/r)),n=e.$theadWrapper.querySelector(".smart-table_header"),s=e.$tbodyWrapper.querySelector(".smart-table_body");e.colgroup.forEach((function(t,r){e.colgroup[r]=parseInt(l*(t/o))+1})),e.size.wrapperWidth=a,e.size.tabelWidth=l,n.style.width=l+"px",s.style.width=l+"px",i(e,n),i(e,s),d(e,t.querySelector(".smart-table_fixed"),l),d(e,t.querySelector(".smart-table_fixed-right"),l)}));let t=e.$tbodyWrapper.querySelectorAll("tr"),r=e.$root.querySelectorAll(".smart-table_fixed .smart-table_fixed-body-wrapper tr"),o=e.$root.querySelectorAll(".smart-table_fixed-right .smart-table_fixed-body-wrapper tr");t.forEach((e,t)=>{e.addEventListener("mouseenter",()=>{e.className="smart-table_hover-tr",r.length>0&&(r[t].className="smart-table_hover-tr"),o.length>0&&(o[t].className="smart-table_hover-tr")}),e.addEventListener("mouseleave",()=>{e.className="",r.length>0&&(r[t].className=""),o.length>0&&(o[t].className="")})})}(t),t.hasVerticalScroll){let e=document.createElement("th");e.setAttribute("width",t.scrollbarFit),e.setAttribute("rowspan",t.props.shapes.length),c.querySelector("tr").appendChild(e)}};var f=c;window.SmartTable=f}]); \ No newline at end of file