Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
datagrid - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
@@ -382,3 +382,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| return columnsDef.map(function (columnDef, index) { | ||
| let content | ||
| var content | ||
| if (customRenderer) { | ||
@@ -429,3 +429,3 @@ content = customRenderer(columnDef) | ||
| columnsDef.forEach(function (columnDef, columnIndex) { | ||
| let content | ||
| var content | ||
| if (customRenderer) { | ||
@@ -432,0 +432,0 @@ content = customRenderer(columnDef, row) |
@@ -1,1142 +0,1 @@ | ||
| (function webpackUniversalModuleDefinition(root, factory) { | ||
| if(typeof exports === 'object' && typeof module === 'object') | ||
| module.exports = factory(); | ||
| else if(typeof define === 'function' && define.amd) | ||
| define([], factory); | ||
| else if(typeof exports === 'object') | ||
| exports["Datagrid"] = factory(); | ||
| else | ||
| root["Datagrid"] = factory(); | ||
| })(this, function() { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
| /******/ // The module cache | ||
| /******/ var installedModules = {}; | ||
| /******/ | ||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
| /******/ | ||
| /******/ // Check if module is in cache | ||
| /******/ if(installedModules[moduleId]) | ||
| /******/ return installedModules[moduleId].exports; | ||
| /******/ | ||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = installedModules[moduleId] = { | ||
| /******/ exports: {}, | ||
| /******/ id: moduleId, | ||
| /******/ loaded: false | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // Execute the module function | ||
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
| /******/ | ||
| /******/ // Flag the module as loaded | ||
| /******/ module.loaded = true; | ||
| /******/ | ||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
| /******/ | ||
| /******/ | ||
| /******/ // expose the modules object (__webpack_modules__) | ||
| /******/ __webpack_require__.m = modules; | ||
| /******/ | ||
| /******/ // expose the module cache | ||
| /******/ __webpack_require__.c = installedModules; | ||
| /******/ | ||
| /******/ // __webpack_public_path__ | ||
| /******/ __webpack_require__.p = ""; | ||
| /******/ | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(0); | ||
| /******/ }) | ||
| /************************************************************************/ | ||
| /******/ ((function(modules) { | ||
| // Check all modules for deduplicated modules | ||
| for(var i in modules) { | ||
| if(Object.prototype.hasOwnProperty.call(modules, i)) { | ||
| switch(typeof modules[i]) { | ||
| case "function": break; | ||
| case "object": | ||
| // Module can be created from a template | ||
| modules[i] = (function(_m) { | ||
| var args = _m.slice(1), fn = modules[_m[0]]; | ||
| return function (a,b,c) { | ||
| fn.apply(this, [a,b,c].concat(args)); | ||
| }; | ||
| }(modules[i])); | ||
| break; | ||
| default: | ||
| // Module is a copy of another module | ||
| modules[i] = modules[modules[i]]; | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| return modules; | ||
| }([ | ||
| /* 0 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| module.exports = __webpack_require__(11) | ||
| module.exports.Selection = __webpack_require__(15) | ||
| module.exports.Paging = __webpack_require__(14) | ||
| module.exports.Sorting = __webpack_require__(16) | ||
| module.exports.ColumnMove = __webpack_require__(12) | ||
| module.exports.ColumnFixed = __webpack_require__(13) | ||
| /***/ }, | ||
| /* 1 */ | ||
| /***/ function(module, exports) { | ||
| /** | ||
| * 给元素注册事件, 并返回一个函数用于解绑事件 | ||
| * @param {EventTarget} element | ||
| * @param {String} eventName | ||
| * @param {Function} handler | ||
| * @param {Boolean} [useCapture] | ||
| * @return {function()} | ||
| */ | ||
| module.exports = function (element, eventName, handler, useCapture) { | ||
| element.addEventListener(eventName, handler, useCapture) | ||
| return function () { | ||
| element.removeEventListener(eventName, handler, useCapture) | ||
| } | ||
| } | ||
| /***/ }, | ||
| /* 2 */ | ||
| /***/ function(module, exports) { | ||
| /** | ||
| * 寻找一个元素指定名称的父元素 | ||
| * @param {String} tagName - 要寻找的元素名 | ||
| * @param {HTMLElement} node - 从哪个元素开始寻找 | ||
| * @param {HTMLElement} [stop] - 碰到这个元素时停止查找 | ||
| * @return {null|HTMLElement} | ||
| */ | ||
| module.exports = function (tagName, node, stop) { | ||
| if (!stop) stop = document.body | ||
| var tag = tagName.toUpperCase() | ||
| var parent = node | ||
| var tr = null | ||
| do { | ||
| if (parent.tagName === tag) { | ||
| tr = parent | ||
| break | ||
| } | ||
| } while (parent !== stop && (parent = parent.parentElement)) | ||
| return tr | ||
| } | ||
| /***/ }, | ||
| /* 3 */ | ||
| /***/ function(module, exports) { | ||
| // removed by extract-text-webpack-plugin | ||
| /***/ }, | ||
| /* 4 */ | ||
| 3, | ||
| /* 5 */ | ||
| 3, | ||
| /* 6 */ | ||
| 3, | ||
| /* 7 */ | ||
| 3, | ||
| /* 8 */ | ||
| 3, | ||
| /* 9 */ | ||
| /***/ function(module, exports) { | ||
| module.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> "; | ||
| /***/ }, | ||
| /* 10 */ | ||
| /***/ function(module, exports) { | ||
| module.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> "; | ||
| /***/ }, | ||
| /* 11 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| __webpack_require__(3) | ||
| var containerTemplate = __webpack_require__(9) | ||
| var Event = __webpack_require__(17) | ||
| var addEvent = __webpack_require__(1) | ||
| var extend = __webpack_require__(19) | ||
| var findParent = __webpack_require__(2) | ||
| var debounce = __webpack_require__(18) | ||
| var DefaultWidth = 100 | ||
| function defaultThRenderer (columnDef) { | ||
| return columnDef.name | ||
| } | ||
| function defaultTdRenderer (columnDef, rowData) { | ||
| return rowData[columnDef.key] | ||
| } | ||
| var hooks = [] | ||
| /** | ||
| * 构造函数 | ||
| * @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 (false) { | ||
| if (!ele.parentElement) { | ||
| throw new Error('Element must have a parentElement') | ||
| } | ||
| } | ||
| // 从 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 (false) { | ||
| if (typeof plugin !== 'function') { | ||
| throw new TypeError('.use(plugin) 参数类型错误: plugin 必需是一个函数。') | ||
| } | ||
| if (plugin._installed) return | ||
| plugin._installed = true | ||
| } | ||
| plugin(DataGrid) | ||
| } | ||
| /** | ||
| * 每次创建新的实例时都会触发这个函数 | ||
| * @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) | ||
| } | ||
| } | ||
| var dp = DataGrid.prototype = Object.create(Event.prototype) | ||
| dp.constructor = DataGrid | ||
| dp._init = function () { | ||
| var _unbindEvents = this._unbindEvents = [] | ||
| this.emit('beforeInit') | ||
| var el = this.el | ||
| el.classList.add('datagrid') | ||
| el.innerHTML = containerTemplate | ||
| 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' | ||
| }), | ||
| // 鼠标移入或移出的时候，给 tr 加上 hover 状态。 | ||
| // 之所以不用 css 实现，是因为 fixedGrid 需要能用 js 设置 tr 的 hover 状态 | ||
| 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)) | ||
| } | ||
| }), | ||
| // 点击 cell 的时候给出一个事件 | ||
| addEvent(ui.$bodyWrapper, 'click', function (e) { | ||
| var td = findParent('td', e.target) | ||
| if (!td) return | ||
| var tr = findParent('tr', td) | ||
| if (!tr) return | ||
| var tdIndex = td.getAttribute('data-index') | ||
| var trIndex = tr.getAttribute('data-index') | ||
| var renderData = that.renderData | ||
| that.emit('cellClick', renderData.columnsDef[tdIndex], that.empty ? null : renderData.rows[trIndex]) | ||
| }) | ||
| ) | ||
| this.ui = ui | ||
| if (this.options.fit) { | ||
| _unbindEvents.push( | ||
| addEvent(window, 'resize', debounce(function () { | ||
| that.setWidth() | ||
| })) | ||
| ) | ||
| } | ||
| this.emit('afterInit') | ||
| } | ||
| /** | ||
| * 处理 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]) | ||
| } | ||
| /** | ||
| * 给表格填充数据 | ||
| * @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 | ||
| } | ||
| /** | ||
| * 设置宽度。 | ||
| * 默认情况下，用户设置的宽度会成为最终字段的宽度， | ||
| * 但如果 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) | ||
| } | ||
| 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 { | ||
| 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) | ||
| } | ||
| /** | ||
| * 计算出表格的 col 元素的 HTML | ||
| * @param {Number[]} columnsWidth - 定义字段宽度的数组 | ||
| * @private | ||
| * @return {String[]} | ||
| */ | ||
| dp._colGroupsHTML = function (columnsWidth) { | ||
| return columnsWidth ? columnsWidth.map(function (width) { return '<col style="width:' + width + 'px">' }) : [] | ||
| } | ||
| /** | ||
| * 填充 colsHTML | ||
| * @param {String[]} colsHTML | ||
| * @private | ||
| */ | ||
| dp._renderCols = function (colsHTML) { | ||
| var ui = this.ui | ||
| ui.$columnsColGroup.innerHTML = ui.$bodyColGroup.innerHTML = colsHTML.join('') | ||
| } | ||
| /** | ||
| * 调整各种尺寸 | ||
| * @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') | ||
| } | ||
| } | ||
| /** | ||
| * 渲染表头的方法 | ||
| * @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 columns | ||
| * @private | ||
| */ | ||
| dp._normalize = function (columns) { | ||
| return columns.map(function (columnDef) { | ||
| var _def = typeof columnDef === 'string' | ||
| ? { name: columnDef } | ||
| : columnDef | ||
| if (!_def.key) _def.key = _def.name | ||
| return _def | ||
| }) | ||
| } | ||
| /** | ||
| * 计算出渲染表头字段的 HTML | ||
| * @private | ||
| */ | ||
| dp._columnsHTML = function (columnsDef) { | ||
| var customRenderer = this.options.thRenderer | ||
| return columnsDef.map(function (columnDef, index) { | ||
| let content | ||
| if (customRenderer) { | ||
| content = customRenderer(columnDef) | ||
| } | ||
| if (content == null) { | ||
| if (columnDef.thRenderer) { | ||
| content = columnDef.thRenderer(columnDef) | ||
| } | ||
| if (content == null) { | ||
| content = defaultThRenderer(columnDef) | ||
| } | ||
| } | ||
| return '<th data-index="' + index + '">' + content + '</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) { | ||
| var customRenderer = this.options.tdRenderer | ||
| return this.empty ? [] : rows.map(function (row, rowIndex) { | ||
| var rowHTML = '<tr data-index="' + rowIndex + '">' | ||
| columnsDef.forEach(function (columnDef, columnIndex) { | ||
| let content | ||
| if (customRenderer) { | ||
| content = customRenderer(columnDef, row) | ||
| } | ||
| if (content == null) { | ||
| if (columnDef.tdRenderer) { | ||
| content = columnDef.tdRenderer(columnDef, row) | ||
| } | ||
| if (content == null) { | ||
| content = defaultTdRenderer(columnDef, row) | ||
| } | ||
| } | ||
| rowHTML += '<td data-index="' + columnIndex + '">' + content + '</td>' | ||
| }) | ||
| rowHTML += '</tr>' | ||
| return rowHTML | ||
| }) | ||
| } | ||
| /** | ||
| * 渲染数据 | ||
| * @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') | ||
| } | ||
| /** | ||
| * 销毁实例 | ||
| */ | ||
| 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') | ||
| } | ||
| module.exports = DataGrid | ||
| /***/ }, | ||
| /* 12 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| __webpack_require__(4) | ||
| var addEvent = __webpack_require__(1) | ||
| var findParent = __webpack_require__(2) | ||
| var MIN_WIDTH = 100 // 表格的最小宽度 | ||
| var indexOf = Array.prototype.indexOf | ||
| var IS_TOUCH = 'ontouchstart' in window | ||
| var MOUSEDOWN = IS_TOUCH ? 'touchstart' : 'mousedown' | ||
| var MOUSEMOVE = IS_TOUCH ? 'touchmove' : 'mousemove' | ||
| var MOUSEUP = IS_TOUCH ? 'touchend' : 'mouseup' | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.columnResize) return | ||
| // 拖动时显示的虚线 | ||
| var dragLine = document.createElement('div') | ||
| dragLine.classList.add('dragging-line') | ||
| var unbindEvents = [] | ||
| // 注入虚线 | ||
| datagrid.once('afterInit', function () { | ||
| datagrid.ui.$draggingLine = dragLine | ||
| datagrid.el.appendChild(dragLine) | ||
| }) | ||
| var dragging = false // 是否正在拖动中 | ||
| var draggingLever // 被拖动的那个小方块 | ||
| var draggingTH // 被拖动的 th 元素 | ||
| var draggingColumnIndex // 被拖动的元素是第几个字段 | ||
| var startX // 拖动开始时的 pageX 值 | ||
| var draggingLineInitLeft // 拖动开始时虚线的左编剧 | ||
| var minLeft // 当往左边拖动时能拖动的最大距离 | ||
| unbindEvents.push( | ||
| // 注入供用户拖拽的小方块 | ||
| 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, function (e) { | ||
| if (e.target.classList.contains('drag-lever') && e.button === 0) { | ||
| var th = findParent('th', e.target, datagrid.el) | ||
| if (!th) return | ||
| // 给 th 加一个状态, 避免触发排序功能 | ||
| // todo 需要一个临时关闭排序的开关 | ||
| th.classList.add('resizing') | ||
| draggingTH = th | ||
| minLeft = -(th.clientWidth - MIN_WIDTH) | ||
| var ui = datagrid.ui | ||
| var $columnsWrapper = ui.$columnsWrapper | ||
| var $bodyWrapper = ui.$bodyWrapper | ||
| // 显示虚线 | ||
| dragLine.style.height = $columnsWrapper.offsetHeight + $bodyWrapper.offsetHeight + 'px' | ||
| draggingLineInitLeft = th.offsetLeft + th.clientWidth - $bodyWrapper.scrollLeft | ||
| dragLine.style.left = draggingLineInitLeft + 'px' | ||
| dragLine.classList.add('show') | ||
| dragging = true | ||
| draggingLever = e.target | ||
| draggingLever.classList.add('dragging') | ||
| startX = e.pageX | ||
| draggingColumnIndex = indexOf.call(th.parentElement.children, th) | ||
| } | ||
| }), | ||
| addEvent(document, MOUSEMOVE, function (e) { | ||
| if (!dragging) return | ||
| e.preventDefault() // 阻止在 PC 端拖动鼠标时选中文字或在移动端滑动屏幕 | ||
| // 调整虚线的 left 值 | ||
| var moved = e.pageX - startX | ||
| if (moved > minLeft) { | ||
| dragLine.style.left = draggingLineInitLeft + (e.pageX - startX) + 'px' | ||
| } | ||
| }), | ||
| addEvent(document, MOUSEUP, function (e) { | ||
| if (!dragging) return | ||
| // 等 ../sort/index.js 里的 click 事件处理完后再移除这个 CSS 类 | ||
| setTimeout(function () { draggingTH.classList.remove('resizing') }, 0) | ||
| dragLine.classList.remove('show') | ||
| dragging = false | ||
| draggingLever.classList.remove('dragging') | ||
| var moved = e.pageX - startX // 计算移动的距离 | ||
| if (moved < minLeft) moved = minLeft | ||
| var columnsMinWidth = datagrid.renderData.columnsMinWidth | ||
| columnsMinWidth[draggingColumnIndex] = columnsMinWidth[draggingColumnIndex] + moved | ||
| datagrid.setWidth(columnsMinWidth) | ||
| }) | ||
| ) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { unbind() }) | ||
| }) | ||
| }) | ||
| } | ||
| /***/ }, | ||
| /* 13 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| __webpack_require__(5) | ||
| var addEvent = __webpack_require__(1) | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.fixedColumns) return | ||
| var unbindEvents = [] | ||
| var fixedDataGrid | ||
| datagrid.on('afterSetData', function (data) { | ||
| var fixedColumnsLeft = data.fixedColumnsLeft | ||
| if (!fixedColumnsLeft) { | ||
| if (fixedDataGrid) fixedDataGrid.el.classList.add('hidden') | ||
| return | ||
| } | ||
| if (!fixedDataGrid) initFixedDataGrid(datagrid.el) | ||
| fixedDataGrid.el.classList.remove('hidden') | ||
| fixedDataGrid.setData({ | ||
| columns: datagrid.renderData.columnsDef.slice(0, fixedColumnsLeft), | ||
| width: datagrid.renderData.columnsWidth.slice(0, fixedColumnsLeft), | ||
| rows: datagrid.renderData.rows | ||
| }) | ||
| }) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { | ||
| unbind() | ||
| }) | ||
| }) | ||
| function initFixedDataGrid () { | ||
| var datagridContainer = document.createElement('div') | ||
| datagridContainer.classList.add('fixed-datagrid') | ||
| var div = document.createElement('div') | ||
| div.classList.add('hidden') | ||
| datagridContainer.appendChild(div) | ||
| datagrid.el.appendChild(datagridContainer) | ||
| fixedDataGrid = new DataGrid(div, { | ||
| height: datagrid.ui.$columnsWrapper.offsetHeight + datagrid.ui.$bodyWrapper.offsetHeight, | ||
| columnSorting: datagrid.options.columnSorting, | ||
| columnResize: datagrid.options.columnResize, | ||
| selection: datagrid.options.selection | ||
| }) | ||
| // 修改一个元素的 scrollTop 属性值会触发这个元素的 onscroll 事件， | ||
| // 为了避免两个 datagrid 相互之间循环触发 onscroll 事件， | ||
| // 所以加了下面的一堆标识位。 | ||
| // 循环触发 onscroll 事件会导致在快速滑动时两个表格的 scrollTop 不同步， | ||
| // 造成"撕裂"现象 | ||
| var dataGridBodyScrolling = false | ||
| var dataGridBodyScrollingTimeId | ||
| var fixedDataGridBodyScrolling = false | ||
| var fixedDataGridBodyScrollingTimeId | ||
| unbindEvents.push( | ||
| 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', function (index) { | ||
| fixedDataGrid.selectRow(index, false) | ||
| }) | ||
| fixedDataGrid.on('selectedChanged', function (index) { | ||
| datagrid.selectRow(index) | ||
| }) | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| /***/ }, | ||
| /* 14 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| __webpack_require__(6) | ||
| var pagerTemplate = __webpack_require__(10) | ||
| var addEvent = __webpack_require__(1) | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.pagination) return | ||
| var pagingTemplate = datagrid.options.pagingTemplate || pagerTemplate | ||
| function jumpTo (pageNo) { | ||
| if (Number.isNaN(pageNo) || pageNo < 1 || pageNo > pager.totalPage) { | ||
| wrapper.querySelector('[data-page]').value = pager.cur | ||
| return | ||
| } | ||
| wrapper.querySelector('[data-page]').value = pager.cur = pageNo | ||
| datagrid.emit('switchPage', pageNo) | ||
| } | ||
| var pager = datagrid.pager = { | ||
| cur: 1, // 当前页数 | ||
| total: null, // 总共有多少条记录 | ||
| size: null, // 每一页有多少条记录 | ||
| start: null, // 当前页的数据是从第几条开始的 | ||
| end: null, // 当前页的数据是在第几条结束的 | ||
| totalPage: null // 一共有多少页 | ||
| } | ||
| var unbindEvents = [] | ||
| var wrapper = document.createElement('div') | ||
| wrapper.classList.add('grid-pager-wrapper') | ||
| unbindEvents.push( | ||
| addEvent(wrapper, 'click', function (e) { | ||
| var jump = e.target.dataset.jump | ||
| if (!jump) return | ||
| var pageTo | ||
| switch (jump) { | ||
| case 'first': | ||
| pageTo = 1 | ||
| break | ||
| case 'end': | ||
| pageTo = pager.totalPage | ||
| break | ||
| case 'prev': | ||
| pageTo = pager.cur - 1 | ||
| break | ||
| case 'next': | ||
| pageTo = pager.cur + 1 | ||
| break | ||
| default: | ||
| return | ||
| } | ||
| jumpTo(pageTo) | ||
| }), | ||
| addEvent(wrapper, 'keydown', function (e) { | ||
| if (e.keyCode !== 13) return | ||
| if (e.target.dataset.page === undefined) return | ||
| jumpTo(Number(e.target.value)) | ||
| }), | ||
| datagrid.on('beforeSetData', function (data) { | ||
| if (!data.rows || !data.rows.length) { | ||
| wrapper.classList.add('hidden') | ||
| return | ||
| } | ||
| var size = data.size || 0 | ||
| var total = data.total || 0 | ||
| var cur = pager.cur | ||
| var dataLength = data.rows.length | ||
| pager.total = total | ||
| pager.size = size | ||
| pager.start = (cur - 1) * size + 1 | ||
| pager.end = pager.start + dataLength - 1 | ||
| pager.total = total | ||
| pager.totalPage = Math.ceil(total / size) || 0 | ||
| wrapper.innerHTML = pagingTemplate.replace(/\{\{(\w+)\}\}/g, function (word, group) { | ||
| return pager.hasOwnProperty(group) ? pager[group] : word | ||
| }) | ||
| wrapper.classList.remove('hidden') | ||
| }) | ||
| ) | ||
| datagrid.once('afterInit', function () { | ||
| datagrid.ui.$gridWrapper.appendChild(wrapper) | ||
| datagrid.ui.$pagerWrapper = wrapper | ||
| }) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { unbind() }) | ||
| }) | ||
| }) | ||
| } | ||
| /***/ }, | ||
| /* 15 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| __webpack_require__(7) | ||
| var findParent = __webpack_require__(2) | ||
| var addEvent = __webpack_require__(1) | ||
| 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 | ||
| var selectedTR = $body.querySelector('tr.selected') | ||
| if (selectedTR) selectedTR.classList.remove('selected') | ||
| tr.classList.add('selected') | ||
| this._selectRowIndex = index | ||
| if (fire !== false) this.emit('selectedChanged', index) | ||
| } | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.selection) return | ||
| var unbindEvents = [] | ||
| unbindEvents.push(datagrid.on('beforeSetData', function () { | ||
| datagrid._selectRowIndex = null | ||
| })) | ||
| datagrid.once('afterInit', function () { | ||
| var $body = datagrid.ui.$body | ||
| // 点击数据行时, 给出事件提示 | ||
| unbindEvents.push(addEvent($body, 'click', function (e) { | ||
| var tr = findParent('tr', e.target, $body) | ||
| if (!tr) return | ||
| 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() | ||
| }) | ||
| }) | ||
| }) | ||
| } | ||
| /***/ }, | ||
| /* 16 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| __webpack_require__(8) | ||
| var findParent = __webpack_require__(2) | ||
| var addEvent = __webpack_require__(1) | ||
| var indexOf = Array.prototype.indexOf | ||
| var DESC = -1 // 降序 | ||
| var ASC = 1 // 升序 | ||
| var NONE_ORDER = 0 // 不排序 | ||
| var CLASS_ASC = 'order-by-asc' | ||
| var CLASS_DESC = 'order-by-desc' | ||
| module.exports = function (DataGrid) { | ||
| DataGrid.hook(function (datagrid) { | ||
| if (!datagrid.options.columnSorting) return | ||
| var unbindEvents = [] | ||
| var lastSortColumnIndex | ||
| var sortType = NONE_ORDER | ||
| unbindEvents.push( | ||
| // 给每个字段内部注入小箭头 | ||
| datagrid.on('beforeRenderColumns', function (columnsHTMLArr) { | ||
| columnsHTMLArr.forEach(function (html, index) { | ||
| columnsHTMLArr[index] = html.replace('</th>', '<span class="order-ico"></span></th>') | ||
| }) | ||
| }) | ||
| ) | ||
| function clearLastSort () { | ||
| if (typeof lastSortColumnIndex === 'number') { | ||
| var lastTH = datagrid.ui.$columnsWrapper.querySelector('th:nth-child(' + (lastSortColumnIndex + 1) + ')') | ||
| if (lastTH) lastTH.classList.remove(CLASS_ASC, CLASS_DESC) | ||
| } | ||
| } | ||
| datagrid.once('afterInit', function () { | ||
| // 监听字段的点击事件 | ||
| var $columnsWrapper = datagrid.ui.$columnsWrapper | ||
| unbindEvents.push( | ||
| addEvent($columnsWrapper, 'click', function (e) { | ||
| var th = findParent('th', e.target, $columnsWrapper) | ||
| if (!th) return | ||
| if (th.classList.contains('resizing')) return | ||
| var index = indexOf.call(th.parentElement.children, th) | ||
| var columnDef = datagrid.renderData.columnsDef[index] | ||
| if (columnDef.sortable === false) return | ||
| if (index !== lastSortColumnIndex) { | ||
| clearLastSort() | ||
| lastSortColumnIndex = index | ||
| sortType = NONE_ORDER | ||
| } | ||
| th.classList.remove(CLASS_ASC, CLASS_DESC) | ||
| switch (sortType) { | ||
| case NONE_ORDER: | ||
| sortType = ASC | ||
| th.classList.add(CLASS_ASC) | ||
| break | ||
| case ASC: | ||
| sortType = DESC | ||
| th.classList.add(CLASS_DESC) | ||
| break | ||
| case DESC: | ||
| sortType = NONE_ORDER | ||
| break | ||
| } | ||
| datagrid.emit('sort', columnDef, sortType, th) | ||
| }) | ||
| ) | ||
| }) | ||
| datagrid.once('beforeDestroy', function () { | ||
| unbindEvents.forEach(function (unbind) { unbind() }) | ||
| }) | ||
| }) | ||
| } | ||
| /***/ }, | ||
| /* 17 */ | ||
| /***/ function(module, exports) { | ||
| var slice = Array.prototype.slice | ||
| function MyEvent () { | ||
| this._callbacks = {} | ||
| } | ||
| var p = MyEvent.prototype | ||
| /** | ||
| * 注册事件监听函数 | ||
| * @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) | ||
| } | ||
| } | ||
| /** | ||
| * 注册事件监听函数, 但只监听一次 | ||
| * @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 | ||
| /***/ }, | ||
| /* 18 */ | ||
| /***/ function(module, exports) { | ||
| /** | ||
| * 返回一个延迟执行的函数 | ||
| * @param {Function} fn | ||
| * @param {Number} [timeout] | ||
| * @return {Function} | ||
| */ | ||
| module.exports = function (fn, timeout) { | ||
| var timeId | ||
| timeout = typeof timeout === 'number' ? timeout : 250 | ||
| return function () { | ||
| if (typeof timeId === 'number') window.clearTimeout(timeId) | ||
| var args = arguments | ||
| timeId = window.setTimeout(function () { | ||
| fn.apply(null, args) | ||
| }, timeout) | ||
| } | ||
| } | ||
| /***/ }, | ||
| /* 19 */ | ||
| /***/ function(module, exports) { | ||
| var has = Object.prototype.hasOwnProperty | ||
| module.exports = function (target) { | ||
| for (var i = 1; i < arguments.length; i += 1) { | ||
| var d = arguments[i] | ||
| if (!d || typeof d !== 'object') continue | ||
| for (var key in d) { | ||
| if (has.call(d, key)) { | ||
| target[key] = d[key] | ||
| } | ||
| } | ||
| } | ||
| return target | ||
| } | ||
| /***/ } | ||
| /******/ ]))) | ||
| }); | ||
| ; | ||
| !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){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,r){return t.addEventListener(e,n,r),function(){t.removeEventListener(e,n,r)}}},function(t,e){t.exports=function(t,e,n){n||(n=document.body);var 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){},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 r(t){return t.name}function o(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 r in n)n[r]=e.querySelector(n[r]);n.$gridWrapper.style.height=this.options.height+"px";var o=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&&o.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&&o.trHover(!1,Number(n))}}),c(n.$bodyWrapper,"click",function(t){var e=d("td",t.target);if(e){var n=d("tr",e);if(n){var r=e.getAttribute("data-index"),i=n.getAttribute("data-index"),a=o.renderData;o.emit("cellClick",a.columnsDef[r],o.empty?null:a.rows[i])}}})),this.ui=n,this.options.fit&&t.push(c(window,"resize",l(function(){o.setWidth()}))),this.emit("afterInit")},h.trHover=function(t,e,n){var r=this.ui.$bodyWrapper.querySelector("tbody"),o=r.querySelector('[data-index="'+e+'"]');o.classList[t?"add":"remove"]("hover"),n!==!1&&this.emit(t?"trHoverTo":"clearHover",e,o,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 r=[],o=0;o<n.length;o++)r[o]=t[o]||Math.max(15*n[o].name.length,p);return r},h.setWidth=function(t){var e=this.renderData;!t&&e.columnsMinWidth||(e.columnsMinWidth=this.normalizeWidth(t));var n,r=e.columnsMinWidth;if(this.options.fit){var o=r.reduce(function(t,e){return t+e}),i=this.ui.$bodyWrapper.clientWidth;if(o>=i)n=r;else{var a=(i-o)/e.columnsDef.length;n=r.map(function(t){return t+a})}}else n=r;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,r=e.$noData,o=e.$body,i=t.reduce(function(t,e){return t+e});n.style.width=o.style.width=i+"px",this.empty?r.classList.remove("hidden"):r.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){var e=this.options.thRenderer;return t.map(function(t,n){var o;return e&&(o=e(t)),null==o&&(t.thRenderer&&(o=t.thRenderer(t)),null==o&&(o=r(t))),'<th data-index="'+n+'">'+o+"</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){var n=this.options.tdRenderer;return this.empty?[]:e.map(function(e,r){var i='<tr data-index="'+r+'">';return t.forEach(function(t,r){var a;n&&(a=n(t,e)),null==a&&(t.tdRenderer&&(a=t.tdRenderer(t,e)),null==a&&(a=o(t,e))),i+='<td data-index="'+r+'">'+a+"</td>"}),i+="</tr>"})},h._renderBody=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"))},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 r=n(1),o=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>')})}),r(t.el,c,function(n){if(n.target.classList.contains("drag-lever")&&0===n.button){var r=o("th",n.target,t.el);if(!r)return;r.classList.add("resizing"),l=r,v=-(r.clientWidth-i);var c=t.ui,u=c.$columnsWrapper,d=c.$bodyWrapper;e.style.height=u.offsetHeight+d.offsetHeight+"px",h=r.offsetLeft+r.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(r.parentElement.children,r)}}),r(document,u,function(t){if(m){t.preventDefault();var n=t.pageX-f;n>v&&(e.style.left=h+(t.pageX-f)+"px")}}),r(document,d,function(n){if(m){setTimeout(function(){l.classList.remove("resizing")},0),e.classList.remove("show"),m=!1,s.classList.remove("dragging");var r=n.pageX-f;r<v&&(r=v);var o=t.renderData.columnsMinWidth;o[p]=o[p]+r,t.setWidth(o)}})),t.once("beforeDestroy",function(){n.forEach(function(t){t()})})}})}},function(t,e,n){n(5);var r=n(1);t.exports=function(t){t.hook(function(e){function n(){function n(t,n){var r=o.el.contains(n)?e:o;r.trHover(!0,t,!1)}function a(t,n){var r=o.el.contains(n)?e:o;r.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),o=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(r(e.ui.$bodyWrapper,"scroll",function(){p||(l=!0,u&&clearTimeout(u),u=setTimeout(function(){l=!1},250),o.ui.$bodyWrapper.scrollTop=this.scrollTop)}),r(o.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),o.on("trHoverTo",n),e.on("clearHover",a),o.on("clearHover",a)),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 o,i=[];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"))}),e.once("beforeDestroy",function(){i.forEach(function(t){t()})})}})}},function(t,e,n){n(6);var r=n(10),o=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||r,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(o(s,"click",function(t){var n=t.target.dataset.jump;if(n){var r;switch(n){case"first":r=1;break;case"end":r=i.totalPage;break;case"prev":r=i.cur-1;break;case"next":r=i.cur+1;break;default:return}e(r)}}),o(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,r=t.total||0,o=i.cur,a=t.rows.length;i.total=r,i.size=e,i.start=(o-1)*e+1,i.end=i.start+a-1,i.total=r,i.totalPage=Math.ceil(r/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 r=n(2),o=n(1);t.exports=function(t){t.prototype.selectRow=function(t,e){var 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!==!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(o(n,"click",function(e){var o=r("tr",e.target,n);if(o){var i=Number(o.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 r=n(2),o=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(o(f,"click",function(o){var l=r("th",o.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 r=Array.prototype.slice,o=n.prototype;o.on=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)}},o.once=function(t,e){var n=this.on(t,function(){e.apply(null,arguments),window.setTimeout(n,0)});return n},o.emit=function(t){var e=this._callbacks[t];if(e&&e.length){var n=r.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 r=arguments;n=window.setTimeout(function(){t.apply(null,r)},e)}}},function(t,e){var n=Object.prototype.hasOwnProperty;t.exports=function(t){for(var e=1;e<arguments.length;e+=1){var r=arguments[e];if(r&&"object"==typeof r)for(var o in r)n.call(r,o)&&(t[o]=r[o])}return t}}]))}); |
| { | ||
| "name": "datagrid", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "description": "Datagrid.", | ||
@@ -5,0 +5,0 @@ "main": "./src/index.js", |
@@ -314,3 +314,3 @@ require('./index.scss') | ||
| return columnsDef.map(function (columnDef, index) { | ||
| let content | ||
| var content | ||
| if (customRenderer) { | ||
@@ -361,3 +361,3 @@ content = customRenderer(columnDef) | ||
| columnsDef.forEach(function (columnDef, columnIndex) { | ||
| let content | ||
| var content | ||
| if (customRenderer) { | ||
@@ -364,0 +364,0 @@ content = customRenderer(columnDef, row) |
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
Worsened metrics
- Total package byte prevSize
- decreased by-19.28%
87651
- Lines of code
- decreased by-33.72%
1960
No dependency changes