Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
datagrid - npm Package Compare versions
Comparing version 0.0.1 to 0.1.0
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.datagrid=e():t.datagrid=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}(function(t){for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e))switch(typeof t[e]){case"function":break;case"object":t[e]=function(e){var n=e.slice(1),r=t[e[0]];return function(t,e,o){r.apply(this,[t,e,o].concat(n))}}(t[e]);break;default:t[e]=t[t[e]]}return t}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=n(44),i=r(o),u=n(48),a=r(u),c=n(47),s=r(c),f=n(49),l=r(f),d=n(45),p=r(d),h=n(46),v=r(h);i["default"].use(a["default"]),i["default"].use(s["default"]),i["default"].use(l["default"]),i["default"].use(p["default"]),i["default"].use(v["default"]),e["default"]=i["default"]},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e,n){t.exports=!n(13)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(10),o=n(37),i=n(28),u=Object.defineProperty;e.f=n(2)?Object.defineProperty:function(t,e,n){if(r(t),e=i(e,!0),r(n),o)try{return u(t,e,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(68),o=n(18);t.exports=function(t){return r(o(t))}},function(t,e){var n=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(t,e,n){var r=n(4),o=n(15);t.exports=n(2)?function(t,e,n){return r.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(26)("wks"),o=n(16),i=n(1).Symbol,u="function"==typeof i,a=t.exports=function(t){return r[t]||(r[t]=u&&i[t]||(u?i:o)("Symbol."+t))};a.store=r},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e,n){var r=!(arguments.length<=3||void 0===arguments[3])&&arguments[3];return t.addEventListener(e,n,r),function(){t.removeEventListener(e,n,r)}}},function(t,e,n){var r=n(12);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){var r=n(1),o=n(6),i=n(35),u=n(7),a="prototype",c=function(t,e,n){var s,f,l,d=t&c.F,p=t&c.G,h=t&c.S,v=t&c.P,y=t&c.B,b=t&c.W,m=p?o:o[e]||(o[e]={}),g=m[a],_=p?r:h?r[e]:(r[e]||{})[a];p&&(n=e);for(s in n)f=!d&&_&&void 0!==_[s],f&&s in m||(l=f?_[s]:n[s],m[s]=p&&"function"!=typeof _[s]?n[s]:y&&f?i(l,r):b&&_[s]==l?function(t){var e=function(e,n,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,r)}return t.apply(this,arguments)};return e[a]=t[a],e}(l):v&&"function"==typeof l?i(Function.call,l):l,v&&((m.virtual||(m.virtual={}))[s]=l,t&c.R&&g&&!g[s]&&u(g,s,l)))};c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},function(t,e,n){var r=n(42),o=n(19);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e){var n=arguments.length<=2||void 0===arguments[2]?document.body:arguments[2],r=t.toUpperCase(),o=e,i=null;do if(o.tagName===r){i=o;break}while(o!==n&&(o=o.parentElement));return i}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){t.exports={}},function(t,e){t.exports=!0},function(t,e,n){var r=n(10),o=n(74),i=n(19),u=n(25)("IE_PROTO"),a=function(){},c="prototype",s=function(){var t,e=n(36)("iframe"),r=i.length,o="<",u=">";for(e.style.display="none",n(67).appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(o+"script"+u+"document.F=Object"+o+"/script"+u),t.close(),s=t.F;r--;)delete s[c][i[r]];return s()};t.exports=Object.create||function(t,e){var n;return null!==t?(a[c]=r(t),n=new a,a[c]=null,n[u]=t):n=s(),void 0===e?n:o(n,e)}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(4).f,o=n(3),i=n(8)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r=n(26)("keys"),o=n(16);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e,n){var r=n(1),o="__core-js_shared__",i=r[o]||(r[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(12);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(1),o=n(6),i=n(21),u=n(30),a=n(4).f;t.exports=function(t){var e=o.Symbol||(o.Symbol=i?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||a(e,t,{value:u.f(t)})}},function(t,e,n){e.f=n(8)},function(t,e){"use strict";e.__esModule=!0,e["default"]=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(52),i=r(o);e["default"]=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),(0,i["default"])(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}()},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(55),i=r(o),u=n(54),a=r(u),c="function"==typeof a["default"]&&"symbol"==typeof i["default"]?function(t){return typeof t}:function(t){return t&&"function"==typeof a["default"]&&t.constructor===a["default"]?"symbol":typeof t};e["default"]="function"==typeof a["default"]&&"symbol"===c(i["default"])?function(t){return"undefined"==typeof t?"undefined":c(t)}:function(t){return t&&"function"==typeof a["default"]&&t.constructor===a["default"]?"symbol":"undefined"==typeof t?"undefined":c(t)}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r=n(63);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(12),o=n(1).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e,n){t.exports=!n(2)&&!n(13)(function(){return 7!=Object.defineProperty(n(36)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){"use strict";var r=n(21),o=n(11),i=n(43),u=n(7),a=n(3),c=n(20),s=n(70),f=n(24),l=n(76),d=n(8)("iterator"),p=!([].keys&&"next"in[].keys()),h="@@iterator",v="keys",y="values",b=function(){return this};t.exports=function(t,e,n,m,g,_,x){s(n,e,m);var w,O,S,j=function(t){if(!p&&t in E)return E[t];switch(t){case v:return function(){return new n(this,t)};case y:return function(){return new n(this,t)}}return function(){return new n(this,t)}},k=e+" Iterator",M=g==y,L=!1,E=t.prototype,P=E[d]||E[h]||g&&E[g],T=P||j(g),$=g?M?j("entries"):T:void 0,D="Array"==e?E.entries||P:P;if(D&&(S=l(D.call(new t)),S!==Object.prototype&&(f(S,k,!0),r||a(S,d)||u(S,d,b))),M&&P&&P.name!==y&&(L=!0,T=function(){return P.call(this)}),r&&!x||!p&&!L&&E[d]||u(E,d,T),c[e]=T,c[k]=b,g)if(w={values:M?T:j(y),keys:_?T:j(v),entries:$},x)for(O in w)O in E||i(E,O,w[O]);else o(o.P+o.F*(p||L),e,w);return w}},function(t,e,n){var r=n(23),o=n(15),i=n(5),u=n(28),a=n(3),c=n(37),s=Object.getOwnPropertyDescriptor;e.f=n(2)?s:function(t,e){if(t=i(t),e=u(e,!0),c)try{return s(t,e)}catch(n){}if(a(t,e))return o(!r.f.call(t,e),t[e])}},function(t,e,n){var r=n(42),o=n(19).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(3),o=n(5),i=n(65)(!1),u=n(25)("IE_PROTO");t.exports=function(t,e){var n,a=o(t),c=0,s=[];for(n in a)n!=u&&r(a,n)&&s.push(n);for(;e.length>c;)r(a,n=e[c++])&&(~i(s,n)||s.push(n));return s}},function(t,e,n){t.exports=n(7)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t){return t.name}function i(t,e){return e[t.key]}Object.defineProperty(e,"__esModule",{value:!0});var u=n(31),a=r(u),c=n(57),s=r(c),f=n(32),l=r(f),d=n(56),p=r(d);n(92);var h=n(98),v=r(h),y=n(50),b=r(y),m=n(9),g=r(m),_=[],x=function(t){function e(t,n){(0,a["default"])(this,e);var r=(0,s["default"])(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.el=t,r.options=Object.assign({},{height:t.clientHeight},n),_.forEach(function(t){return t(r)}),r._init(),r}return(0,p["default"])(e,t),(0,l["default"])(e,null,[{key:"use",value:function(t){t(e)}},{key:"hook",value:function(t){return _.push(t),function(){var e=_.indexOf(t);e>=0&&_.splice(e,1)}}}]),(0,l["default"])(e,[{key:"_init",value:function(){var t=this._unbindEvents=[];this.emit("beforeInit");var e=this.el;e.classList.add("datagrid"),e.innerHTML=v["default"];var n={$columnsWrapper:".grid-columns-wrapper",$columns:".grid-columns",$columnsColGroup:".grid-columns colgroup",$columnsThead:".grid-columns thead",$bodyWrapper:".grid-body-wrapper",$body:".grid-body",$bodyColGroup:".grid-body colgroup",$bodyTbody:".grid-body tbody",$noData:".grid-no-data"};for(var r in n)n[r]=e.querySelector(n[r]);t.push((0,g["default"])(n.$bodyWrapper,"scroll",function(){n.$columns.style.left="-"+n.$bodyWrapper.scrollLeft+"px"})),this.ui=n,this.emit("afterInit")}},{key:"setData",value:function(t){this.emit("beforeSetData",t),this.renderData={},this.setColumns(t.columns),this.setBody(t.rows),this.setWidth(t.width),this.emit("afterSetData",t)}},{key:"setWidth",value:function(t){t?this.renderData.columnsWidth=t:t=this.renderData.columnsWidth;var e=this._colGroupsHTML(t);this._renderCols(e),this._resize(t)}},{key:"_colGroupsHTML",value:function(t){return t?t.map(function(t){return'<col style="width:'+t+'px">'}):[]}},{key:"_renderCols",value:function(t){var e=this.ui;e.$columnsColGroup.innerHTML=e.$bodyColGroup.innerHTML=t.join("")}},{key:"_resize",value:function(t){var e=this.ui,n=e.$columns,r=e.$bodyWrapper,o=e.$noData,i=e.$body,u=t?t.reduce(function(t,e){return t+e}):this.el.clientWidth;n.style.width=u+"px";var a=this.options.height,c=this.ui.$columnsWrapper.clientHeight,s=a-c,f={totalHeight:a,bodyHeight:s};this.emit("beforeSetSize",f),r.style.height=f.bodyHeight+"px",this.empty?(o.style.height=f.bodyHeight+"px",o.style.lineHeight=f.bodyHeight+"px"):i.style.width=u+"px"}},{key:"setColumns",value:function(t){var e=this.renderData.columnsDef=this._normalize(t),n=this._columnsHTML(e);this.emit("beforeRenderColumns",n),this._renderColumns(n)}},{key:"_normalize",value:function(t){return t.map(function(t){var e="string"==typeof t?{name:t}:t;return e.key||(e.key=e.name),e})}},{key:"_columnsHTML",value:function(t){return t.map(function(t){return"<th>"+(t.th||o)(t)+"</th>"})}},{key:"_renderColumns",value:function(t){this.ui.$columnsThead.innerHTML=t.join("")}},{key:"setBody",value:function(t){var e=this.renderData;this.empty=!t||!t.length,e.rows=t,e.trsArr=this._bodyHTML(e.columnsDef,t),this._renderBody(e.trsArr)}},{key:"_bodyHTML",value:function(t,e){return this.empty?[]:e.map(function(e,n){var r='<tr data-index="'+n+'">';return t.forEach(function(t){r+="<td>"+(t.td||i)(t,e)+"</td>"}),r+="</tr>"})}},{key:"_renderBody",value:function(t){var e=this.ui,n=e.$body,r=e.$noData,o=e.$bodyTbody;return this.empty?(n.classList.add("hidden"),void r.classList.remove("hidden")):(o.innerHTML=t.join(""),n.classList.remove("hidden"),void r.classList.add("hidden"))}},{key:"destroy",value:function(t){this.emit("beforeDestroy"),this._unbindEvents.forEach(function(t){return t()}),t&&this.el.remove(),this.emit("afterDestroy")}}]),e}(b["default"]);e["default"]=x},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){t.hook(function(t){if(t.options.columnResize){var e=document.createElement("div");e.classList.add("dragging-line");var n=[];t.once("afterInit",function(){t.ui.$draggingLine=e,t.el.appendChild(e)});var r=!1,o=void 0,u=void 0,f=void 0,h=void 0,v=void 0,y=void 0;n.push(t.on("beforeRenderColumns",function(t){t.forEach(function(e,n){t[n]=e.replace("</th>",'<span class="drag-lever"></span></th>')})}),(0,i["default"])(t.el,l,function(n){if(n.target.classList.contains("drag-lever")&&0===n.button){var i=(0,a["default"])("th",n.target,t.el);if(!i)return;i.classList.add("resizing"),u=i,y=-(i.clientWidth-c);var l=t.ui,d=l.$columnsWrapper,p=l.$bodyWrapper;e.style.height=d.clientHeight+p.clientHeight+"px",v=i.offsetLeft+i.clientWidth-p.scrollLeft,e.style.left=v+"px",e.classList.add("show"),r=!0,o=n.target,o.classList.add("dragging"),h=n.pageX,f=s.call(i.parentElement.children,i)}}),(0,i["default"])(document,d,function(t){if(r){t.preventDefault();var n=t.pageX-h;n>y&&(e.style.left=v+(t.pageX-h)+"px")}}),(0,i["default"])(document,p,function(n){if(r){setTimeout(function(){return u.classList.remove("resizing")},0),e.classList.remove("show"),r=!1,o.classList.remove("dragging");var i=n.pageX-h;i<y&&(i=y);var a=t.renderData.columnsWidth;a[f]=a[f]+i,t.setWidth(a)}})),t.once("beforeDestroy",function(){n.forEach(function(t){return t()})})}})},n(93);var o=n(9),i=r(o),u=n(17),a=r(u),c=100,s=Array.prototype.indexOf,f="ontouchstart"in window,l=f?"touchstart":"mousedown",d=f?"touchmove":"mousemove",p=f?"touchend":"mouseup"},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){t.hook(function(e){function n(){function n(t){var n=o.el.contains(t.target),r=(n?e:o).ui.$bodyWrapper,i=(n?o:e).ui.$bodyWrapper;r.scrollTop=i.scrollTop}var u=document.createElement("div");u.classList.add("fixed-datagrid");var a=document.createElement("div");a.classList.add("hidden"),u.appendChild(a),e.el.appendChild(u),o=new t(a,{height:e.ui.$columnsWrapper.clientHeight+e.ui.$bodyWrapper.clientHeight,columnSorting:e.options.columnSorting,columnResize:e.options.columnResize,selection:e.options.selection}),r.push((0,i["default"])(o.ui.$bodyWrapper,"scroll",n),(0,i["default"])(e.ui.$bodyWrapper,"scroll",n)),e.options.selection&&(e.on("selectedChanged",function(t){o.selectRow(t,!1)}),o.on("selectedChanged",function(t){e.selectRow(t)}))}if(e.options.fixedColumns){var r=[],o=void 0;e.on("afterSetData",function(t){var r=t.fixedColumnsLeft;return r?(o||n(e.el),o.el.classList.remove("hidden"),void o.setData({columns:e.renderData.columnsDef.slice(0,r),width:e.renderData.columnsWidth.slice(0,r),rows:e.renderData.rows})):void(o&&o.el.classList.add("hidden"))})}})},n(94);var o=n(9),i=r(o)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){t.hook(function(t){function e(e){return Number.isNaN(e)||e<1||e>n.totalPage?void(o.querySelector("[data-page]").value=n.cur):(o.querySelector("[data-page]").value=n.cur=e,void t.emit("switchPage",e))}if(t.options.pagination){var n=t.pager={cur:1,total:null,size:null,start:null,end:null,totalPage:null},r=[],o=document.createElement("div");o.classList.add("grid-pager-wrapper"),r.push((0,a["default"])(o,"click",function(t){var r=t.target.dataset.jump;if(r){var o=void 0;switch(r){case"first":o=1;break;case"end":o=n.totalPage;break;case"prev":o=n.cur-1;break;case"next":o=n.cur+1}e(o)}}),(0,a["default"])(o,"click",function(e){void 0!==e.target.dataset.downlond&&t.emit("download-table")}),(0,a["default"])(o,"keydown",function(t){13===t.keyCode&&void 0!==t.target.dataset.page&&e(Number(t.target.value))}),t.on("beforeSetData",function(t){if(!t.rows||!t.rows.length)return void o.classList.add("hidden");var e=t.size,r=t.total,u=n.cur,a=t.rows.length;n.total=r,n.size=e,n.start=(u-1)*e+1,n.end=n.start+a-1,n.total=r,n.totalPage=Math.ceil(r/e),o.innerHTML=i["default"].replace(/\{\{(\w+)\}\}/g,function(t,e){return n[e]}),o.classList.remove("hidden")}),t.on("beforeSetSize",function(t){var e=o.clientHeight;t.pagerHeight=e,t.bodyHeight=t.bodyHeight-e})),t.once("afterInit",function(){t.el.appendChild(o),t.ui.$pagerWrapper=o}),t.once("beforeDestroy",function(){r.forEach(function(t){return t()})})}})},n(95);var o=n(99),i=r(o),u=n(9),a=r(u)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){t.prototype.selectRow=function(t){var e=arguments.length<=1||void 0===arguments[1]||arguments[1],n=this.ui.$body,r=n.querySelector('tr[data-index="'+t+'"]');if(r){var o=n.querySelector("tr.selected");o&&o.classList.remove("selected"),r.classList.add("selected"),this._selectRowIndex=t,e&&this.emit("selectedChanged",t)}},t.hook(function(t){if(t.options.selection){var e=t.on("beforeSetData",function(){t._selectRowIndex=null});t.once("afterInit",function(){var e=t.ui.$body;e.addEventListener("click",function(n){var r=(0,i["default"])("tr",n.target,e);if(r){var o=Number(r.dataset.index);Number.isNaN(o)||t._selectRowIndex===o||t.selectRow(o)}})}),t.once("beforeDestroy",e)}})},n(96);var o=n(17),i=r(o)},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){t.hook(function(t){function e(){if("number"==typeof r){var e=t.ui.$columnsWrapper.querySelector("th:nth-child("+(r+1)+")");e&&e.classList.remove(d,p)}}if(t.options.columnSorting){var n=[],r=void 0,o=l;n.push(t.on("beforeRenderColumns",function(t){t.forEach(function(e,n){t[n]=e.replace("</th>",'<span class="order-ico"></span></th>')})})),t.once("afterInit",function(){var u=t.ui.$columnsWrapper;n.push((0,a["default"])(u,"click",function(n){var a=(0,i["default"])("th",n.target,u);if(a&&!a.classList.contains("resizing")){var h=c.call(a.parentElement.children,a),v=t.renderData.columnsDef[h];if(v.sortable!==!1){switch(h!==r&&(e(),r=h,o=l),a.classList.remove(d,p),o){case l:o=f,a.classList.add(d);break;case f:o=s,a.classList.add(p);break;case s:o=l}t.emit("sort",v,o,a)}}}))}),t.once("beforeDestroy",function(){n.forEach(function(t){return t()})})}})},n(97);var o=n(17),i=r(o),u=n(9),a=r(u),c=Array.prototype.indexOf,s=-1,f=1,l=0,d="order-by-asc",p="order-by-desc"},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=n(31),i=r(o),u=n(32),a=r(u),c=function(){function t(){(0,i["default"])(this,t),this._callbacks={}}return(0,a["default"])(t,[{key:"on",value:function(t,e){var n=this._callbacks,r=n[t]||(n[t]=[]);return r.push(e),function(){var t=r.indexOf(e);t>=0&&r.splice(t,1)}}},{key:"once",value:function(t,e){var n=this.on(t,function(){e.apply(null,arguments),window.setTimeout(n,0)});return n}},{key:"emit",value:function(t){for(var e=arguments.length,n=Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];var o=this._callbacks[t];o&&o.length&&o.forEach(function(t){return t.apply(null,n)})}}]),t}();e["default"]=c},function(t,e,n){t.exports={"default":n(58),__esModule:!0}},function(t,e,n){t.exports={"default":n(59),__esModule:!0}},function(t,e,n){t.exports={"default":n(60),__esModule:!0}},function(t,e,n){t.exports={"default":n(61),__esModule:!0}},function(t,e,n){t.exports={"default":n(62),__esModule:!0}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(53),i=r(o),u=n(51),a=r(u),c=n(33),s=r(c);e["default"]=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof e?"undefined":(0,s["default"])(e)));t.prototype=(0,a["default"])(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(i["default"]?(0,i["default"])(t,e):t.__proto__=e)}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(33),i=r(o);e["default"]=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!==("undefined"==typeof e?"undefined":(0,i["default"])(e))&&"function"!=typeof e?t:e}},function(t,e,n){n(83);var r=n(6).Object;t.exports=function(t,e){return r.create(t,e)}},function(t,e,n){n(84);var r=n(6).Object;t.exports=function(t,e,n){return r.defineProperty(t,e,n)}},function(t,e,n){n(85),t.exports=n(6).Object.setPrototypeOf},function(t,e,n){n(88),n(86),n(89),n(90),t.exports=n(6).Symbol},function(t,e,n){n(87),n(91),t.exports=n(30).f("iterator")},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){t.exports=function(){}},function(t,e,n){var r=n(5),o=n(80),i=n(79);t.exports=function(t){return function(e,n,u){var a,c=r(e),s=o(c.length),f=i(u,s);if(t&&n!=n){for(;s>f;)if(a=c[f++],a!=a)return!0}else for(;s>f;f++)if((t||f in c)&&c[f]===n)return t||f||0;return!t&&-1}}},function(t,e,n){var r=n(14),o=n(41),i=n(23);t.exports=function(t){var e=r(t),n=o.f;if(n)for(var u,a=n(t),c=i.f,s=0;a.length>s;)c.call(t,u=a[s++])&&e.push(u);return e}},function(t,e,n){t.exports=n(1).document&&document.documentElement},function(t,e,n){var r=n(34);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(34);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){"use strict";var r=n(22),o=n(15),i=n(24),u={};n(7)(u,n(8)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=r(u,{next:o(1,n)}),i(t,e+" Iterator")}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r=n(14),o=n(5);t.exports=function(t,e){for(var n,i=o(t),u=r(i),a=u.length,c=0;a>c;)if(i[n=u[c++]]===e)return n}},function(t,e,n){var r=n(16)("meta"),o=n(12),i=n(3),u=n(4).f,a=0,c=Object.isExtensible||function(){return!0},s=!n(13)(function(){return c(Object.preventExtensions({}))}),f=function(t){u(t,r,{value:{i:"O"+ ++a,w:{}}})},l=function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,r)){if(!c(t))return"F";if(!e)return"E";f(t)}return t[r].i},d=function(t,e){if(!i(t,r)){if(!c(t))return!0;if(!e)return!1;f(t)}return t[r].w},p=function(t){return s&&h.NEED&&c(t)&&!i(t,r)&&f(t),t},h=t.exports={KEY:r,NEED:!1,fastKey:l,getWeak:d,onFreeze:p}},function(t,e,n){var r=n(4),o=n(10),i=n(14);t.exports=n(2)?Object.defineProperties:function(t,e){o(t);for(var n,u=i(e),a=u.length,c=0;a>c;)r.f(t,n=u[c++],e[n]);return t}},function(t,e,n){var r=n(5),o=n(40).f,i={}.toString,u="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[],a=function(t){try{return o(t)}catch(e){return u.slice()}};t.exports.f=function(t){return u&&"[object Window]"==i.call(t)?a(t):o(r(t))}},function(t,e,n){var r=n(3),o=n(81),i=n(25)("IE_PROTO"),u=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},function(t,e,n){var r=n(12),o=n(10),i=function(t,e){if(o(t),!r(e)&&null!==e)throw TypeError(e+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,e,r){try{r=n(35)(Function.call,n(39).f(Object.prototype,"__proto__").set,2),r(t,[]),e=!(t instanceof Array)}catch(o){e=!0}return function(t,n){return i(t,n),e?t.__proto__=n:r(t,n),t}}({},!1):void 0),check:i}},function(t,e,n){var r=n(27),o=n(18);t.exports=function(t){return function(e,n){var i,u,a=String(o(e)),c=r(n),s=a.length;return c<0||c>=s?t?"":void 0:(i=a.charCodeAt(c),i<55296||i>56319||c+1===s||(u=a.charCodeAt(c+1))<56320||u>57343?t?a.charAt(c):i:t?a.slice(c,c+2):(i-55296<<10)+(u-56320)+65536)}}},function(t,e,n){var r=n(27),o=Math.max,i=Math.min;t.exports=function(t,e){return t=r(t),t<0?o(t+e,0):i(t,e)}},function(t,e,n){var r=n(27),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(18);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";var r=n(64),o=n(71),i=n(20),u=n(5);t.exports=n(38)(Array,"Array",function(t,e){this._t=u(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,o(1)):"keys"==e?o(0,n):"values"==e?o(0,t[n]):o(0,[n,t[n]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,e,n){var r=n(11);r(r.S,"Object",{create:n(22)})},function(t,e,n){var r=n(11);r(r.S+r.F*!n(2),"Object",{defineProperty:n(4).f})},function(t,e,n){var r=n(11);r(r.S,"Object",{setPrototypeOf:n(77).set})},function(t,e){},function(t,e,n){"use strict";var r=n(78)(!0);n(38)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){"use strict";var r=n(1),o=n(3),i=n(2),u=n(11),a=n(43),c=n(73).KEY,s=n(13),f=n(26),l=n(24),d=n(16),p=n(8),h=n(30),v=n(29),y=n(72),b=n(66),m=n(69),g=n(10),_=n(5),x=n(28),w=n(15),O=n(22),S=n(75),j=n(39),k=n(4),M=n(14),L=j.f,E=k.f,P=S.f,T=r.Symbol,$=r.JSON,D=$&&$.stringify,C="prototype",W=p("_hidden"),H=p("toPrimitive"),N={}.propertyIsEnumerable,I=f("symbol-registry"),A=f("symbols"),R=f("op-symbols"),z=Object[C],F="function"==typeof T,G=r.QObject,q=!G||!G[C]||!G[C].findChild,B=i&&s(function(){return 7!=O(E({},"a",{get:function(){return E(this,"a",{value:7}).a}})).a})?function(t,e,n){var r=L(z,e);r&&delete z[e],E(t,e,n),r&&t!==z&&E(z,e,r)}:E,J=function(t){var e=A[t]=O(T[C]);return e._k=t,e},X=F&&"symbol"==typeof T.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof T},K=function(t,e,n){return t===z&&K(R,e,n),g(t),e=x(e,!0),g(n),o(A,e)?(n.enumerable?(o(t,W)&&t[W][e]&&(t[W][e]=!1),n=O(n,{enumerable:w(0,!1)})):(o(t,W)||E(t,W,w(1,{})),t[W][e]=!0),B(t,e,n)):E(t,e,n)},U=function(t,e){g(t);for(var n,r=b(e=_(e)),o=0,i=r.length;i>o;)K(t,n=r[o++],e[n]);return t},Y=function(t,e){return void 0===e?O(t):U(O(t),e)},Q=function(t){var e=N.call(this,t=x(t,!0));return!(this===z&&o(A,t)&&!o(R,t))&&(!(e||!o(this,t)||!o(A,t)||o(this,W)&&this[W][t])||e)},V=function(t,e){if(t=_(t),e=x(e,!0),t!==z||!o(A,e)||o(R,e)){var n=L(t,e);return!n||!o(A,e)||o(t,W)&&t[W][e]||(n.enumerable=!0),n}},Z=function(t){for(var e,n=P(_(t)),r=[],i=0;n.length>i;)o(A,e=n[i++])||e==W||e==c||r.push(e);return r},tt=function(t){for(var e,n=t===z,r=P(n?R:_(t)),i=[],u=0;r.length>u;)!o(A,e=r[u++])||n&&!o(z,e)||i.push(A[e]);return i};F||(T=function(){if(this instanceof T)throw TypeError("Symbol is not a constructor!");var t=d(arguments.length>0?arguments[0]:void 0),e=function(n){this===z&&e.call(R,n),o(this,W)&&o(this[W],t)&&(this[W][t]=!1),B(this,t,w(1,n))};return i&&q&&B(z,t,{configurable:!0,set:e}),J(t)},a(T[C],"toString",function(){return this._k}),j.f=V,k.f=K,n(40).f=S.f=Z,n(23).f=Q,n(41).f=tt,i&&!n(21)&&a(z,"propertyIsEnumerable",Q,!0),h.f=function(t){return J(p(t))}),u(u.G+u.W+u.F*!F,{Symbol:T});for(var et="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),nt=0;et.length>nt;)p(et[nt++]);for(var et=M(p.store),nt=0;et.length>nt;)v(et[nt++]);u(u.S+u.F*!F,"Symbol",{"for":function(t){return o(I,t+="")?I[t]:I[t]=T(t)},keyFor:function(t){if(X(t))return y(I,t);throw TypeError(t+" is not a symbol!")},useSetter:function(){q=!0},useSimple:function(){q=!1}}),u(u.S+u.F*!F,"Object",{create:Y,defineProperty:K,defineProperties:U,getOwnPropertyDescriptor:V,getOwnPropertyNames:Z,getOwnPropertySymbols:tt}),$&&u(u.S+u.F*(!F||s(function(){var t=T();return"[null]"!=D([t])||"{}"!=D({a:t})||"{}"!=D(Object(t))})),"JSON",{stringify:function(t){if(void 0!==t&&!X(t)){for(var e,n,r=[t],o=1;arguments.length>o;)r.push(arguments[o++]);return e=r[1],"function"==typeof e&&(n=e),!n&&m(e)||(e=function(t,e){if(n&&(e=n.call(this,t,e)),!X(e))return e}),r[1]=e,D.apply($,r)}}}),T[C][H]||n(7)(T[C],H,T[C].valueOf),l(T,"Symbol"),l(Math,"Math",!0),l(r.JSON,"JSON",!0)},function(t,e,n){n(29)("asyncIterator")},function(t,e,n){n(29)("observable")},function(t,e,n){n(82);for(var r=n(1),o=n(7),i=n(20),u=n(8)("toStringTag"),a=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],c=0;c<5;c++){var s=a[c],f=r[s],l=f&&f.prototype;l&&!l[u]&&o(l,u,s),i[s]=i.Array}},function(t,e){},92,92,92,92,92,function(t,e){t.exports='<div class=grid-columns-wrapper> <table class=grid-columns> <colgroup></colgroup> <thead></thead> </table> </div> <div class=grid-body-wrapper> <table class=grid-body> <colgroup></colgroup> <tbody></tbody> </table> <div class="grid-no-data hidden"> 暂无数据 </div> </div>'},function(t,e){t.exports="<div class=grid-pager> <div>显示第 {{start}} - {{end}} 条数据, 共 {{total}} 条数据</div> <div> <span data-jump=first>首页</span> <span data-jump=prev>上一页</span> <span>第 <input type=text data-page value={{cur}}> 页, 共 {{totalPage}} 页</span> <span data-jump=next>下一页</span> <span data-jump=end>尾页</span> <span data-download>下载</span> </div> </div>"}]))}); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Datagrid=e():t.Datagrid=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}(function(t){for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e))switch(typeof t[e]){case"function":break;case"object":t[e]=function(e){var n=e.slice(1),o=t[e[0]];return function(t,e,r){o.apply(this,[t,e,r].concat(n))}}(t[e]);break;default:t[e]=t[t[e]]}return t}([function(t,e,n){t.exports=n(11),t.exports.Selection=n(15),t.exports.Paging=n(14),t.exports.Sorting=n(16),t.exports.ColumnMove=n(12),t.exports.ColumnFixed=n(13)},function(t,e){t.exports=function(t,e,n,o){return t.addEventListener(e,n,o),function(){t.removeEventListener(e,n,o)}}},function(t,e){t.exports=function(t,e,n){n||(n=document.body);var o=t.toUpperCase(),r=e,i=null;do if(r.tagName===o){i=r;break}while(r!==n&&(r=r.parentElement));return i}},function(t,e){},3,3,3,3,3,function(t,e){t.exports='<div class=grid-wrapper> <div class=grid-columns-wrapper> <table class=grid-columns> <colgroup></colgroup> <thead></thead> </table> </div> <div class=grid-body-wrapper> <table class=grid-body> <colgroup></colgroup> <tbody></tbody> </table> </div> </div> <div class="grid-no-data hidden"> <div class=no-data-content> 暂无数据 </div> </div> '},function(t,e){t.exports="<div class=grid-pager> <div>显示第 {{start}} - {{end}} 条数据, 共 {{total}} 条数据</div> <div> <span data-jump=first>首页</span> <span data-jump=prev>上一页</span> <span>第 <input type=text data-page value={{cur}}> 页, 共 {{totalPage}} 页</span> <span data-jump=next>下一页</span> <span data-jump=end>尾页</span> </div> </div> "},function(t,e,n){function o(t){return t.name}function r(t,e){return e[t.key]}function i(t,e){s.call(this);var n=this.el=document.createElement("div");this.options=u({},{height:t.offsetHeight},e),this.origin=t.parentElement.replaceChild(n,t),f.forEach(function(t){t(this)},this),this._init()}n(3);var a=n(9),s=n(17),c=n(1),u=n(19),d=n(2),l=n(18),p=100,f=[];i.use=function(t){t(i)},i.hook=function(t){return f.push(t),function(){var e=f.indexOf(t);e>=0&&f.splice(e,1)}};var h=i.prototype=Object.create(s.prototype);h.constructor=i,h._init=function(){var t=this._unbindEvents=[];this.emit("beforeInit");var e=this.el;e.classList.add("datagrid"),e.innerHTML=a;var n={$gridWrapper:".grid-wrapper",$columnsWrapper:".grid-columns-wrapper",$columns:".grid-columns",$columnsColGroup:".grid-columns colgroup",$columnsThead:".grid-columns thead",$bodyWrapper:".grid-body-wrapper",$body:".grid-body",$bodyColGroup:".grid-body colgroup",$bodyTbody:".grid-body tbody",$noData:".grid-no-data"};for(var o in n)n[o]=e.querySelector(n[o]);n.$gridWrapper.style.height=this.options.height+"px";var r=this;t.push(c(n.$bodyWrapper,"scroll",function(){n.$columns.style.left="-"+n.$bodyWrapper.scrollLeft+"px"}),c(n.$bodyWrapper,"mouseover",function(t){var e=d("tr",t.target);if(e){var n=e.getAttribute("data-index");n&&r.trHover(!0,Number(n))}}),c(n.$bodyWrapper,"mouseout",function(t){var e=d("tr",t.target);if(e){var n=e.getAttribute("data-index");n&&r.trHover(!1,Number(n))}})),this.ui=n,this.options.fit&&t.push(c(window,"resize",l(function(){r.setWidth()}))),this.emit("afterInit")},h.trHover=function(t,e,n){var o=this.ui.$bodyWrapper.querySelector("tbody"),r=o.querySelector('[data-index="'+e+'"]');r.classList[t?"add":"remove"]("hover"),n!==!1&&this.emit(t?"trHoverTo":"clearHover",e,r,this.rows&&this.rows[e])},h.setData=function(t){this.emit("beforeSetData",t),this.renderData={},this.setColumns(t.columns),this.setBody(t.rows),this.setWidth(t.width),this.emit("afterSetData",t)},h.normalizeWidth=function(t){var e=this.renderData,n=e.columnsDef;Array.isArray(t)||(t=[]);for(var o=[],r=0;r<n.length;r++)o[r]=t[r]||Math.max(15*n[r].name.length,p);return o},h.setWidth=function(t){var e=this.renderData;!t&&e.columnsMinWidth||(e.columnsMinWidth=this.normalizeWidth(t));var n,o=e.columnsMinWidth;if(this.options.fit){var r=o.reduce(function(t,e){return t+e}),i=this.ui.$bodyWrapper.clientWidth;if(r>=i)n=o;else{var a=(i-r)/e.columnsDef.length;n=o.map(function(t){return t+a})}}else n=o;e.columnsWidth=n;var s=this._colGroupsHTML(n);this._renderCols(s),this._resize(n)},h._colGroupsHTML=function(t){return t?t.map(function(t){return'<col style="width:'+t+'px">'}):[]},h._renderCols=function(t){var e=this.ui;e.$columnsColGroup.innerHTML=e.$bodyColGroup.innerHTML=t.join("")},h._resize=function(t){var e=this.ui,n=e.$columns,o=e.$noData,r=e.$body,i=t.reduce(function(t,e){return t+e});n.style.width=r.style.width=i+"px",this.empty?o.classList.remove("hidden"):o.classList.add("hidden")},h.setColumns=function(t){var e=this.renderData.columnsDef=this._normalize(t),n=this._columnsHTML(e);this.emit("beforeRenderColumns",n),this._renderColumns(n)},h._normalize=function(t){return t.map(function(t){var e="string"==typeof t?{name:t}:t;return e.key||(e.key=e.name),e})},h._columnsHTML=function(t){return t.map(function(t){return"<th>"+(t.th||o)(t)+"</th>"})},h._renderColumns=function(t){this.ui.$columnsThead.innerHTML=t.join("")},h.setBody=function(t){var e=this.renderData;this.empty=!t||!t.length,e.rows=t,this._renderBody(e.trsArr=this._bodyHTML(e.columnsDef,t))},h._bodyHTML=function(t,e){return this.empty?[]:e.map(function(e,n){var o='<tr data-index="'+n+'">';return t.forEach(function(t){o+="<td>"+(t.td||r)(t,e)+"</td>"}),o+="</tr>"})},h._renderBody=function(t){var e=this.ui,n=e.$body,o=e.$noData,r=e.$bodyTbody;return this.empty?(n.classList.add("hidden"),void o.classList.remove("hidden")):(r.innerHTML=t.join(""),n.classList.remove("hidden"),void o.classList.add("hidden"))},h.destroy=function(){this.emit("beforeDestroy"),this._unbindEvents.forEach(function(t){t()});var t=this.el;try{t.parentElement.replaceChild(this.origin,t)}catch(e){}this.emit("afterDestroy")},t.exports=i},function(t,e,n){n(4);var o=n(1),r=n(2),i=100,a=Array.prototype.indexOf,s="ontouchstart"in window,c=s?"touchstart":"mousedown",u=s?"touchmove":"mousemove",d=s?"touchend":"mouseup";t.exports=function(t){t.hook(function(t){if(t.options.columnResize){var e=document.createElement("div");e.classList.add("dragging-line");var n=[];t.once("afterInit",function(){t.ui.$draggingLine=e,t.el.appendChild(e)});var s,l,p,f,h,v,m=!1;n.push(t.on("beforeRenderColumns",function(t){t.forEach(function(e,n){t[n]=e.replace("</th>",'<span class="drag-lever"></span></th>')})}),o(t.el,c,function(n){if(n.target.classList.contains("drag-lever")&&0===n.button){var o=r("th",n.target,t.el);if(!o)return;o.classList.add("resizing"),l=o,v=-(o.clientWidth-i);var c=t.ui,u=c.$columnsWrapper,d=c.$bodyWrapper;e.style.height=u.offsetHeight+d.offsetHeight+"px",h=o.offsetLeft+o.clientWidth-d.scrollLeft,e.style.left=h+"px",e.classList.add("show"),m=!0,s=n.target,s.classList.add("dragging"),f=n.pageX,p=a.call(o.parentElement.children,o)}}),o(document,u,function(t){if(m){t.preventDefault();var n=t.pageX-f;n>v&&(e.style.left=h+(t.pageX-f)+"px")}}),o(document,d,function(n){if(m){setTimeout(function(){l.classList.remove("resizing")},0),e.classList.remove("show"),m=!1,s.classList.remove("dragging");var o=n.pageX-f;o<v&&(o=v);var r=t.renderData.columnsMinWidth;r[p]=r[p]+o,t.setWidth(r)}})),t.once("beforeDestroy",function(){n.forEach(function(t){t()})})}})}},function(t,e,n){n(5);var o=n(1);t.exports=function(t){t.hook(function(e){function n(){function n(t,n){var o=r.el.contains(n)?e:r;o.trHover(!0,t,!1)}function a(t,n){var o=r.el.contains(n)?e:r;o.trHover(!1,t,!1)}var s=document.createElement("div");s.classList.add("fixed-datagrid");var c=document.createElement("div");c.classList.add("hidden"),s.appendChild(c),e.el.appendChild(s),r=new t(c,{height:e.ui.$columnsWrapper.offsetHeight+e.ui.$bodyWrapper.offsetHeight,columnSorting:e.options.columnSorting,columnResize:e.options.columnResize,selection:e.options.selection});var u,d,l=!1,p=!1;i.push(o(e.ui.$bodyWrapper,"scroll",function(){p||(l=!0,u&&clearTimeout(u),u=setTimeout(function(){l=!1},250),r.ui.$bodyWrapper.scrollTop=this.scrollTop)}),o(r.ui.$bodyWrapper,"scroll",function(){l||(p=!0,d&&clearTimeout(d),d=setTimeout(function(){p=!1},250),e.ui.$bodyWrapper.scrollTop=this.scrollTop)})),i.push(e.on("trHoverTo",n),r.on("trHoverTo",n),e.on("clearHover",a),r.on("clearHover",a)),e.options.selection&&(e.on("selectedChanged",function(t){r.selectRow(t,!1)}),r.on("selectedChanged",function(t){e.selectRow(t)}))}if(e.options.fixedColumns){var r,i=[];e.on("afterSetData",function(t){var o=t.fixedColumnsLeft;return o?(r||n(e.el),r.el.classList.remove("hidden"),void r.setData({columns:e.renderData.columnsDef.slice(0,o),width:e.renderData.columnsWidth.slice(0,o),rows:e.renderData.rows})):void(r&&r.el.classList.add("hidden"))}),e.once("beforeDestroy",function(){i.forEach(function(t){t()})})}})}},function(t,e,n){n(6);var o=n(10),r=n(1);t.exports=function(t){t.hook(function(t){function e(e){return Number.isNaN(e)||e<1||e>i.totalPage?void(s.querySelector("[data-page]").value=i.cur):(s.querySelector("[data-page]").value=i.cur=e,void t.emit("switchPage",e))}if(t.options.pagination){var n=t.options.pagingTemplate||o,i=t.pager={cur:1,total:null,size:null,start:null,end:null,totalPage:null},a=[],s=document.createElement("div");s.classList.add("grid-pager-wrapper"),a.push(r(s,"click",function(t){var n=t.target.dataset.jump;if(n){var o;switch(n){case"first":o=1;break;case"end":o=i.totalPage;break;case"prev":o=i.cur-1;break;case"next":o=i.cur+1;break;default:return}e(o)}}),r(s,"keydown",function(t){13===t.keyCode&&void 0!==t.target.dataset.page&&e(Number(t.target.value))}),t.on("beforeSetData",function(t){if(!t.rows||!t.rows.length)return void s.classList.add("hidden");var e=t.size||0,o=t.total||0,r=i.cur,a=t.rows.length;i.total=o,i.size=e,i.start=(r-1)*e+1,i.end=i.start+a-1,i.total=o,i.totalPage=Math.ceil(o/e)||0,s.innerHTML=n.replace(/\{\{(\w+)\}\}/g,function(t,e){return i.hasOwnProperty(e)?i[e]:t}),s.classList.remove("hidden")})),t.once("afterInit",function(){t.ui.$gridWrapper.appendChild(s),t.ui.$pagerWrapper=s}),t.once("beforeDestroy",function(){a.forEach(function(t){t()})})}})}},function(t,e,n){n(7);var o=n(2),r=n(1);t.exports=function(t){t.prototype.selectRow=function(t,e){var n=this.ui.$body,o=n.querySelector('tr[data-index="'+t+'"]');if(o){var r=n.querySelector("tr.selected");r&&r.classList.remove("selected"),o.classList.add("selected"),this._selectRowIndex=t,e!==!1&&this.emit("selectedChanged",t)}},t.hook(function(t){if(t.options.selection){var e=[];e.push(t.on("beforeSetData",function(){t._selectRowIndex=null})),t.once("afterInit",function(){var n=t.ui.$body;e.push(r(n,"click",function(e){var r=o("tr",e.target,n);if(r){var i=Number(r.dataset.index);Number.isNaN(i)||t._selectRowIndex===i||t.selectRow(i)}}))}),t.once("beforeDestroy",function(){e.forEach(function(t){t()})})}})}},function(t,e,n){n(8);var o=n(2),r=n(1),i=Array.prototype.indexOf,a=-1,s=1,c=0,u="order-by-asc",d="order-by-desc";t.exports=function(t){t.hook(function(t){function e(){if("number"==typeof n){var e=t.ui.$columnsWrapper.querySelector("th:nth-child("+(n+1)+")");e&&e.classList.remove(u,d)}}if(t.options.columnSorting){var n,l=[],p=c;l.push(t.on("beforeRenderColumns",function(t){t.forEach(function(e,n){t[n]=e.replace("</th>",'<span class="order-ico"></span></th>')})})),t.once("afterInit",function(){var f=t.ui.$columnsWrapper;l.push(r(f,"click",function(r){var l=o("th",r.target,f);if(l&&!l.classList.contains("resizing")){var h=i.call(l.parentElement.children,l),v=t.renderData.columnsDef[h];if(v.sortable!==!1){switch(h!==n&&(e(),n=h,p=c),l.classList.remove(u,d),p){case c:p=s,l.classList.add(u);break;case s:p=a,l.classList.add(d);break;case a:p=c}t.emit("sort",v,p,l)}}}))}),t.once("beforeDestroy",function(){l.forEach(function(t){t()})})}})}},function(t,e){function n(){this._callbacks={}}var o=Array.prototype.slice,r=n.prototype;r.on=function(t,e){var n=this._callbacks,o=n[t]||(n[t]=[]);return o.push(e),function(){var t=o.indexOf(e);t>=0&&o.splice(t,1)}},r.once=function(t,e){var n=this.on(t,function(){e.apply(null,arguments),window.setTimeout(n,0)});return n},r.emit=function(t){var e=this._callbacks[t];if(e&&e.length){var n=o.call(arguments,1);e.forEach(function(t){t.apply(null,n)})}},t.exports=n},function(t,e){t.exports=function(t,e){var n;return e="number"==typeof e?e:250,function(){"number"==typeof n&&window.clearTimeout(n);var o=arguments;n=window.setTimeout(function(){t.apply(null,o)},e)}}},function(t,e){var n=Object.prototype.hasOwnProperty;t.exports=function(t){for(var e=1;e<arguments.length;e+=1){var o=arguments[e];if(o&&"object"==typeof o)for(var r in o)n.call(o,r)&&(t[r]=o[r])}return t}}]))}); |
| { | ||
| "name": "datagrid", | ||
| "version": "0.0.1", | ||
| "version": "0.1.0", | ||
| "description": "Datagrid.", | ||
@@ -18,2 +18,3 @@ "main": "./src/index.js", | ||
| "scripts": { | ||
| "prepublish": "npm run build", | ||
| "start": "webpack-dev-server --inline --config build/webpack.dev.server.config.js", | ||
@@ -26,14 +27,8 @@ "build": "webpack --config build/webpack.dev.config.js && webpack --config build/webpack.build.config.js", | ||
| "devDependencies": { | ||
| "fs-extra": "0.30.0", | ||
| "openpack": "1.0.0", | ||
| "babel-core": "6.14.0", | ||
| "babel-plugin-transform-runtime": "6.15.0", | ||
| "babel-preset-es2015": "6.14.0", | ||
| "babel-loader": "6.2.5", | ||
| "file-loader": "0.9.0", | ||
| "postcss-loader": "0.13.0", | ||
| "autoprefixer": "6.4.1", | ||
| "html-loader": "0.4.3", | ||
| "node-sass": "3.9.3", | ||
| "html-loader": "0.4.4", | ||
| "node-sass": "3.10.0", | ||
| "sass-loader": "4.0.2", | ||
@@ -44,7 +39,7 @@ "css-loader": "0.25.0", | ||
| "extract-text-webpack-plugin": "1.0.1", | ||
| "webpack-dev-server": "1.15.1", | ||
| "webpack-dev-server": "1.16.1", | ||
| "webpack": "1.13.2", | ||
| "eslint": "3.4.0", | ||
| "eslint-plugin-html": "1.5.2", | ||
| "eslint-config-standard": "6.0.0", | ||
| "eslint": "3.6.0", | ||
| "eslint-plugin-html": "1.5.3", | ||
| "eslint-config-standard": "6.0.1", | ||
| "eslint-plugin-promise": "2.0.1", | ||
@@ -51,0 +46,0 @@ "eslint-plugin-standard": "2.0.0" |
@@ -1,6 +0,11 @@ | ||
| import './index.scss' | ||
| import containerTemplate from './template.html' | ||
| import Event from '../utils/Event' | ||
| import addEvent from '../utils/addEvent' | ||
| require('./index.scss') | ||
| var containerTemplate = require('./template.html') | ||
| var Event = require('../utils/Event') | ||
| var addEvent = require('../utils/addEvent') | ||
| var extend = require('../utils/extend') | ||
| var findParent = require('../utils/findParent') | ||
| var debounce = require('../utils/debounce') | ||
| var DefaultWidth = 100 | ||
| function defaultColumnRender (columnDef) { | ||
@@ -14,258 +19,358 @@ return columnDef.name | ||
| const hooks = [] | ||
| var hooks = [] | ||
| class DataGrid extends Event { | ||
| /** | ||
| * 保存插件 | ||
| * @param {Function} plugin | ||
| */ | ||
| static use (plugin) { | ||
| if (process.env.NODE_ENV === 'development') { | ||
| if (typeof plugin !== 'function') { | ||
| throw new TypeError('.use(plugin) 参数类型错误: plugin 必需是一个函数。') | ||
| } | ||
| if (plugin._installed) return | ||
| plugin._installed = true | ||
| /** | ||
| * 构造函数 | ||
| * @param {HTMLElement} ele | ||
| * @param {Object} [options] | ||
| */ | ||
| function DataGrid (ele, options) { | ||
| Event.call(this) | ||
| var el = this.el = document.createElement('div') | ||
| this.options = extend({}, { | ||
| height: ele.offsetHeight // 表格的总高度 | ||
| }, options) | ||
| if (process.env.NODE_ENV === 'development') { | ||
| if (!ele.parentElement) { | ||
| throw new Error('Element must have a parentElement') | ||
| } | ||
| plugin(DataGrid) | ||
| } | ||
| /** | ||
| * 每次创建新的实例时都会触发这个函数 | ||
| * @param {Function} fn | ||
| * @return {function()} | ||
| */ | ||
| static hook (fn) { | ||
| hooks.push(fn) | ||
| return () => { | ||
| const i = hooks.indexOf(fn) | ||
| if (i >= 0) hooks.splice(i, 1) | ||
| // 从 document 里删除原本的节点并保存下来，供实例销毁之后重新显示出来 | ||
| this.origin = ele.parentElement.replaceChild(el, ele) | ||
| hooks.forEach(function (fn) { fn(this) }, this) | ||
| this._init() | ||
| } | ||
| /** | ||
| * 保存插件 | ||
| * @param {Function} plugin | ||
| */ | ||
| DataGrid.use = function (plugin) { | ||
| if (process.env.NODE_ENV === 'development') { | ||
| if (typeof plugin !== 'function') { | ||
| throw new TypeError('.use(plugin) 参数类型错误: plugin 必需是一个函数。') | ||
| } | ||
| if (plugin._installed) return | ||
| plugin._installed = true | ||
| } | ||
| plugin(DataGrid) | ||
| } | ||
| /** | ||
| * 构造函数 | ||
| * @param {HTMLElement} ele | ||
| * @param {Object} [options] | ||
| */ | ||
| constructor (ele, options) { | ||
| super() | ||
| this.el = ele | ||
| this.options = Object.assign({}, { | ||
| height: ele.clientHeight // 表格的总高度 | ||
| }, options) | ||
| hooks.forEach(fn => fn(this)) | ||
| this._init() | ||
| /** | ||
| * 每次创建新的实例时都会触发这个函数 | ||
| * @param {Function} fn | ||
| * @return {function()} | ||
| */ | ||
| DataGrid.hook = function (fn) { | ||
| hooks.push(fn) | ||
| return function () { | ||
| var i = hooks.indexOf(fn) | ||
| if (i >= 0) hooks.splice(i, 1) | ||
| } | ||
| } | ||
| _init () { | ||
| const _unbindEvents = this._unbindEvents = [] | ||
| this.emit('beforeInit') | ||
| const { el } = this | ||
| el.classList.add('datagrid') | ||
| el.innerHTML = containerTemplate | ||
| var dp = DataGrid.prototype = Object.create(Event.prototype) | ||
| dp.constructor = DataGrid | ||
| const ui = { | ||
| $columnsWrapper: '.grid-columns-wrapper', | ||
| $columns: '.grid-columns', | ||
| $columnsColGroup: '.grid-columns colgroup', | ||
| $columnsThead: '.grid-columns thead', | ||
| $bodyWrapper: '.grid-body-wrapper', | ||
| $body: '.grid-body', | ||
| $bodyColGroup: '.grid-body colgroup', | ||
| $bodyTbody: '.grid-body tbody', | ||
| $noData: '.grid-no-data' | ||
| } | ||
| dp._init = function () { | ||
| var _unbindEvents = this._unbindEvents = [] | ||
| this.emit('beforeInit') | ||
| var el = this.el | ||
| el.classList.add('datagrid') | ||
| el.innerHTML = containerTemplate | ||
| for (let key in ui) { | ||
| ui[key] = el.querySelector(ui[key]) | ||
| } | ||
| var ui = { | ||
| $gridWrapper: '.grid-wrapper', | ||
| $columnsWrapper: '.grid-columns-wrapper', | ||
| $columns: '.grid-columns', | ||
| $columnsColGroup: '.grid-columns colgroup', | ||
| $columnsThead: '.grid-columns thead', | ||
| $bodyWrapper: '.grid-body-wrapper', | ||
| $body: '.grid-body', | ||
| $bodyColGroup: '.grid-body colgroup', | ||
| $bodyTbody: '.grid-body tbody', | ||
| $noData: '.grid-no-data' | ||
| } | ||
| for (var key in ui) { | ||
| ui[key] = el.querySelector(ui[key]) | ||
| } | ||
| ui.$gridWrapper.style.height = this.options.height + 'px' | ||
| var that = this | ||
| _unbindEvents.push( | ||
| // body 横向滚动时, 也要调整 columns 的左边距 | ||
| addEvent(ui.$bodyWrapper, 'scroll', function () { | ||
| ui.$columns.style.left = '-' + ui.$bodyWrapper.scrollLeft + 'px' | ||
| }), | ||
| addEvent(ui.$bodyWrapper, 'mouseover', function (e) { | ||
| var tr = findParent('tr', e.target) | ||
| if (!tr) return | ||
| var trIndex = tr.getAttribute('data-index') | ||
| if (trIndex) { | ||
| that.trHover(true, Number(trIndex)) | ||
| } | ||
| }), | ||
| addEvent(ui.$bodyWrapper, 'mouseout', function (e) { | ||
| var tr = findParent('tr', e.target) | ||
| if (!tr) return | ||
| var trIndex = tr.getAttribute('data-index') | ||
| if (trIndex) { | ||
| that.trHover(false, Number(trIndex)) | ||
| } | ||
| }) | ||
| ) | ||
| this.ui = ui | ||
| if (this.options.fit) { | ||
| _unbindEvents.push( | ||
| // body 横向滚动时, 也要调整 columns 的左边距 | ||
| addEvent(ui.$bodyWrapper, 'scroll', () => { | ||
| ui.$columns.style.left = '-' + ui.$bodyWrapper.scrollLeft + 'px' | ||
| }) | ||
| addEvent(window, 'resize', debounce(function () { | ||
| that.setWidth() | ||
| })) | ||
| ) | ||
| this.ui = ui | ||
| this.emit('afterInit') | ||
| } | ||
| /** | ||
| * 给表格填充数据 | ||
| * @param data | ||
| * @param {String[]|Object[]} data.columns - 表格的字段定义 | ||
| * @param {Object[]} data.rows - 数据 | ||
| * @param {Number[]} data.width - 每个字段对应的宽度 | ||
| */ | ||
| setData (data) { | ||
| this.emit('beforeSetData', data) | ||
| this.renderData = {} | ||
| this.setColumns(data.columns) | ||
| this.setBody(data.rows) | ||
| this.setWidth(data.width) | ||
| this.emit('afterSetData', data) | ||
| } | ||
| this.emit('afterInit') | ||
| } | ||
| setWidth (widthArr) { | ||
| if (widthArr) { | ||
| this.renderData.columnsWidth = widthArr | ||
| } else { | ||
| widthArr = this.renderData.columnsWidth | ||
| } | ||
| const cols = this._colGroupsHTML(widthArr) | ||
| this._renderCols(cols) | ||
| this._resize(widthArr) | ||
| } | ||
| /** | ||
| * 处理 tr 元素的 hover 状态 | ||
| * @param {Boolean} inOrOut - 此元素需要添加（true）还是移除（false） hover 状态 | ||
| * @param {Number} index - 元素的 index | ||
| * @param {Boolean} emit - 设为 false 则不触发相关事件 | ||
| */ | ||
| dp.trHover = function (inOrOut, index, emit) { | ||
| var tbody = this.ui.$bodyWrapper.querySelector('tbody') | ||
| var hoverToTR = tbody.querySelector('[data-index="' + index + '"]') | ||
| hoverToTR.classList[inOrOut ? 'add' : 'remove']('hover') | ||
| if (emit !== false) this.emit(inOrOut ? 'trHoverTo' : 'clearHover', index, hoverToTR, this.rows && this.rows[index]) | ||
| } | ||
| /** | ||
| * 计算出表格的 col 元素的 HTML | ||
| * @param {Number[]} columnsWidth - 定义字段宽度的数组 | ||
| * @private | ||
| * @return {String[]} | ||
| */ | ||
| _colGroupsHTML (columnsWidth) { | ||
| return columnsWidth ? columnsWidth.map(width => `<col style="width:${width}px">`) : [] | ||
| /** | ||
| * 给表格填充数据 | ||
| * @param data | ||
| * @param {String[]|Object[]} data.columns - 表格的字段定义 | ||
| * @param {Object[]} data.rows - 数据 | ||
| * @param {Number[]} data.width - 每个字段对应的宽度 | ||
| */ | ||
| dp.setData = function (data) { | ||
| this.emit('beforeSetData', data) | ||
| this.renderData = {} | ||
| this.setColumns(data.columns) | ||
| this.setBody(data.rows) | ||
| this.setWidth(data.width) | ||
| this.emit('afterSetData', data) | ||
| } | ||
| /** | ||
| * 根据用户给的宽度数组计算出实际需要用到的最小宽度数组， | ||
| * 因为用户可能不传宽度数组，或者宽度数组的长度比字段数组长或短， | ||
| * 所以要处理一遍 | ||
| * @param {Array} [widthArr] | ||
| * @return {Array} | ||
| */ | ||
| dp.normalizeWidth = function (widthArr) { | ||
| var renderData = this.renderData | ||
| var columnsDef = renderData.columnsDef | ||
| if (!Array.isArray(widthArr)) widthArr = [] | ||
| var result = [] | ||
| for (var i = 0; i < columnsDef.length; i++) { | ||
| result[i] = widthArr[i] || Math.max(columnsDef[i].name.length * 15, DefaultWidth) | ||
| } | ||
| return result | ||
| } | ||
| /** | ||
| * 填充 colsHTML | ||
| * @param {String[]} colsHTML | ||
| * @private | ||
| */ | ||
| _renderCols (colsHTML) { | ||
| const { ui } = this | ||
| ui.$columnsColGroup.innerHTML = ui.$bodyColGroup.innerHTML = colsHTML.join('') | ||
| /** | ||
| * 设置宽度。 | ||
| * 默认情况下，用户设置的宽度会成为最终字段的宽度， | ||
| * 但如果 fit 设置为 true，则将用户传进来的宽度视为"最小宽度"， | ||
| * 如果这些最小宽度加起来大于 wrapper 的宽度，则直接使用最小宽度作为 td 的宽度； | ||
| * 如果加起来小于 wrapper 的宽度，则用 wrapper 宽度减去最小宽度的差值，除以字段的个数得到平均值，再给每个最小宽度加上这个平均值作为字段的真正宽度 | ||
| * @param {Number[]} [customWidth] | ||
| */ | ||
| dp.setWidth = function (customWidth) { | ||
| var renderData = this.renderData | ||
| if (customWidth || !renderData.columnsMinWidth) { | ||
| renderData.columnsMinWidth = this.normalizeWidth(customWidth) | ||
| } | ||
| /** | ||
| * 调整各种尺寸 | ||
| * @param {Number[]} columnsWidth | ||
| * @private | ||
| */ | ||
| _resize (columnsWidth) { | ||
| const { $columns, $bodyWrapper, $noData, $body } = this.ui | ||
| const _totalWidth = columnsWidth ? columnsWidth.reduce((prev, width) => prev + width) : this.el.clientWidth | ||
| $columns.style.width = _totalWidth + 'px' // 总长度需要先设定, 因为它会影响 columnsWrapper.clientHeight | ||
| const totalHeight = this.options.height | ||
| const columnsHeight = this.ui.$columnsWrapper.clientHeight | ||
| const bodyHeight = totalHeight - columnsHeight | ||
| const obj = { | ||
| totalHeight, | ||
| bodyHeight | ||
| } | ||
| this.emit('beforeSetSize', obj) | ||
| $bodyWrapper.style.height = obj.bodyHeight + 'px' | ||
| if (this.empty) { | ||
| $noData.style.height = obj.bodyHeight + 'px' | ||
| $noData.style.lineHeight = obj.bodyHeight + 'px' | ||
| var columnsMinWidth = renderData.columnsMinWidth | ||
| var columnsWidth | ||
| if (this.options.fit) { | ||
| var sum = columnsMinWidth.reduce(function (w1, w2) { | ||
| return w1 + w2 | ||
| }) | ||
| var bodyWrapperWidth = this.ui.$bodyWrapper.clientWidth | ||
| if (sum >= bodyWrapperWidth) { | ||
| columnsWidth = columnsMinWidth | ||
| } else { | ||
| $body.style.width = _totalWidth + 'px' | ||
| var diff = (bodyWrapperWidth - sum) / renderData.columnsDef.length | ||
| columnsWidth = columnsMinWidth.map(function (w) { | ||
| return w + diff | ||
| }) | ||
| } | ||
| } else { | ||
| columnsWidth = columnsMinWidth | ||
| } | ||
| renderData.columnsWidth = columnsWidth | ||
| var cols = this._colGroupsHTML(columnsWidth) | ||
| this._renderCols(cols) | ||
| this._resize(columnsWidth) | ||
| } | ||
| /** | ||
| * 渲染表头的方法 | ||
| * @param {String[]|Object[]} columns | ||
| * @private | ||
| */ | ||
| setColumns (columns) { | ||
| const columnsDef = this.renderData.columnsDef = this._normalize(columns) | ||
| const columnsHTML = this._columnsHTML(columnsDef) | ||
| this.emit('beforeRenderColumns', columnsHTML) | ||
| this._renderColumns(columnsHTML) | ||
| } | ||
| /** | ||
| * 计算出表格的 col 元素的 HTML | ||
| * @param {Number[]} columnsWidth - 定义字段宽度的数组 | ||
| * @private | ||
| * @return {String[]} | ||
| */ | ||
| dp._colGroupsHTML = function (columnsWidth) { | ||
| return columnsWidth ? columnsWidth.map(function (width) { return '<col style="width:' + width + 'px">' }) : [] | ||
| } | ||
| /** | ||
| * 调整字段定义, 并根据字段定义计算出每个字段的宽度数组 | ||
| * @param columns | ||
| * @private | ||
| */ | ||
| _normalize (columns) { | ||
| return columns.map(columnDef => { | ||
| const _def = typeof columnDef === 'string' | ||
| ? { name: columnDef } | ||
| : columnDef | ||
| /** | ||
| * 填充 colsHTML | ||
| * @param {String[]} colsHTML | ||
| * @private | ||
| */ | ||
| dp._renderCols = function (colsHTML) { | ||
| var ui = this.ui | ||
| ui.$columnsColGroup.innerHTML = ui.$bodyColGroup.innerHTML = colsHTML.join('') | ||
| } | ||
| if (!_def.key) _def.key = _def.name | ||
| return _def | ||
| }) | ||
| /** | ||
| * 调整各种尺寸 | ||
| * @param {Number[]} columnsWidth | ||
| * @private | ||
| */ | ||
| dp._resize = function (columnsWidth) { | ||
| var ui = this.ui | ||
| var $columns = ui.$columns | ||
| var $noData = ui.$noData | ||
| var $body = ui.$body | ||
| var _totalWidth = columnsWidth.reduce(function (prev, width) { return prev + width }) | ||
| $columns.style.width = $body.style.width = _totalWidth + 'px' | ||
| if (this.empty) { | ||
| $noData.classList.remove('hidden') | ||
| } else { | ||
| $noData.classList.add('hidden') | ||
| } | ||
| } | ||
| /** | ||
| * 计算出渲染表头字段的 HTML | ||
| * @private | ||
| */ | ||
| _columnsHTML (columnsDef) { | ||
| return columnsDef.map(columnDef => { | ||
| return '<th>' + (columnDef.th || defaultColumnRender)(columnDef) + '</th>' | ||
| }) | ||
| } | ||
| /** | ||
| * 渲染表头的方法 | ||
| * @param {String[]|Object[]} columns | ||
| * @private | ||
| */ | ||
| dp.setColumns = function (columns) { | ||
| var columnsDef = this.renderData.columnsDef = this._normalize(columns) | ||
| var columnsHTML = this._columnsHTML(columnsDef) | ||
| this.emit('beforeRenderColumns', columnsHTML) | ||
| this._renderColumns(columnsHTML) | ||
| } | ||
| /** | ||
| * 渲染表头 | ||
| * @param {String[]} columnsHTML | ||
| * @private | ||
| */ | ||
| _renderColumns (columnsHTML) { | ||
| this.ui.$columnsThead.innerHTML = columnsHTML.join('') | ||
| } | ||
| /** | ||
| * 调整字段定义, 并根据字段定义计算出每个字段的宽度数组 | ||
| * @param columns | ||
| * @private | ||
| */ | ||
| dp._normalize = function (columns) { | ||
| return columns.map(function (columnDef) { | ||
| var _def = typeof columnDef === 'string' | ||
| ? { name: columnDef } | ||
| : columnDef | ||
| /** | ||
| * 渲染表格的方法 | ||
| * @param {Object[]} rows | ||
| */ | ||
| setBody (rows) { | ||
| const { renderData } = this | ||
| this.empty = !rows || !rows.length | ||
| renderData.rows = rows | ||
| renderData.trsArr = this._bodyHTML(renderData.columnsDef, rows) | ||
| this._renderBody(renderData.trsArr) | ||
| } | ||
| if (!_def.key) _def.key = _def.name | ||
| return _def | ||
| }) | ||
| } | ||
| /** | ||
| * 计算出渲染 body 需要的数据 | ||
| * @private | ||
| */ | ||
| _bodyHTML (columnsDef, rows) { | ||
| return this.empty ? [] : rows.map((row, index) => { | ||
| let rowHTML = `<tr data-index="${index}">` | ||
| columnsDef.forEach(columnDef => { | ||
| rowHTML += '<td>' + (columnDef.td || defaultDataRender)(columnDef, row) + '</td>' | ||
| }) | ||
| rowHTML += '</tr>' | ||
| return rowHTML | ||
| /** | ||
| * 计算出渲染表头字段的 HTML | ||
| * @private | ||
| */ | ||
| dp._columnsHTML = function (columnsDef) { | ||
| return columnsDef.map(function (columnDef) { | ||
| return '<th>' + (columnDef.th || defaultColumnRender)(columnDef) + '</th>' | ||
| }) | ||
| } | ||
| /** | ||
| * 渲染表头 | ||
| * @param {String[]} columnsHTML | ||
| * @private | ||
| */ | ||
| dp._renderColumns = function (columnsHTML) { | ||
| this.ui.$columnsThead.innerHTML = columnsHTML.join('') | ||
| } | ||
| /** | ||
| * 渲染表格的方法 | ||
| * @param {Object[]} rows | ||
| */ | ||
| dp.setBody = function (rows) { | ||
| var renderData = this.renderData | ||
| this.empty = !rows || !rows.length | ||
| renderData.rows = rows | ||
| this._renderBody(renderData.trsArr = this._bodyHTML(renderData.columnsDef, rows)) | ||
| } | ||
| /** | ||
| * 计算出渲染 body 需要的数据 | ||
| * @private | ||
| */ | ||
| dp._bodyHTML = function (columnsDef, rows) { | ||
| return this.empty ? [] : rows.map(function (row, index) { | ||
| var rowHTML = '<tr data-index="' + index + '">' | ||
| columnsDef.forEach(function (columnDef) { | ||
| rowHTML += '<td>' + (columnDef.td || defaultDataRender)(columnDef, row) + '</td>' | ||
| }) | ||
| } | ||
| rowHTML += '</tr>' | ||
| return rowHTML | ||
| }) | ||
| } | ||
| /** | ||
| * 渲染数据 | ||
| * @param {String[]} trsArr | ||
| * @private | ||
| */ | ||
| _renderBody (trsArr) { | ||
| const { $body, $noData, $bodyTbody } = this.ui | ||
| if (this.empty) { | ||
| $body.classList.add('hidden') | ||
| $noData.classList.remove('hidden') | ||
| return | ||
| } | ||
| $bodyTbody.innerHTML = trsArr.join('') | ||
| $body.classList.remove('hidden') | ||
| $noData.classList.add('hidden') | ||
| /** | ||
| * 渲染数据 | ||
| * @param {String[]} trsArr | ||
| * @private | ||
| */ | ||
| dp._renderBody = function (trsArr) { | ||
| var ui = this.ui | ||
| var $body = ui.$body | ||
| var $noData = ui.$noData | ||
| var $bodyTbody = ui.$bodyTbody | ||
| if (this.empty) { | ||
| $body.classList.add('hidden') | ||
| $noData.classList.remove('hidden') | ||
| return | ||
| } | ||
| $bodyTbody.innerHTML = trsArr.join('') | ||
| $body.classList.remove('hidden') | ||
| $noData.classList.add('hidden') | ||
| } | ||
| /** | ||
| * 销毁实例。 | ||
| * @param {Boolean} remove - 如果为 true, 则会移除根节点 | ||
| */ | ||
| destroy (remove) { | ||
| this.emit('beforeDestroy') | ||
| this._unbindEvents.forEach(unbind => unbind()) | ||
| if (remove) this.el.remove() | ||
| this.emit('afterDestroy') | ||
| } | ||
| /** | ||
| * 销毁实例 | ||
| */ | ||
| dp.destroy = function () { | ||
| this.emit('beforeDestroy') | ||
| this._unbindEvents.forEach(function (unbind) { unbind() }) | ||
| // 还原原本的 dom 节点 | ||
| var el = this.el | ||
| try { | ||
| el.parentElement.replaceChild(this.origin, el) | ||
| } catch (e) {} | ||
| this.emit('afterDestroy') | ||
| } | ||
| export default DataGrid | ||
| module.exports = DataGrid |
@@ -1,15 +0,6 @@ | ||
| import DataGrid from './DataGrid/index' | ||
| import Selection from './plugins/selection' | ||
| import Pager from './plugins/pager' | ||
| import Sorter from './plugins/sort' | ||
| import Drag from './plugins/drag' | ||
| import Fixed from './plugins/fixed' | ||
| DataGrid.use(Selection) | ||
| DataGrid.use(Pager) | ||
| DataGrid.use(Sorter) | ||
| DataGrid.use(Drag) | ||
| DataGrid.use(Fixed) | ||
| export default DataGrid | ||
| module.exports = require('./DataGrid/index') | ||
| module.exports.Selection = require('./plugins/selection') | ||
| module.exports.Paging = require('./plugins/pager') | ||
| module.exports.Sorting = require('./plugins/sort') | ||
| module.exports.ColumnMove = require('./plugins/drag') | ||
| module.exports.ColumnFixed = require('./plugins/fixed') |
@@ -1,26 +0,26 @@ | ||
| import './index.scss' | ||
| import addEvent from '../../utils/addEvent' | ||
| import findParent from '../../utils/findParent' | ||
| require('./index.scss') | ||
| var addEvent = require('../../utils/addEvent') | ||
| var findParent = require('../../utils/findParent') | ||
| const MIN_WIDTH = 100 // 表格的最小宽度 | ||
| var MIN_WIDTH = 100 // 表格的最小宽度 | ||
| const { indexOf } = Array.prototype | ||
| var indexOf = Array.prototype.indexOf | ||
| const IS_TOUCH = 'ontouchstart' in window | ||
| const MOUSEDOWN = IS_TOUCH ? 'touchstart' : 'mousedown' | ||
| const MOUSEMOVE = IS_TOUCH ? 'touchmove' : 'mousemove' | ||
| const MOUSEUP = IS_TOUCH ? 'touchend' : 'mouseup' | ||
| var IS_TOUCH = 'ontouchstart' in window | ||
| var MOUSEDOWN = IS_TOUCH ? 'touchstart' : 'mousedown' | ||
| var MOUSEMOVE = IS_TOUCH ? 'touchmove' : 'mousemove' | ||
| var MOUSEUP = IS_TOUCH ? 'touchend' : 'mouseup' | ||
| export default function (DataGrid) { | ||
| DataGrid.hook(datagrid => { | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.columnResize) return | ||
| // 拖动时显示的虚线 | ||
| const dragLine = document.createElement('div') | ||
| var dragLine = document.createElement('div') | ||
| dragLine.classList.add('dragging-line') | ||
| const unbindEvents = [] | ||
| var unbindEvents = [] | ||
| // 注入虚线 | ||
| datagrid.once('afterInit', () => { | ||
| datagrid.once('afterInit', function () { | ||
| datagrid.ui.$draggingLine = dragLine | ||
@@ -30,20 +30,20 @@ datagrid.el.appendChild(dragLine) | ||
| let dragging = false // 是否正在拖动中 | ||
| let draggingLever // 被拖动的那个小方块 | ||
| let draggingTH // 被拖动的 th 元素 | ||
| let draggingColumnIndex // 被拖动的元素是第几个字段 | ||
| let startX // 拖动开始时的 pageX 值 | ||
| let draggingLineInitLeft // 拖动开始时虚线的左编剧 | ||
| let minLeft // 当往左边拖动时能拖动的最大距离 | ||
| var dragging = false // 是否正在拖动中 | ||
| var draggingLever // 被拖动的那个小方块 | ||
| var draggingTH // 被拖动的 th 元素 | ||
| var draggingColumnIndex // 被拖动的元素是第几个字段 | ||
| var startX // 拖动开始时的 pageX 值 | ||
| var draggingLineInitLeft // 拖动开始时虚线的左编剧 | ||
| var minLeft // 当往左边拖动时能拖动的最大距离 | ||
| unbindEvents.push( | ||
| // 注入供用户拖拽的小方块 | ||
| datagrid.on('beforeRenderColumns', columnsHTMLArr => { | ||
| columnsHTMLArr.forEach((html, index) => { | ||
| datagrid.on('beforeRenderColumns', function (columnsHTMLArr) { | ||
| columnsHTMLArr.forEach(function (html, index) { | ||
| columnsHTMLArr[index] = html.replace('</th>', '<span class="drag-lever"></span></th>') | ||
| }) | ||
| }), | ||
| addEvent(datagrid.el, MOUSEDOWN, e => { | ||
| addEvent(datagrid.el, MOUSEDOWN, function (e) { | ||
| if (e.target.classList.contains('drag-lever') && e.button === 0) { | ||
| const th = findParent('th', e.target, datagrid.el) | ||
| var th = findParent('th', e.target, datagrid.el) | ||
| if (!th) return | ||
@@ -58,6 +58,8 @@ | ||
| const { $columnsWrapper, $bodyWrapper } = datagrid.ui | ||
| var ui = datagrid.ui | ||
| var $columnsWrapper = ui.$columnsWrapper | ||
| var $bodyWrapper = ui.$bodyWrapper | ||
| // 显示虚线 | ||
| dragLine.style.height = $columnsWrapper.clientHeight + $bodyWrapper.clientHeight + 'px' | ||
| dragLine.style.height = $columnsWrapper.offsetHeight + $bodyWrapper.offsetHeight + 'px' | ||
| draggingLineInitLeft = th.offsetLeft + th.clientWidth - $bodyWrapper.scrollLeft | ||
@@ -74,7 +76,7 @@ dragLine.style.left = draggingLineInitLeft + 'px' | ||
| }), | ||
| addEvent(document, MOUSEMOVE, e => { | ||
| addEvent(document, MOUSEMOVE, function (e) { | ||
| if (!dragging) return | ||
| e.preventDefault() // 阻止在 PC 端拖动鼠标时选中文字或在移动端滑动屏幕 | ||
| // 调整虚线的 left 值 | ||
| const moved = e.pageX - startX | ||
| var moved = e.pageX - startX | ||
| if (moved > minLeft) { | ||
@@ -84,21 +86,21 @@ dragLine.style.left = draggingLineInitLeft + (e.pageX - startX) + 'px' | ||
| }), | ||
| addEvent(document, MOUSEUP, e => { | ||
| addEvent(document, MOUSEUP, function (e) { | ||
| if (!dragging) return | ||
| // 等 ../sort/index.js 里的 click 事件处理完后再移除这个 CSS 类 | ||
| setTimeout(() => draggingTH.classList.remove('resizing'), 0) | ||
| setTimeout(function () { draggingTH.classList.remove('resizing') }, 0) | ||
| dragLine.classList.remove('show') | ||
| dragging = false | ||
| draggingLever.classList.remove('dragging') | ||
| let moved = e.pageX - startX // 计算移动的距离 | ||
| var moved = e.pageX - startX // 计算移动的距离 | ||
| if (moved < minLeft) moved = minLeft | ||
| const { columnsWidth } = datagrid.renderData | ||
| columnsWidth[draggingColumnIndex] = columnsWidth[draggingColumnIndex] + moved | ||
| datagrid.setWidth(columnsWidth) | ||
| var columnsMinWidth = datagrid.renderData.columnsMinWidth | ||
| columnsMinWidth[draggingColumnIndex] = columnsMinWidth[draggingColumnIndex] + moved | ||
| datagrid.setWidth(columnsMinWidth) | ||
| }) | ||
| ) | ||
| datagrid.once('beforeDestroy', () => { | ||
| unbindEvents.forEach(unbind => unbind()) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { unbind() }) | ||
| }) | ||
| }) | ||
| } |
@@ -1,14 +0,14 @@ | ||
| import './index.scss' | ||
| import addEvent from '../../utils/addEvent' | ||
| require('./index.scss') | ||
| var addEvent = require('../../utils/addEvent') | ||
| export default function (DataGrid) { | ||
| DataGrid.hook(datagrid => { | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.fixedColumns) return | ||
| const unbindEvents = [] | ||
| var unbindEvents = [] | ||
| let fixedDataGrid | ||
| var fixedDataGrid | ||
| datagrid.on('afterSetData', data => { | ||
| const { fixedColumnsLeft } = data | ||
| datagrid.on('afterSetData', function (data) { | ||
| var fixedColumnsLeft = data.fixedColumnsLeft | ||
| if (!fixedColumnsLeft) { | ||
@@ -27,7 +27,13 @@ if (fixedDataGrid) fixedDataGrid.el.classList.add('hidden') | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { | ||
| unbind() | ||
| }) | ||
| }) | ||
| function initFixedDataGrid () { | ||
| const datagridContainer = document.createElement('div') | ||
| var datagridContainer = document.createElement('div') | ||
| datagridContainer.classList.add('fixed-datagrid') | ||
| const div = document.createElement('div') | ||
| var div = document.createElement('div') | ||
| div.classList.add('hidden') | ||
@@ -38,3 +44,3 @@ datagridContainer.appendChild(div) | ||
| fixedDataGrid = new DataGrid(div, { | ||
| height: datagrid.ui.$columnsWrapper.clientHeight + datagrid.ui.$bodyWrapper.clientHeight, | ||
| height: datagrid.ui.$columnsWrapper.offsetHeight + datagrid.ui.$bodyWrapper.offsetHeight, | ||
| columnSorting: datagrid.options.columnSorting, | ||
@@ -45,26 +51,57 @@ columnResize: datagrid.options.columnResize, | ||
| // 修改一个元素的 scrollTop 属性值会触发这个元素的 onscroll 事件， | ||
| // 为了避免两个 datagrid 相互之间循环触发 onscroll 事件， | ||
| // 所以加了下面的一堆标识位。 | ||
| // 循环触发 onscroll 事件会导致在快速滑动时两个表格的 scrollTop 不同步， | ||
| // 造成"撕裂"现象 | ||
| var dataGridBodyScrolling = false | ||
| var dataGridBodyScrollingTimeId | ||
| var fixedDataGridBodyScrolling = false | ||
| var fixedDataGridBodyScrollingTimeId | ||
| unbindEvents.push( | ||
| addEvent(fixedDataGrid.ui.$bodyWrapper, 'scroll', syncScrollTop), | ||
| addEvent(datagrid.ui.$bodyWrapper, 'scroll', syncScrollTop) | ||
| addEvent(datagrid.ui.$bodyWrapper, 'scroll', function () { | ||
| if (fixedDataGridBodyScrolling) return | ||
| dataGridBodyScrolling = true | ||
| dataGridBodyScrollingTimeId && clearTimeout(dataGridBodyScrollingTimeId) | ||
| dataGridBodyScrollingTimeId = setTimeout(function () { | ||
| dataGridBodyScrolling = false | ||
| }, 250) | ||
| fixedDataGrid.ui.$bodyWrapper.scrollTop = this.scrollTop | ||
| }), | ||
| addEvent(fixedDataGrid.ui.$bodyWrapper, 'scroll', function () { | ||
| if (dataGridBodyScrolling) return | ||
| fixedDataGridBodyScrolling = true | ||
| fixedDataGridBodyScrollingTimeId && clearTimeout(fixedDataGridBodyScrollingTimeId) | ||
| fixedDataGridBodyScrollingTimeId = setTimeout(function () { | ||
| fixedDataGridBodyScrolling = false | ||
| }, 250) | ||
| datagrid.ui.$bodyWrapper.scrollTop = this.scrollTop | ||
| }) | ||
| ) | ||
| unbindEvents.push( | ||
| datagrid.on('trHoverTo', syncHoverIn), | ||
| fixedDataGrid.on('trHoverTo', syncHoverIn), | ||
| datagrid.on('clearHover', syncHoverOut), | ||
| fixedDataGrid.on('clearHover', syncHoverOut) | ||
| ) | ||
| function syncHoverIn (index, trElement) { | ||
| var to = fixedDataGrid.el.contains(trElement) ? datagrid : fixedDataGrid | ||
| to.trHover(true, index, false) | ||
| } | ||
| function syncHoverOut (index, trElement) { | ||
| var to = fixedDataGrid.el.contains(trElement) ? datagrid : fixedDataGrid | ||
| to.trHover(false, index, false) | ||
| } | ||
| if (datagrid.options.selection) { | ||
| datagrid.on('selectedChanged', index => { | ||
| datagrid.on('selectedChanged', function (index) { | ||
| fixedDataGrid.selectRow(index, false) | ||
| }) | ||
| fixedDataGrid.on('selectedChanged', index => { | ||
| fixedDataGrid.on('selectedChanged', function (index) { | ||
| datagrid.selectRow(index) | ||
| }) | ||
| } | ||
| /** | ||
| * 同步固定表格和主表格的 body 滚动位置 | ||
| * @param e | ||
| */ | ||
| function syncScrollTop (e) { | ||
| const isInFixed = fixedDataGrid.el.contains(e.target) | ||
| const needAdjustBody = (isInFixed ? datagrid : fixedDataGrid).ui.$bodyWrapper | ||
| const fromBody = (isInFixed ? fixedDataGrid : datagrid).ui.$bodyWrapper | ||
| needAdjustBody.scrollTop = fromBody.scrollTop | ||
| } | ||
| } | ||
@@ -71,0 +108,0 @@ }) |
@@ -1,9 +0,11 @@ | ||
| import './index.scss' | ||
| import pagerTemplate from './template.html' | ||
| import addEvent from '../../utils/addEvent' | ||
| require('./index.scss') | ||
| var pagerTemplate = require('./template.html') | ||
| var addEvent = require('../../utils/addEvent') | ||
| export default function (DataGrid) { | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.pagination) return | ||
| var pagingTemplate = datagrid.options.pagingTemplate || pagerTemplate | ||
| function jumpTo (pageNo) { | ||
@@ -18,3 +20,3 @@ if (Number.isNaN(pageNo) || pageNo < 1 || pageNo > pager.totalPage) { | ||
| const pager = datagrid.pager = { | ||
| var pager = datagrid.pager = { | ||
| cur: 1, // 当前页数 | ||
@@ -28,12 +30,12 @@ total: null, // 总共有多少条记录 | ||
| const unbindEvents = [] | ||
| var unbindEvents = [] | ||
| const wrapper = document.createElement('div') | ||
| var wrapper = document.createElement('div') | ||
| wrapper.classList.add('grid-pager-wrapper') | ||
| unbindEvents.push( | ||
| addEvent(wrapper, 'click', e => { | ||
| const { jump } = e.target.dataset | ||
| addEvent(wrapper, 'click', function (e) { | ||
| var jump = e.target.dataset.jump | ||
| if (!jump) return | ||
| let pageTo | ||
| var pageTo | ||
| switch (jump) { | ||
@@ -52,10 +54,8 @@ case 'first': | ||
| break | ||
| default: | ||
| return | ||
| } | ||
| jumpTo(pageTo) | ||
| }), | ||
| addEvent(wrapper, 'click', e => { | ||
| if (e.target.dataset.downlond === undefined) return | ||
| datagrid.emit('download-table') | ||
| }), | ||
| addEvent(wrapper, 'keydown', e => { | ||
| addEvent(wrapper, 'keydown', function (e) { | ||
| if (e.keyCode !== 13) return | ||
@@ -65,3 +65,3 @@ if (e.target.dataset.page === undefined) return | ||
| }), | ||
| datagrid.on('beforeSetData', data => { | ||
| datagrid.on('beforeSetData', function (data) { | ||
| if (!data.rows || !data.rows.length) { | ||
@@ -71,5 +71,6 @@ wrapper.classList.add('hidden') | ||
| } | ||
| const { size, total } = data | ||
| const { cur } = pager | ||
| const dataLength = data.rows.length | ||
| var size = data.size || 0 | ||
| var total = data.total || 0 | ||
| var cur = pager.cur | ||
| var dataLength = data.rows.length | ||
| pager.total = total | ||
@@ -81,23 +82,18 @@ pager.size = size | ||
| pager.total = total | ||
| pager.totalPage = Math.ceil(total / size) | ||
| pager.totalPage = Math.ceil(total / size) || 0 | ||
| wrapper.innerHTML = pagerTemplate.replace(/\{\{(\w+)\}\}/g, (word, group) => { | ||
| return pager[group] | ||
| wrapper.innerHTML = pagingTemplate.replace(/\{\{(\w+)\}\}/g, function (word, group) { | ||
| return pager.hasOwnProperty(group) ? pager[group] : word | ||
| }) | ||
| wrapper.classList.remove('hidden') | ||
| }), | ||
| datagrid.on('beforeSetSize', heightObj => { | ||
| const wrapperHeight = wrapper.clientHeight | ||
| heightObj.pagerHeight = wrapperHeight | ||
| heightObj.bodyHeight = heightObj.bodyHeight - wrapperHeight | ||
| }) | ||
| ) | ||
| datagrid.once('afterInit', () => { | ||
| datagrid.el.appendChild(wrapper) | ||
| datagrid.once('afterInit', function () { | ||
| datagrid.ui.$gridWrapper.appendChild(wrapper) | ||
| datagrid.ui.$pagerWrapper = wrapper | ||
| }) | ||
| datagrid.once('beforeDestroy', () => { | ||
| unbindEvents.forEach(unbind => unbind()) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { unbind() }) | ||
| }) | ||
| }) | ||
| } |
@@ -1,35 +0,41 @@ | ||
| import './index.scss' | ||
| import findParent from '../../utils/findParent' | ||
| require('./index.scss') | ||
| var findParent = require('../../utils/findParent') | ||
| var addEvent = require('../../utils/addEvent') | ||
| export default function (DataGrid) { | ||
| DataGrid.prototype.selectRow = function (index, fire = true) { | ||
| const { $body } = this.ui | ||
| const tr = $body.querySelector(`tr[data-index="${index}"]`) | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.prototype.selectRow = function (index, fire) { | ||
| var $body = this.ui.$body | ||
| var tr = $body.querySelector('tr[data-index="' + index + '"]') | ||
| if (!tr) return | ||
| const selectedTR = $body.querySelector('tr.selected') | ||
| var selectedTR = $body.querySelector('tr.selected') | ||
| if (selectedTR) selectedTR.classList.remove('selected') | ||
| tr.classList.add('selected') | ||
| this._selectRowIndex = index | ||
| if (fire) this.emit('selectedChanged', index) | ||
| if (fire !== false) this.emit('selectedChanged', index) | ||
| } | ||
| DataGrid.hook(datagrid => { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.selection) return | ||
| const unbind = datagrid.on('beforeSetData', () => { | ||
| var unbindEvents = [] | ||
| unbindEvents.push(datagrid.on('beforeSetData', function () { | ||
| datagrid._selectRowIndex = null | ||
| }) | ||
| })) | ||
| datagrid.once('afterInit', () => { | ||
| const { $body } = datagrid.ui | ||
| datagrid.once('afterInit', function () { | ||
| var $body = datagrid.ui.$body | ||
| // 点击数据行时, 给出事件提示 | ||
| $body.addEventListener('click', e => { | ||
| const tr = findParent('tr', e.target, $body) | ||
| unbindEvents.push(addEvent($body, 'click', function (e) { | ||
| var tr = findParent('tr', e.target, $body) | ||
| if (!tr) return | ||
| const trIndex = Number(tr.dataset.index) | ||
| var trIndex = Number(tr.dataset.index) | ||
| if (!Number.isNaN(trIndex) && datagrid._selectRowIndex !== trIndex) datagrid.selectRow(trIndex) | ||
| })) | ||
| }) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { | ||
| unbind() | ||
| }) | ||
| }) | ||
| datagrid.once('beforeDestroy', unbind) | ||
| }) | ||
| } |
@@ -1,27 +0,27 @@ | ||
| import './index.scss' | ||
| import findParent from '../../utils/findParent' | ||
| import addEvent from '../../utils/addEvent' | ||
| require('./index.scss') | ||
| var findParent = require('../../utils/findParent') | ||
| var addEvent = require('../../utils/addEvent') | ||
| const { indexOf } = Array.prototype | ||
| var indexOf = Array.prototype.indexOf | ||
| const DESC = -1 // 降序 | ||
| const ASC = 1 // 升序 | ||
| const NONE_ORDER = 0 // 不排序 | ||
| var DESC = -1 // 降序 | ||
| var ASC = 1 // 升序 | ||
| var NONE_ORDER = 0 // 不排序 | ||
| const CLASS_ASC = 'order-by-asc' | ||
| const CLASS_DESC = 'order-by-desc' | ||
| var CLASS_ASC = 'order-by-asc' | ||
| var CLASS_DESC = 'order-by-desc' | ||
| export default function (DataGrid) { | ||
| DataGrid.hook(datagrid => { | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.columnSorting) return | ||
| const unbindEvents = [] | ||
| var unbindEvents = [] | ||
| let lastSortColumnIndex | ||
| let sortType = NONE_ORDER | ||
| var lastSortColumnIndex | ||
| var sortType = NONE_ORDER | ||
| unbindEvents.push( | ||
| // 给每个字段内部注入小箭头 | ||
| datagrid.on('beforeRenderColumns', columnsHTMLArr => { | ||
| columnsHTMLArr.forEach((html, index) => { | ||
| datagrid.on('beforeRenderColumns', function (columnsHTMLArr) { | ||
| columnsHTMLArr.forEach(function (html, index) { | ||
| columnsHTMLArr[index] = html.replace('</th>', '<span class="order-ico"></span></th>') | ||
@@ -34,3 +34,3 @@ }) | ||
| if (typeof lastSortColumnIndex === 'number') { | ||
| const lastTH = datagrid.ui.$columnsWrapper.querySelector(`th:nth-child(${lastSortColumnIndex + 1})`) | ||
| var lastTH = datagrid.ui.$columnsWrapper.querySelector('th:nth-child(' + (lastSortColumnIndex + 1) + ')') | ||
| if (lastTH) lastTH.classList.remove(CLASS_ASC, CLASS_DESC) | ||
@@ -40,12 +40,12 @@ } | ||
| datagrid.once('afterInit', () => { | ||
| datagrid.once('afterInit', function () { | ||
| // 监听字段的点击事件 | ||
| const { $columnsWrapper } = datagrid.ui | ||
| var $columnsWrapper = datagrid.ui.$columnsWrapper | ||
| unbindEvents.push( | ||
| addEvent($columnsWrapper, 'click', e => { | ||
| const th = findParent('th', e.target, $columnsWrapper) | ||
| addEvent($columnsWrapper, 'click', function (e) { | ||
| var th = findParent('th', e.target, $columnsWrapper) | ||
| if (!th) return | ||
| if (th.classList.contains('resizing')) return | ||
| const index = indexOf.call(th.parentElement.children, th) | ||
| const columnDef = datagrid.renderData.columnsDef[index] | ||
| var index = indexOf.call(th.parentElement.children, th) | ||
| var columnDef = datagrid.renderData.columnsDef[index] | ||
| if (columnDef.sortable === false) return | ||
@@ -79,6 +79,6 @@ | ||
| datagrid.once('beforeDestroy', () => { | ||
| unbindEvents.forEach(unbind => unbind()) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { unbind() }) | ||
| }) | ||
| }) | ||
| } |
@@ -9,7 +9,7 @@ /** | ||
| */ | ||
| export default function (element, eventName, handler, useCapture = false) { | ||
| module.exports = function (element, eventName, handler, useCapture) { | ||
| element.addEventListener(eventName, handler, useCapture) | ||
| return () => { | ||
| return function () { | ||
| element.removeEventListener(eventName, handler, useCapture) | ||
| } | ||
| } |
@@ -1,49 +0,53 @@ | ||
| class MyEvent { | ||
| constructor () { | ||
| this._callbacks = {} | ||
| } | ||
| var slice = Array.prototype.slice | ||
| /** | ||
| * 注册事件监听函数 | ||
| * @param {string} eventName | ||
| * @param {function()} handlerFunc | ||
| * @return {function()} - 调用此函数可以取消掉监听 | ||
| */ | ||
| on (eventName, handlerFunc) { | ||
| const { _callbacks } = this | ||
| const eventArr = (_callbacks[eventName] || (_callbacks[eventName] = [])) | ||
| eventArr.push(handlerFunc) | ||
| return () => { | ||
| const i = eventArr.indexOf(handlerFunc) | ||
| if (i >= 0) eventArr.splice(i, 1) | ||
| } | ||
| } | ||
| function MyEvent () { | ||
| this._callbacks = {} | ||
| } | ||
| /** | ||
| * 注册事件监听函数, 但只监听一次 | ||
| * @param {string} eventName | ||
| * @param {function()} handlerFunc | ||
| * @return {function()} | ||
| */ | ||
| once (eventName, handlerFunc) { | ||
| const unwatch = this.on(eventName, function () { | ||
| handlerFunc.apply(null, arguments) | ||
| // 等 emit 中的 forEach 执行完后再改变数组 | ||
| window.setTimeout(unwatch, 0) | ||
| }) | ||
| return unwatch | ||
| } | ||
| var p = MyEvent.prototype | ||
| /** | ||
| * 发布事件 | ||
| * @param {string} eventName | ||
| * @param args | ||
| */ | ||
| emit (eventName, ...args) { | ||
| const eventArr = this._callbacks[eventName] | ||
| if (!eventArr || !eventArr.length) return | ||
| eventArr.forEach(func => func.apply(null, args)) | ||
| /** | ||
| * 注册事件监听函数 | ||
| * @param {string} eventName | ||
| * @param {function()} handlerFunc | ||
| * @return {function()} - 调用此函数可以取消掉监听 | ||
| */ | ||
| p.on = function (eventName, handlerFunc) { | ||
| var callbacks = this._callbacks | ||
| var eventArr = (callbacks[eventName] || (callbacks[eventName] = [])) | ||
| eventArr.push(handlerFunc) | ||
| return function () { | ||
| var i = eventArr.indexOf(handlerFunc) | ||
| if (i >= 0) eventArr.splice(i, 1) | ||
| } | ||
| } | ||
| export default MyEvent | ||
| /** | ||
| * 注册事件监听函数, 但只监听一次 | ||
| * @param {string} eventName | ||
| * @param {function()} handlerFunc | ||
| * @return {function()} | ||
| */ | ||
| p.once = function (eventName, handlerFunc) { | ||
| var unwatch = this.on(eventName, function () { | ||
| handlerFunc.apply(null, arguments) | ||
| // 等 emit 中的 forEach 执行完后再改变数组 | ||
| window.setTimeout(unwatch, 0) | ||
| }) | ||
| return unwatch | ||
| } | ||
| /** | ||
| * 发布事件 | ||
| * @param {string} eventName | ||
| */ | ||
| p.emit = function (eventName/* , ...args */) { | ||
| var eventArr = this._callbacks[eventName] | ||
| if (!eventArr || !eventArr.length) return | ||
| var args = slice.call(arguments, 1) | ||
| eventArr.forEach(function (func) { | ||
| func.apply(null, args) | ||
| }) | ||
| } | ||
| module.exports = MyEvent |
@@ -8,6 +8,7 @@ /** | ||
| */ | ||
| export default function (tagName, node, stop = document.body) { | ||
| const tag = tagName.toUpperCase() | ||
| let parent = node | ||
| let tr = null | ||
| module.exports = function (tagName, node, stop) { | ||
| if (!stop) stop = document.body | ||
| var tag = tagName.toUpperCase() | ||
| var parent = node | ||
| var tr = null | ||
| do { | ||
@@ -14,0 +15,0 @@ if (parent.tagName === tag) { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-21.74%
18
- Number of package files
- increased by8.7%
25
Worsened metrics
- Total package byte prevSize
- decreased by-39.52%
84379
- Lines of code
- decreased by-35.28%
1882
- Number of low supply chain risk alerts
- increased by100%
2
No dependency changes