Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
datagrid - npm Package Compare versions
Comparing version 0.4.1 to 0.4.2
@@ -10,2 +10,4 @@ import * as t from 'tinyemitter'; | ||
| selectionIndex: number; | ||
| ch?: Function | undefined; | ||
| destroy(...args: any[]): void; | ||
| readonly el: HTMLDivElement; | ||
@@ -25,3 +27,2 @@ readonly ui: { | ||
| hideModal(): void; | ||
| destroy(remove?: Boolean | undefined): void; | ||
| e: any; | ||
@@ -36,2 +37,4 @@ on(name: string, handle: t.IHandle): void; | ||
| sortOrderIndex: number; | ||
| clickEventHandler?: Function | undefined; | ||
| destroy(...args: any[]): void; | ||
| readonly el: HTMLDivElement; | ||
@@ -51,3 +54,2 @@ readonly ui: { | ||
| hideModal(): void; | ||
| destroy(remove?: Boolean | undefined): void; | ||
| e: any; | ||
@@ -64,3 +66,3 @@ on(name: string, handle: t.IHandle): void; | ||
| readonly colGroup: HTMLTableColElement; | ||
| readonly unbindEvents: (() => void)[]; | ||
| readonly unbindEvents?: Function[] | undefined; | ||
| syncFixedHeader(): void; | ||
@@ -90,5 +92,6 @@ setData(data: g.TableData): void; | ||
| lastHoverIndex: number; | ||
| readonly fixedTableEvents: (() => void)[]; | ||
| readonly fixedTableEvents?: Function[] | undefined; | ||
| setFixed(count: number, place?: "left" | "right"): void; | ||
| syncFixedWidth(place: "left" | "right"): void; | ||
| destroy(...args: any[]): void; | ||
| createFixedGrid(place: "left" | "right"): g.BaseGrid; | ||
@@ -109,3 +112,2 @@ readonly el: HTMLDivElement; | ||
| hideModal(): void; | ||
| destroy(remove?: Boolean | undefined): void; | ||
| e: any; | ||
@@ -112,0 +114,0 @@ on(name: string, handle: t.IHandle): void; |
@@ -12,3 +12,3 @@ import * as g from '../../core'; | ||
| readonly colGroup: HTMLTableColElement; | ||
| readonly unbindEvents: (() => void)[]; | ||
| readonly unbindEvents?: Function[] | undefined; | ||
| syncFixedHeader(): void; | ||
@@ -15,0 +15,0 @@ setData(data: g.TableData): void; |
@@ -13,5 +13,6 @@ import * as t from 'tinyemitter'; | ||
| lastHoverIndex: number; | ||
| readonly fixedTableEvents: (() => void)[]; | ||
| readonly fixedTableEvents?: Function[] | undefined; | ||
| setFixed(count: number, place?: "left" | "right"): void; | ||
| syncFixedWidth(place: "left" | "right"): void; | ||
| destroy(...args: any[]): void; | ||
| createFixedGrid(place: "left" | "right"): g.BaseGrid; | ||
@@ -32,3 +33,2 @@ readonly el: HTMLDivElement; | ||
| hideModal(): void; | ||
| destroy(remove?: Boolean | undefined): void; | ||
| e: any; | ||
@@ -35,0 +35,0 @@ on(name: string, handle: t.IHandle): void; |
@@ -8,2 +8,4 @@ import * as t from 'tinyemitter'; | ||
| selectionIndex: number; | ||
| ch?: Function | undefined; | ||
| destroy(...args: any[]): void; | ||
| readonly el: HTMLDivElement; | ||
@@ -23,3 +25,2 @@ readonly ui: { | ||
| hideModal(): void; | ||
| destroy(remove?: Boolean | undefined): void; | ||
| e: any; | ||
@@ -26,0 +27,0 @@ on(name: string, handle: t.IHandle): void; |
| import * as t from 'tinyemitter'; | ||
| import * as g from '../../core/index'; | ||
| import * as g from '../../core'; | ||
| import * as x from '../fixed-table'; | ||
@@ -12,2 +12,4 @@ import './style.css'; | ||
| sortOrderIndex: number; | ||
| clickEventHandler?: Function | undefined; | ||
| destroy(...args: any[]): void; | ||
| readonly el: HTMLDivElement; | ||
@@ -27,3 +29,2 @@ readonly ui: { | ||
| hideModal(): void; | ||
| destroy(remove?: Boolean | undefined): void; | ||
| e: any; | ||
@@ -30,0 +31,0 @@ on(name: string, handle: t.IHandle): void; |
@@ -1,2 +0,5 @@ | ||
| declare const _default: (selector: string) => Element | null; | ||
| export interface ClosestFn { | ||
| (target: Element, selector: string, end: Element): HTMLElement | null; | ||
| } | ||
| declare const _default: ClosestFn; | ||
| export default _default; |
| /*! | ||
| * datagrid v0.4.1 | ||
| * datagrid v0.4.2 | ||
| * https://github.com/lmk123/datagrid | ||
@@ -36,2 +36,22 @@ * Released under the MIT License. | ||
| var hasOwnProperty = Object.prototype.hasOwnProperty; | ||
| function forOwn(obj, cb) { | ||
| for (var key in obj) { | ||
| if (hasOwnProperty.call(obj, key)) { | ||
| cb(obj[key], key); | ||
| } | ||
| } | ||
| } | ||
| var assign = Object.assign || | ||
| function (target) { | ||
| var args = [], len = arguments.length - 1; | ||
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | ||
| args.forEach(function (arg) { | ||
| forOwn(arg, function (val, key) { | ||
| target[key] = val; | ||
| }); | ||
| }); | ||
| }; | ||
| /** | ||
@@ -52,7 +72,7 @@ * @fileOverview 输出一个最基本的、仅包含核心功能的表格类。 | ||
| function fillNode(node, content) { | ||
| if (typeof content === 'string') { | ||
| node.innerHTML = content; | ||
| if (content instanceof Node) { | ||
| node.appendChild(content); | ||
| } | ||
| else { | ||
| node.appendChild(content); | ||
| node.innerHTML = content; | ||
| } | ||
@@ -70,4 +90,3 @@ } | ||
| this.el = document.createElement('div'); | ||
| /* protected */ this.ui = {}; | ||
| this.options = Object.assign({ | ||
| this.options = assign({ | ||
| td: defaultTdRenderer, | ||
@@ -82,3 +101,3 @@ th: defaultThRenderer | ||
| var thead = el.getElementsByTagName('thead')[0]; | ||
| Object.assign(this.ui, { | ||
| this.ui = { | ||
| scrollContainer: el.getElementsByClassName('scroll-container')[0], | ||
@@ -90,3 +109,3 @@ table: el.getElementsByTagName('table')[0], | ||
| modal: el.getElementsByClassName('modal-content')[0] | ||
| }); | ||
| }; | ||
| } | ||
@@ -294,3 +313,2 @@ | ||
| this.colGroup = document.createElement('colgroup'); | ||
| this.unbindEvents = []; | ||
| var ref = this; | ||
@@ -319,19 +337,20 @@ var el = ref.el; | ||
| var scrollContainer = ui.scrollContainer; | ||
| this.unbindEvents.push( | ||
| // 窗口大小变化后重新同步表格的宽度 | ||
| // TODO: 窗口大小变化后表格的宽度似乎没有变化？ | ||
| // addEvent( | ||
| // window, | ||
| // 'resize', | ||
| // rafThrottle(() => { | ||
| // this.syncFixedHeader() | ||
| // }) | ||
| // ), | ||
| // 表格滚动时，使用 transform 移动固定表头的位置以获得更平滑的效果 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| // 使用 transform 会比同步 scrollLeft 流畅很多 | ||
| fixedHeaderTable.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(-" + (scrollContainer.scrollLeft) + "px,0,0)"; | ||
| }))); | ||
| this.unbindEvents = [ | ||
| // 窗口大小变化后重新同步表格的宽度 | ||
| // TODO: 窗口大小变化后表格的宽度似乎没有变化？ | ||
| // addEvent( | ||
| // window, | ||
| // 'resize', | ||
| // rafThrottle(() => { | ||
| // this.syncFixedHeader() | ||
| // }) | ||
| // ), | ||
| // 表格滚动时，使用 transform 移动固定表头的位置以获得更平滑的效果 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| // 使用 transform 会比同步 scrollLeft 流畅很多 | ||
| fixedHeaderTable.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(-" + (scrollContainer.scrollLeft) + "px,0,0)"; | ||
| })) | ||
| ]; | ||
| } | ||
@@ -371,3 +390,6 @@ } | ||
| this.unbindEvents.forEach(function (unbind) { return unbind(); }); | ||
| var ref = this; | ||
| var unbindEvents = ref.unbindEvents; | ||
| if (unbindEvents) | ||
| { unbindEvents.forEach(function (unbind) { return unbind(); }); } | ||
| Base.prototype.destroy.apply(this, args); | ||
@@ -384,14 +406,20 @@ }; | ||
| prototype.webkitMatchesSelector || | ||
| // @ts-ignore | ||
| prototype.mozMatchesSelector || | ||
| prototype.msMatchesSelector; | ||
| // https://caniuse.com/#feat=element-closest | ||
| var closest = prototype.closest || | ||
| function (s) { | ||
| var el = this; | ||
| do { | ||
| if (matches.call(el, s)) | ||
| { return el; } | ||
| el = el.parentElement; | ||
| } while (el); | ||
| return null; | ||
| }; | ||
| var closest = (prototype.closest | ||
| ? function (target, selector) { | ||
| return target.closest(selector); | ||
| } | ||
| : // 使用 polyfill 方法时加个终点参数避免多余的查找 | ||
| function (target, selector, end) { | ||
| var el = target; | ||
| do { | ||
| if (matches.call(el, selector)) | ||
| { return el; } | ||
| el = el.parentElement; | ||
| } while (el && el !== end); | ||
| return null; | ||
| }); | ||
@@ -412,46 +440,48 @@ __$styleInject(".fixed-grid{position:absolute;top:0;background:#fff}.fixed-grid .scroll-container{overflow:hidden}.fixed-grid-left{left:0}.fixed-grid-right{right:0}",undefined); | ||
| Base.apply(this, args); | ||
| this.fixedTableEvents = []; | ||
| var ref = this.ui; | ||
| var scrollContainer = ref.scrollContainer; | ||
| if (!this.parent) { | ||
| this.fixedTableEvents.push( | ||
| // 同步表格的滚动条位置 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| var ref = this$1; | ||
| var fixedTables = ref.fixedTables; | ||
| if (!fixedTables) | ||
| { return; } | ||
| for (var place in fixedTables) { | ||
| fixedTables[place].ui.table.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(0,-" + (scrollContainer.scrollTop) + "px,0)"; | ||
| } | ||
| })), | ||
| // 同步表格的 hover 状态 | ||
| addEvent(this.el, 'mouseover', function (e) { | ||
| var tr = closest.call(e.target, '.datagrid tbody tr'); | ||
| if (!tr) | ||
| { return; } | ||
| var trs = tr.parentElement.children; | ||
| var ref = this$1; | ||
| var lastHoverIndex = ref.lastHoverIndex; | ||
| var index = indexOf.call(trs, tr); | ||
| if (lastHoverIndex === index) | ||
| { return; } | ||
| this$1.lastHoverIndex = index; | ||
| var setHover = function (grid) { | ||
| var trs = grid.ui.tbody.children; | ||
| var lastHoverTr = trs[lastHoverIndex]; | ||
| if (lastHoverTr) { | ||
| lastHoverTr.classList.remove('hover-row'); | ||
| var ref$1 = this; | ||
| var el = ref$1.el; | ||
| this.fixedTableEvents = [ | ||
| // 同步表格的滚动条位置 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| var ref = this$1; | ||
| var fixedTables = ref.fixedTables; | ||
| if (!fixedTables) | ||
| { return; } | ||
| for (var place in fixedTables) { | ||
| fixedTables[place].ui.table.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(0,-" + (scrollContainer.scrollTop) + "px,0)"; | ||
| } | ||
| trs[index].classList.add('hover-row'); | ||
| }; | ||
| setHover(this$1); | ||
| var ref$1 = this$1; | ||
| var children = ref$1.children; | ||
| if (children) { | ||
| children.forEach(setHover); | ||
| } | ||
| })); | ||
| })), | ||
| // 同步表格的 hover 状态 | ||
| addEvent(el, 'mouseover', function (e) { | ||
| var tr = closest(e.target, '.datagrid tbody tr', el); | ||
| if (!tr) | ||
| { return; } | ||
| var trs = tr.parentElement.children; | ||
| var ref = this$1; | ||
| var lastHoverIndex = ref.lastHoverIndex; | ||
| var index = indexOf.call(trs, tr); | ||
| if (lastHoverIndex === index) | ||
| { return; } | ||
| this$1.lastHoverIndex = index; | ||
| var setHover = function (grid) { | ||
| var trs = grid.ui.tbody.children; | ||
| var lastHoverTr = trs[lastHoverIndex]; | ||
| if (lastHoverTr) { | ||
| lastHoverTr.classList.remove('hover-row'); | ||
| } | ||
| trs[index].classList.add('hover-row'); | ||
| }; | ||
| setHover(this$1); | ||
| var ref$1 = this$1; | ||
| var children = ref$1.children; | ||
| if (children) { | ||
| children.forEach(setHover); | ||
| } | ||
| }) | ||
| ]; | ||
| } | ||
@@ -536,2 +566,12 @@ } | ||
| }; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var fixedTableEvents = ref.fixedTableEvents; | ||
| if (fixedTableEvents) | ||
| { fixedTableEvents.forEach(function (fn) { return fn(); }); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| /** | ||
@@ -542,3 +582,3 @@ * 创建固定在两侧的表格实例的方法。 | ||
| anonymous.prototype.createFixedGrid = function createFixedGrid (place) { | ||
| var innerTable = new this.constructor(Object.assign({ | ||
| var innerTable = new this.constructor(assign({ | ||
| parent: this | ||
@@ -564,5 +604,2 @@ }, this.options)); | ||
| /* tslint:enable:no-unused-variable */ | ||
| // const DESC = -1, // 降序 | ||
| // ASC = 1, // 升序 | ||
| // NONE = 0 // 不排序 | ||
| var orderLength = 3; | ||
@@ -584,3 +621,3 @@ var ref$2 = Array.prototype; | ||
| var span = document.createElement('span'); | ||
| Object.assign(span, element); | ||
| assign(span, element); | ||
| fd.appendChild(span); | ||
@@ -616,4 +653,6 @@ }); | ||
| if (!this.parent) { | ||
| addEvent(this.el, 'click', function (e) { | ||
| var th = closest.call(e.target, '.datagrid th'); | ||
| var ref = this; | ||
| var el = ref.el; | ||
| this.clickEventHandler = addEvent(el, 'click', function (e) { | ||
| var th = closest(e.target, '.datagrid th', el); | ||
| if (!th) | ||
@@ -624,3 +663,3 @@ { return; } | ||
| var newSortColumnIndex; | ||
| var isRightFixed = closest.call(th, '.fixed-grid-right'); | ||
| var isRightFixed = closest(th, '.fixed-grid-right', el); | ||
| if (isRightFixed) { | ||
@@ -687,3 +726,13 @@ newSortColumnIndex = | ||
| anonymous.prototype.constructor = anonymous; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var clickEventHandler = ref.clickEventHandler; | ||
| if (clickEventHandler) | ||
| { clickEventHandler(); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| return anonymous; | ||
@@ -704,4 +753,6 @@ }(Base)); | ||
| if (!this.parent) { | ||
| addEvent(this.el, 'click', function (e) { | ||
| var tr = closest.call(e.target, '.datagrid tbody tr'); | ||
| var ref = this; | ||
| var el = ref.el; | ||
| this.ch = addEvent(el, 'click', function (e) { | ||
| var tr = closest(e.target, '.datagrid tbody tr', el); | ||
| if (!tr) | ||
@@ -738,3 +789,13 @@ { return; } | ||
| anonymous.prototype.constructor = anonymous; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var ch = ref.ch; | ||
| if (ch) | ||
| { ch(); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| return anonymous; | ||
@@ -741,0 +802,0 @@ }(Base)); |
| /*! | ||
| * datagrid v0.4.1 | ||
| * datagrid v0.4.2 | ||
| * https://github.com/lmk123/datagrid | ||
@@ -30,2 +30,22 @@ * Released under the MIT License. | ||
| var hasOwnProperty = Object.prototype.hasOwnProperty; | ||
| function forOwn(obj, cb) { | ||
| for (var key in obj) { | ||
| if (hasOwnProperty.call(obj, key)) { | ||
| cb(obj[key], key); | ||
| } | ||
| } | ||
| } | ||
| var assign = Object.assign || | ||
| function (target) { | ||
| var args = [], len = arguments.length - 1; | ||
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | ||
| args.forEach(function (arg) { | ||
| forOwn(arg, function (val, key) { | ||
| target[key] = val; | ||
| }); | ||
| }); | ||
| }; | ||
| /** | ||
@@ -46,7 +66,7 @@ * @fileOverview 输出一个最基本的、仅包含核心功能的表格类。 | ||
| function fillNode(node, content) { | ||
| if (typeof content === 'string') { | ||
| node.innerHTML = content; | ||
| if (content instanceof Node) { | ||
| node.appendChild(content); | ||
| } | ||
| else { | ||
| node.appendChild(content); | ||
| node.innerHTML = content; | ||
| } | ||
@@ -64,4 +84,3 @@ } | ||
| this.el = document.createElement('div'); | ||
| /* protected */ this.ui = {}; | ||
| this.options = Object.assign({ | ||
| this.options = assign({ | ||
| td: defaultTdRenderer, | ||
@@ -76,3 +95,3 @@ th: defaultThRenderer | ||
| var thead = el.getElementsByTagName('thead')[0]; | ||
| Object.assign(this.ui, { | ||
| this.ui = { | ||
| scrollContainer: el.getElementsByClassName('scroll-container')[0], | ||
@@ -84,3 +103,3 @@ table: el.getElementsByTagName('table')[0], | ||
| modal: el.getElementsByClassName('modal-content')[0] | ||
| }); | ||
| }; | ||
| } | ||
@@ -288,3 +307,2 @@ | ||
| this.colGroup = document.createElement('colgroup'); | ||
| this.unbindEvents = []; | ||
| var ref = this; | ||
@@ -313,19 +331,20 @@ var el = ref.el; | ||
| var scrollContainer = ui.scrollContainer; | ||
| this.unbindEvents.push( | ||
| // 窗口大小变化后重新同步表格的宽度 | ||
| // TODO: 窗口大小变化后表格的宽度似乎没有变化？ | ||
| // addEvent( | ||
| // window, | ||
| // 'resize', | ||
| // rafThrottle(() => { | ||
| // this.syncFixedHeader() | ||
| // }) | ||
| // ), | ||
| // 表格滚动时，使用 transform 移动固定表头的位置以获得更平滑的效果 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| // 使用 transform 会比同步 scrollLeft 流畅很多 | ||
| fixedHeaderTable.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(-" + (scrollContainer.scrollLeft) + "px,0,0)"; | ||
| }))); | ||
| this.unbindEvents = [ | ||
| // 窗口大小变化后重新同步表格的宽度 | ||
| // TODO: 窗口大小变化后表格的宽度似乎没有变化？ | ||
| // addEvent( | ||
| // window, | ||
| // 'resize', | ||
| // rafThrottle(() => { | ||
| // this.syncFixedHeader() | ||
| // }) | ||
| // ), | ||
| // 表格滚动时，使用 transform 移动固定表头的位置以获得更平滑的效果 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| // 使用 transform 会比同步 scrollLeft 流畅很多 | ||
| fixedHeaderTable.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(-" + (scrollContainer.scrollLeft) + "px,0,0)"; | ||
| })) | ||
| ]; | ||
| } | ||
@@ -365,3 +384,6 @@ } | ||
| this.unbindEvents.forEach(function (unbind) { return unbind(); }); | ||
| var ref = this; | ||
| var unbindEvents = ref.unbindEvents; | ||
| if (unbindEvents) | ||
| { unbindEvents.forEach(function (unbind) { return unbind(); }); } | ||
| Base.prototype.destroy.apply(this, args); | ||
@@ -378,14 +400,20 @@ }; | ||
| prototype.webkitMatchesSelector || | ||
| // @ts-ignore | ||
| prototype.mozMatchesSelector || | ||
| prototype.msMatchesSelector; | ||
| // https://caniuse.com/#feat=element-closest | ||
| var closest = prototype.closest || | ||
| function (s) { | ||
| var el = this; | ||
| do { | ||
| if (matches.call(el, s)) | ||
| { return el; } | ||
| el = el.parentElement; | ||
| } while (el); | ||
| return null; | ||
| }; | ||
| var closest = (prototype.closest | ||
| ? function (target, selector) { | ||
| return target.closest(selector); | ||
| } | ||
| : // 使用 polyfill 方法时加个终点参数避免多余的查找 | ||
| function (target, selector, end) { | ||
| var el = target; | ||
| do { | ||
| if (matches.call(el, selector)) | ||
| { return el; } | ||
| el = el.parentElement; | ||
| } while (el && el !== end); | ||
| return null; | ||
| }); | ||
@@ -406,46 +434,48 @@ __$styleInject(".fixed-grid{position:absolute;top:0;background:#fff}.fixed-grid .scroll-container{overflow:hidden}.fixed-grid-left{left:0}.fixed-grid-right{right:0}",undefined); | ||
| Base.apply(this, args); | ||
| this.fixedTableEvents = []; | ||
| var ref = this.ui; | ||
| var scrollContainer = ref.scrollContainer; | ||
| if (!this.parent) { | ||
| this.fixedTableEvents.push( | ||
| // 同步表格的滚动条位置 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| var ref = this$1; | ||
| var fixedTables = ref.fixedTables; | ||
| if (!fixedTables) | ||
| { return; } | ||
| for (var place in fixedTables) { | ||
| fixedTables[place].ui.table.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(0,-" + (scrollContainer.scrollTop) + "px,0)"; | ||
| } | ||
| })), | ||
| // 同步表格的 hover 状态 | ||
| addEvent(this.el, 'mouseover', function (e) { | ||
| var tr = closest.call(e.target, '.datagrid tbody tr'); | ||
| if (!tr) | ||
| { return; } | ||
| var trs = tr.parentElement.children; | ||
| var ref = this$1; | ||
| var lastHoverIndex = ref.lastHoverIndex; | ||
| var index = indexOf.call(trs, tr); | ||
| if (lastHoverIndex === index) | ||
| { return; } | ||
| this$1.lastHoverIndex = index; | ||
| var setHover = function (grid) { | ||
| var trs = grid.ui.tbody.children; | ||
| var lastHoverTr = trs[lastHoverIndex]; | ||
| if (lastHoverTr) { | ||
| lastHoverTr.classList.remove('hover-row'); | ||
| var ref$1 = this; | ||
| var el = ref$1.el; | ||
| this.fixedTableEvents = [ | ||
| // 同步表格的滚动条位置 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| var ref = this$1; | ||
| var fixedTables = ref.fixedTables; | ||
| if (!fixedTables) | ||
| { return; } | ||
| for (var place in fixedTables) { | ||
| fixedTables[place].ui.table.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(0,-" + (scrollContainer.scrollTop) + "px,0)"; | ||
| } | ||
| trs[index].classList.add('hover-row'); | ||
| }; | ||
| setHover(this$1); | ||
| var ref$1 = this$1; | ||
| var children = ref$1.children; | ||
| if (children) { | ||
| children.forEach(setHover); | ||
| } | ||
| })); | ||
| })), | ||
| // 同步表格的 hover 状态 | ||
| addEvent(el, 'mouseover', function (e) { | ||
| var tr = closest(e.target, '.datagrid tbody tr', el); | ||
| if (!tr) | ||
| { return; } | ||
| var trs = tr.parentElement.children; | ||
| var ref = this$1; | ||
| var lastHoverIndex = ref.lastHoverIndex; | ||
| var index = indexOf.call(trs, tr); | ||
| if (lastHoverIndex === index) | ||
| { return; } | ||
| this$1.lastHoverIndex = index; | ||
| var setHover = function (grid) { | ||
| var trs = grid.ui.tbody.children; | ||
| var lastHoverTr = trs[lastHoverIndex]; | ||
| if (lastHoverTr) { | ||
| lastHoverTr.classList.remove('hover-row'); | ||
| } | ||
| trs[index].classList.add('hover-row'); | ||
| }; | ||
| setHover(this$1); | ||
| var ref$1 = this$1; | ||
| var children = ref$1.children; | ||
| if (children) { | ||
| children.forEach(setHover); | ||
| } | ||
| }) | ||
| ]; | ||
| } | ||
@@ -530,2 +560,12 @@ } | ||
| }; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var fixedTableEvents = ref.fixedTableEvents; | ||
| if (fixedTableEvents) | ||
| { fixedTableEvents.forEach(function (fn) { return fn(); }); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| /** | ||
@@ -536,3 +576,3 @@ * 创建固定在两侧的表格实例的方法。 | ||
| anonymous.prototype.createFixedGrid = function createFixedGrid (place) { | ||
| var innerTable = new this.constructor(Object.assign({ | ||
| var innerTable = new this.constructor(assign({ | ||
| parent: this | ||
@@ -558,5 +598,2 @@ }, this.options)); | ||
| /* tslint:enable:no-unused-variable */ | ||
| // const DESC = -1, // 降序 | ||
| // ASC = 1, // 升序 | ||
| // NONE = 0 // 不排序 | ||
| var orderLength = 3; | ||
@@ -578,3 +615,3 @@ var ref$2 = Array.prototype; | ||
| var span = document.createElement('span'); | ||
| Object.assign(span, element); | ||
| assign(span, element); | ||
| fd.appendChild(span); | ||
@@ -610,4 +647,6 @@ }); | ||
| if (!this.parent) { | ||
| addEvent(this.el, 'click', function (e) { | ||
| var th = closest.call(e.target, '.datagrid th'); | ||
| var ref = this; | ||
| var el = ref.el; | ||
| this.clickEventHandler = addEvent(el, 'click', function (e) { | ||
| var th = closest(e.target, '.datagrid th', el); | ||
| if (!th) | ||
@@ -618,3 +657,3 @@ { return; } | ||
| var newSortColumnIndex; | ||
| var isRightFixed = closest.call(th, '.fixed-grid-right'); | ||
| var isRightFixed = closest(th, '.fixed-grid-right', el); | ||
| if (isRightFixed) { | ||
@@ -681,3 +720,13 @@ newSortColumnIndex = | ||
| anonymous.prototype.constructor = anonymous; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var clickEventHandler = ref.clickEventHandler; | ||
| if (clickEventHandler) | ||
| { clickEventHandler(); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| return anonymous; | ||
@@ -698,4 +747,6 @@ }(Base)); | ||
| if (!this.parent) { | ||
| addEvent(this.el, 'click', function (e) { | ||
| var tr = closest.call(e.target, '.datagrid tbody tr'); | ||
| var ref = this; | ||
| var el = ref.el; | ||
| this.ch = addEvent(el, 'click', function (e) { | ||
| var tr = closest(e.target, '.datagrid tbody tr', el); | ||
| if (!tr) | ||
@@ -732,3 +783,13 @@ { return; } | ||
| anonymous.prototype.constructor = anonymous; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var ch = ref.ch; | ||
| if (ch) | ||
| { ch(); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| return anonymous; | ||
@@ -735,0 +796,0 @@ }(Base)); |
| /*! | ||
| * datagrid v0.4.1 | ||
| * datagrid v0.4.2 | ||
| * https://github.com/lmk123/datagrid | ||
@@ -85,2 +85,22 @@ * Released under the MIT License. | ||
| var hasOwnProperty = Object.prototype.hasOwnProperty; | ||
| function forOwn(obj, cb) { | ||
| for (var key in obj) { | ||
| if (hasOwnProperty.call(obj, key)) { | ||
| cb(obj[key], key); | ||
| } | ||
| } | ||
| } | ||
| var assign = Object.assign || | ||
| function (target) { | ||
| var args = [], len = arguments.length - 1; | ||
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | ||
| args.forEach(function (arg) { | ||
| forOwn(arg, function (val, key) { | ||
| target[key] = val; | ||
| }); | ||
| }); | ||
| }; | ||
| /** | ||
@@ -101,7 +121,7 @@ * @fileOverview 输出一个最基本的、仅包含核心功能的表格类。 | ||
| function fillNode(node, content) { | ||
| if (typeof content === 'string') { | ||
| node.innerHTML = content; | ||
| if (content instanceof Node) { | ||
| node.appendChild(content); | ||
| } | ||
| else { | ||
| node.appendChild(content); | ||
| node.innerHTML = content; | ||
| } | ||
@@ -119,4 +139,3 @@ } | ||
| this.el = document.createElement('div'); | ||
| /* protected */ this.ui = {}; | ||
| this.options = Object.assign({ | ||
| this.options = assign({ | ||
| td: defaultTdRenderer, | ||
@@ -131,3 +150,3 @@ th: defaultThRenderer | ||
| var thead = el.getElementsByTagName('thead')[0]; | ||
| Object.assign(this.ui, { | ||
| this.ui = { | ||
| scrollContainer: el.getElementsByClassName('scroll-container')[0], | ||
@@ -139,3 +158,3 @@ table: el.getElementsByTagName('table')[0], | ||
| modal: el.getElementsByClassName('modal-content')[0] | ||
| }); | ||
| }; | ||
| } | ||
@@ -343,3 +362,2 @@ | ||
| this.colGroup = document.createElement('colgroup'); | ||
| this.unbindEvents = []; | ||
| var ref = this; | ||
@@ -368,19 +386,20 @@ var el = ref.el; | ||
| var scrollContainer = ui.scrollContainer; | ||
| this.unbindEvents.push( | ||
| // 窗口大小变化后重新同步表格的宽度 | ||
| // TODO: 窗口大小变化后表格的宽度似乎没有变化？ | ||
| // addEvent( | ||
| // window, | ||
| // 'resize', | ||
| // rafThrottle(() => { | ||
| // this.syncFixedHeader() | ||
| // }) | ||
| // ), | ||
| // 表格滚动时，使用 transform 移动固定表头的位置以获得更平滑的效果 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| // 使用 transform 会比同步 scrollLeft 流畅很多 | ||
| fixedHeaderTable.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(-" + (scrollContainer.scrollLeft) + "px,0,0)"; | ||
| }))); | ||
| this.unbindEvents = [ | ||
| // 窗口大小变化后重新同步表格的宽度 | ||
| // TODO: 窗口大小变化后表格的宽度似乎没有变化？ | ||
| // addEvent( | ||
| // window, | ||
| // 'resize', | ||
| // rafThrottle(() => { | ||
| // this.syncFixedHeader() | ||
| // }) | ||
| // ), | ||
| // 表格滚动时，使用 transform 移动固定表头的位置以获得更平滑的效果 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| // 使用 transform 会比同步 scrollLeft 流畅很多 | ||
| fixedHeaderTable.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(-" + (scrollContainer.scrollLeft) + "px,0,0)"; | ||
| })) | ||
| ]; | ||
| } | ||
@@ -420,3 +439,6 @@ } | ||
| this.unbindEvents.forEach(function (unbind) { return unbind(); }); | ||
| var ref = this; | ||
| var unbindEvents = ref.unbindEvents; | ||
| if (unbindEvents) | ||
| { unbindEvents.forEach(function (unbind) { return unbind(); }); } | ||
| Base.prototype.destroy.apply(this, args); | ||
@@ -433,14 +455,20 @@ }; | ||
| prototype.webkitMatchesSelector || | ||
| // @ts-ignore | ||
| prototype.mozMatchesSelector || | ||
| prototype.msMatchesSelector; | ||
| // https://caniuse.com/#feat=element-closest | ||
| var closest = prototype.closest || | ||
| function (s) { | ||
| var el = this; | ||
| do { | ||
| if (matches.call(el, s)) | ||
| { return el; } | ||
| el = el.parentElement; | ||
| } while (el); | ||
| return null; | ||
| }; | ||
| var closest = (prototype.closest | ||
| ? function (target, selector) { | ||
| return target.closest(selector); | ||
| } | ||
| : // 使用 polyfill 方法时加个终点参数避免多余的查找 | ||
| function (target, selector, end) { | ||
| var el = target; | ||
| do { | ||
| if (matches.call(el, selector)) | ||
| { return el; } | ||
| el = el.parentElement; | ||
| } while (el && el !== end); | ||
| return null; | ||
| }); | ||
@@ -461,46 +489,48 @@ __$styleInject(".fixed-grid{position:absolute;top:0;background:#fff}.fixed-grid .scroll-container{overflow:hidden}.fixed-grid-left{left:0}.fixed-grid-right{right:0}",undefined); | ||
| Base.apply(this, args); | ||
| this.fixedTableEvents = []; | ||
| var ref = this.ui; | ||
| var scrollContainer = ref.scrollContainer; | ||
| if (!this.parent) { | ||
| this.fixedTableEvents.push( | ||
| // 同步表格的滚动条位置 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| var ref = this$1; | ||
| var fixedTables = ref.fixedTables; | ||
| if (!fixedTables) | ||
| { return; } | ||
| for (var place in fixedTables) { | ||
| fixedTables[place].ui.table.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(0,-" + (scrollContainer.scrollTop) + "px,0)"; | ||
| } | ||
| })), | ||
| // 同步表格的 hover 状态 | ||
| addEvent(this.el, 'mouseover', function (e) { | ||
| var tr = closest.call(e.target, '.datagrid tbody tr'); | ||
| if (!tr) | ||
| { return; } | ||
| var trs = tr.parentElement.children; | ||
| var ref = this$1; | ||
| var lastHoverIndex = ref.lastHoverIndex; | ||
| var index = indexOf.call(trs, tr); | ||
| if (lastHoverIndex === index) | ||
| { return; } | ||
| this$1.lastHoverIndex = index; | ||
| var setHover = function (grid) { | ||
| var trs = grid.ui.tbody.children; | ||
| var lastHoverTr = trs[lastHoverIndex]; | ||
| if (lastHoverTr) { | ||
| lastHoverTr.classList.remove('hover-row'); | ||
| var ref$1 = this; | ||
| var el = ref$1.el; | ||
| this.fixedTableEvents = [ | ||
| // 同步表格的滚动条位置 | ||
| addEvent(scrollContainer, 'scroll', rafThrottle(function () { | ||
| var ref = this$1; | ||
| var fixedTables = ref.fixedTables; | ||
| if (!fixedTables) | ||
| { return; } | ||
| for (var place in fixedTables) { | ||
| fixedTables[place].ui.table.style[ | ||
| // @ts-ignore | ||
| getCSSProperty('transform')] = "translate3d(0,-" + (scrollContainer.scrollTop) + "px,0)"; | ||
| } | ||
| trs[index].classList.add('hover-row'); | ||
| }; | ||
| setHover(this$1); | ||
| var ref$1 = this$1; | ||
| var children = ref$1.children; | ||
| if (children) { | ||
| children.forEach(setHover); | ||
| } | ||
| })); | ||
| })), | ||
| // 同步表格的 hover 状态 | ||
| addEvent(el, 'mouseover', function (e) { | ||
| var tr = closest(e.target, '.datagrid tbody tr', el); | ||
| if (!tr) | ||
| { return; } | ||
| var trs = tr.parentElement.children; | ||
| var ref = this$1; | ||
| var lastHoverIndex = ref.lastHoverIndex; | ||
| var index = indexOf.call(trs, tr); | ||
| if (lastHoverIndex === index) | ||
| { return; } | ||
| this$1.lastHoverIndex = index; | ||
| var setHover = function (grid) { | ||
| var trs = grid.ui.tbody.children; | ||
| var lastHoverTr = trs[lastHoverIndex]; | ||
| if (lastHoverTr) { | ||
| lastHoverTr.classList.remove('hover-row'); | ||
| } | ||
| trs[index].classList.add('hover-row'); | ||
| }; | ||
| setHover(this$1); | ||
| var ref$1 = this$1; | ||
| var children = ref$1.children; | ||
| if (children) { | ||
| children.forEach(setHover); | ||
| } | ||
| }) | ||
| ]; | ||
| } | ||
@@ -585,2 +615,12 @@ } | ||
| }; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var fixedTableEvents = ref.fixedTableEvents; | ||
| if (fixedTableEvents) | ||
| { fixedTableEvents.forEach(function (fn) { return fn(); }); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| /** | ||
@@ -591,3 +631,3 @@ * 创建固定在两侧的表格实例的方法。 | ||
| anonymous.prototype.createFixedGrid = function createFixedGrid (place) { | ||
| var innerTable = new this.constructor(Object.assign({ | ||
| var innerTable = new this.constructor(assign({ | ||
| parent: this | ||
@@ -613,5 +653,2 @@ }, this.options)); | ||
| /* tslint:enable:no-unused-variable */ | ||
| // const DESC = -1, // 降序 | ||
| // ASC = 1, // 升序 | ||
| // NONE = 0 // 不排序 | ||
| var orderLength = 3; | ||
@@ -633,3 +670,3 @@ var ref$2 = Array.prototype; | ||
| var span = document.createElement('span'); | ||
| Object.assign(span, element); | ||
| assign(span, element); | ||
| fd.appendChild(span); | ||
@@ -665,4 +702,6 @@ }); | ||
| if (!this.parent) { | ||
| addEvent(this.el, 'click', function (e) { | ||
| var th = closest.call(e.target, '.datagrid th'); | ||
| var ref = this; | ||
| var el = ref.el; | ||
| this.clickEventHandler = addEvent(el, 'click', function (e) { | ||
| var th = closest(e.target, '.datagrid th', el); | ||
| if (!th) | ||
@@ -673,3 +712,3 @@ { return; } | ||
| var newSortColumnIndex; | ||
| var isRightFixed = closest.call(th, '.fixed-grid-right'); | ||
| var isRightFixed = closest(th, '.fixed-grid-right', el); | ||
| if (isRightFixed) { | ||
@@ -736,3 +775,13 @@ newSortColumnIndex = | ||
| anonymous.prototype.constructor = anonymous; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var clickEventHandler = ref.clickEventHandler; | ||
| if (clickEventHandler) | ||
| { clickEventHandler(); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| return anonymous; | ||
@@ -753,4 +802,6 @@ }(Base)); | ||
| if (!this.parent) { | ||
| addEvent(this.el, 'click', function (e) { | ||
| var tr = closest.call(e.target, '.datagrid tbody tr'); | ||
| var ref = this; | ||
| var el = ref.el; | ||
| this.ch = addEvent(el, 'click', function (e) { | ||
| var tr = closest(e.target, '.datagrid tbody tr', el); | ||
| if (!tr) | ||
@@ -787,3 +838,13 @@ { return; } | ||
| anonymous.prototype.constructor = anonymous; | ||
| anonymous.prototype.destroy = function destroy () { | ||
| var args = [], len = arguments.length; | ||
| while ( len-- ) args[ len ] = arguments[ len ]; | ||
| var ref = this; | ||
| var ch = ref.ch; | ||
| if (ch) | ||
| { ch(); } | ||
| Base.prototype.destroy.apply(this, args); | ||
| }; | ||
| return anonymous; | ||
@@ -790,0 +851,0 @@ }(Base)); |
| { | ||
| "name": "datagrid", | ||
| "version": "0.4.1", | ||
| "version": "0.4.2", | ||
| "description": "插件式表格组件。", | ||
@@ -22,3 +22,3 @@ "repository": { | ||
| "build": "node build/build.js", | ||
| "prepublishOnly": "npm run lint && npm run build" | ||
| "prepublishOnly": "npm run lint && npm run build && node build/gh-pages.js" | ||
| }, | ||
@@ -32,2 +32,3 @@ "dependencies": { | ||
| "fs-extra": "^4.0.2", | ||
| "gh-pages": "^1.1.0", | ||
| "postcss-cssnext": "^3.0.2", | ||
@@ -34,0 +35,0 @@ "rollup": "^0.50.1", |
| # DataGrid | ||
| 原生 JavaScript 开发的插件式表格组件。 | ||
| 插件式表格组件。[查看在线示例](https://lmk123.github.io/datagrid/) | ||
@@ -127,7 +127,7 @@ ## 安装 | ||
| ### showModal(msg: string = '暂无数据') | ||
| #### showModal(msg: string = '暂无数据') | ||
| 显示一段消息，默认会显示“暂无数据”，消息中可以包含 HTML 标签。 | ||
| ### hideModal() | ||
| #### hideModal() | ||
@@ -166,5 +166,5 @@ 隐藏消息。 | ||
| 从主表格同步表头的宽度、高度等状态。调用 `setData` 方法后会自动运行这个方法，染如果在其他情况下修改了主表格的状态，可以手动调用此方法同步到固定表头。 | ||
| 从主表格同步表头的宽度、高度等状态。调用 `setData` 方法后会自动运行这个方法，但如果在其他情况下修改了主表格的状态，可以手动调用此方法同步到固定表头。 | ||
| #### selection 插件 | ||
| ### selection 插件 | ||
@@ -185,3 +185,3 @@ 让表格行可以被单选。selection 插件没有给 BaseGrid 添加任何设置、属性和方法，但当用户选中了一行数据时，会触发 BaseGrid 的 `select` 事件，参数是选中行的索引号。 | ||
| #### sort 插件 | ||
| ### sort 插件 | ||
@@ -188,0 +188,0 @@ sort 插件会在用户点击表头时触发事件，并在表头右侧显示正确方向的箭头。 |
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
- Total package byte prevSize
- increased by6.41%
133254
- Number of package files
- increased by5.88%
18
- Lines of code
- increased by7.43%
2748
Worsened metrics
- Dev dependency count
- increased by5.56%
19
No dependency changes