Split body rendering code in class BodyRenderer
This commit is contained in:
Faris Ansari
parent
c2a0188fad
commit
344de18c41
File diff suppressed because one or more lines are too long
@ -1338,6 +1338,8 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'refreshHeader',
|
||||
value: function refreshHeader() {
|
||||
var _this = this;
|
||||
|
||||
var columns = this.datamanager.getColumns();
|
||||
|
||||
if (!(0, _dom2.default)('.data-table-col', this.header)) {
|
||||
@ -1351,20 +1353,21 @@ var ColumnManager = function () {
|
||||
(0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
|
||||
return;
|
||||
}
|
||||
// column sorted or order changed
|
||||
// update colIndex of each header cell
|
||||
$cols.map(function ($col, i) {
|
||||
_dom2.default.data($col, {
|
||||
colIndex: columns[i].colIndex
|
||||
});
|
||||
});
|
||||
|
||||
// show sort indicator
|
||||
var sortColIndex = this.datamanager.currentSort.colIndex;
|
||||
if (sortColIndex !== -1) {
|
||||
var order = this.datamanager.currentSort.sortOrder;
|
||||
(0, _dom2.default)('.sort-indicator', $cols[sortColIndex]).innerHTML = this.options.sortIndicator[order];
|
||||
}
|
||||
$cols.map(function ($col, i) {
|
||||
var column = columns[i];
|
||||
// column sorted or order changed
|
||||
// update colIndex of each header cell
|
||||
_dom2.default.data($col, {
|
||||
colIndex: column.colIndex
|
||||
});
|
||||
|
||||
// refresh sort indicator
|
||||
var sortIndicator = (0, _dom2.default)('.sort-indicator', $col);
|
||||
if (sortIndicator) {
|
||||
sortIndicator.innerHTML = _this.options.sortIndicator[column.sortOrder];
|
||||
}
|
||||
});
|
||||
}
|
||||
// reset columnMap
|
||||
this.$columnMap = [];
|
||||
@ -1379,7 +1382,7 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'bindDropdown',
|
||||
value: function bindDropdown() {
|
||||
var _this = this;
|
||||
var _this2 = this;
|
||||
|
||||
var $activeDropdown = void 0;
|
||||
_dom2.default.on(this.header, 'click', '.data-table-dropdown-toggle', function (e, $button) {
|
||||
@ -1412,7 +1415,7 @@ var ColumnManager = function () {
|
||||
|
||||
var callback = dropdownItems[index].action;
|
||||
|
||||
callback && callback.call(_this.instance, _this.getColumn(colIndex));
|
||||
callback && callback.call(_this2.instance, _this2.getColumn(colIndex));
|
||||
});
|
||||
|
||||
function deactivateDropdown(e) {
|
||||
@ -1423,7 +1426,7 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'bindResizeColumn',
|
||||
value: function bindResizeColumn() {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var isDragging = false;
|
||||
var $resizingCell = void 0,
|
||||
@ -1437,7 +1440,7 @@ var ColumnManager = function () {
|
||||
var _$$data3 = _dom2.default.data($resizingCell),
|
||||
colIndex = _$$data3.colIndex;
|
||||
|
||||
var col = _this2.getColumn(colIndex);
|
||||
var col = _this3.getColumn(colIndex);
|
||||
|
||||
if (col && col.resizable === false) {
|
||||
return;
|
||||
@ -1457,8 +1460,8 @@ var ColumnManager = function () {
|
||||
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
|
||||
|
||||
_this2.setColumnWidth(colIndex, width);
|
||||
_this2.instance.setBodyWidth();
|
||||
_this3.setColumnWidth(colIndex, width);
|
||||
_this3.instance.setBodyWidth();
|
||||
$resizingCell = null;
|
||||
});
|
||||
|
||||
@ -1469,18 +1472,18 @@ var ColumnManager = function () {
|
||||
var _$$data5 = _dom2.default.data($resizingCell),
|
||||
colIndex = _$$data5.colIndex;
|
||||
|
||||
if (_this2.getColumnMinWidth(colIndex) > finalWidth) {
|
||||
if (_this3.getColumnMinWidth(colIndex) > finalWidth) {
|
||||
// don't resize past minWidth
|
||||
return;
|
||||
}
|
||||
|
||||
_this2.setColumnHeaderWidth(colIndex, finalWidth);
|
||||
_this3.setColumnHeaderWidth(colIndex, finalWidth);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'bindMoveColumn',
|
||||
value: function bindMoveColumn() {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
var initialized = void 0;
|
||||
|
||||
@ -1489,10 +1492,10 @@ var ColumnManager = function () {
|
||||
_dom2.default.off(document.body, 'mousemove', initialize);
|
||||
return;
|
||||
}
|
||||
var ready = (0, _dom2.default)('.data-table-col', _this3.header);
|
||||
var ready = (0, _dom2.default)('.data-table-col', _this4.header);
|
||||
if (!ready) return;
|
||||
|
||||
var $parent = (0, _dom2.default)('.data-table-row', _this3.header);
|
||||
var $parent = (0, _dom2.default)('.data-table-row', _this4.header);
|
||||
|
||||
_dom2.default.on(document, 'drag', '.data-table-col', (0, _utils.throttle)(function (e, $target) {
|
||||
if (e.offsetY > 200) {
|
||||
@ -1504,7 +1507,7 @@ var ColumnManager = function () {
|
||||
}
|
||||
}));
|
||||
|
||||
_this3.sortable = _sortablejs2.default.create($parent, {
|
||||
_this4.sortable = _sortablejs2.default.create($parent, {
|
||||
onEnd: function onEnd(e) {
|
||||
var oldIndex = e.oldIndex,
|
||||
newIndex = e.newIndex;
|
||||
@ -1516,7 +1519,7 @@ var ColumnManager = function () {
|
||||
|
||||
if (+colIndex === newIndex) return;
|
||||
|
||||
_this3.switchColumn(oldIndex, newIndex);
|
||||
_this4.switchColumn(oldIndex, newIndex);
|
||||
},
|
||||
preventOnFilter: false,
|
||||
filter: '.column-resizer, .data-table-dropdown',
|
||||
@ -1529,7 +1532,7 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'bindSortColumn',
|
||||
value: function bindSortColumn() {
|
||||
var _this4 = this;
|
||||
var _this5 = this;
|
||||
|
||||
_dom2.default.on(this.header, 'click', '.data-table-col .column-title', function (e, span) {
|
||||
var $cell = span.closest('.data-table-col');
|
||||
@ -1539,15 +1542,15 @@ var ColumnManager = function () {
|
||||
sortOrder = _$$data7.sortOrder;
|
||||
|
||||
sortOrder = (0, _utils.getDefault)(sortOrder, 'none');
|
||||
var col = _this4.getColumn(colIndex);
|
||||
var col = _this5.getColumn(colIndex);
|
||||
|
||||
if (col && col.sortable === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
// reset sort indicator
|
||||
(0, _dom2.default)('.sort-indicator', _this4.header).textContent = '';
|
||||
_dom2.default.each('.data-table-col', _this4.header).map(function ($cell) {
|
||||
(0, _dom2.default)('.sort-indicator', _this5.header).textContent = '';
|
||||
_dom2.default.each('.data-table-col', _this5.header).map(function ($cell) {
|
||||
_dom2.default.data($cell, {
|
||||
sortOrder: 'none'
|
||||
});
|
||||
@ -1571,55 +1574,55 @@ var ColumnManager = function () {
|
||||
});
|
||||
(0, _dom2.default)('.sort-indicator', $cell).textContent = textContent;
|
||||
|
||||
_this4.sortColumn(colIndex, nextSortOrder);
|
||||
_this5.sortColumn(colIndex, nextSortOrder);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'sortColumn',
|
||||
value: function sortColumn(colIndex, nextSortOrder) {
|
||||
var _this5 = this;
|
||||
var _this6 = this;
|
||||
|
||||
this.instance.freeze();
|
||||
this.sortRows(colIndex, nextSortOrder).then(function () {
|
||||
_this5.refreshHeader();
|
||||
return _this5.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
return _this5.instance.unfreeze();
|
||||
}).then(function () {
|
||||
_this5.fireEvent('onSortColumn', _this5.getColumn(colIndex));
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'removeColumn',
|
||||
value: function removeColumn(colIndex) {
|
||||
var _this6 = this;
|
||||
|
||||
var removedCol = this.getColumn(colIndex);
|
||||
this.instance.freeze();
|
||||
this.datamanager.removeColumn(colIndex).then(function () {
|
||||
_this6.refreshHeader();
|
||||
return _this6.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
return _this6.instance.unfreeze();
|
||||
}).then(function () {
|
||||
_this6.fireEvent('onRemoveColumn', removedCol);
|
||||
_this6.fireEvent('onSortColumn', _this6.getColumn(colIndex));
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'removeColumn',
|
||||
value: function removeColumn(colIndex) {
|
||||
var _this7 = this;
|
||||
|
||||
var removedCol = this.getColumn(colIndex);
|
||||
this.instance.freeze();
|
||||
this.datamanager.removeColumn(colIndex).then(function () {
|
||||
_this7.refreshHeader();
|
||||
return _this7.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
return _this7.instance.unfreeze();
|
||||
}).then(function () {
|
||||
_this7.fireEvent('onRemoveColumn', removedCol);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'switchColumn',
|
||||
value: function switchColumn(oldIndex, newIndex) {
|
||||
var _this7 = this;
|
||||
var _this8 = this;
|
||||
|
||||
this.instance.freeze();
|
||||
this.datamanager.switchColumn(oldIndex, newIndex).then(function () {
|
||||
_this7.refreshHeader();
|
||||
return _this7.rowmanager.refreshRows();
|
||||
_this8.refreshHeader();
|
||||
return _this8.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
_this7.setColumnWidth(oldIndex);
|
||||
_this7.setColumnWidth(newIndex);
|
||||
_this7.instance.unfreeze();
|
||||
_this8.setColumnWidth(oldIndex);
|
||||
_this8.setColumnWidth(newIndex);
|
||||
_this8.instance.unfreeze();
|
||||
}).then(function () {
|
||||
_this7.fireEvent('onSwitchColumn', _this7.getColumn(oldIndex), _this7.getColumn(newIndex));
|
||||
_this8.fireEvent('onSwitchColumn', _this8.getColumn(oldIndex), _this8.getColumn(newIndex));
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@ -1662,7 +1665,7 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'setupMinWidth',
|
||||
value: function setupMinWidth() {
|
||||
var _this8 = this;
|
||||
var _this9 = this;
|
||||
|
||||
// cache minWidth for each column
|
||||
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
|
||||
@ -1673,16 +1676,16 @@ var ColumnManager = function () {
|
||||
var _$$data8 = _dom2.default.data(col),
|
||||
colIndex = _$$data8.colIndex;
|
||||
|
||||
if (!_this8.minWidthMap[colIndex]) {
|
||||
if (!_this9.minWidthMap[colIndex]) {
|
||||
// only set this once
|
||||
_this8.minWidthMap[colIndex] = width;
|
||||
_this9.minWidthMap[colIndex] = width;
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setNaturalColumnWidth',
|
||||
value: function setNaturalColumnWidth() {
|
||||
var _this9 = this;
|
||||
var _this10 = this;
|
||||
|
||||
// set initial width as naturally calculated by table's first row
|
||||
_dom2.default.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map(function ($cell) {
|
||||
@ -1693,19 +1696,19 @@ var ColumnManager = function () {
|
||||
var _$$data9 = _dom2.default.data($cell),
|
||||
colIndex = _$$data9.colIndex;
|
||||
|
||||
var minWidth = _this9.getColumnMinWidth(colIndex);
|
||||
var minWidth = _this10.getColumnMinWidth(colIndex);
|
||||
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
_this9.setColumnWidth(colIndex, width);
|
||||
_this9.setDefaultCellHeight(height);
|
||||
_this10.setColumnWidth(colIndex, width);
|
||||
_this10.setDefaultCellHeight(height);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'distributeRemainingWidth',
|
||||
value: function distributeRemainingWidth() {
|
||||
var _this10 = this;
|
||||
var _this11 = this;
|
||||
|
||||
if (!this.options.takeAvailableSpace) return;
|
||||
|
||||
@ -1724,11 +1727,11 @@ var ColumnManager = function () {
|
||||
var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
|
||||
|
||||
resizableColumns.map(function (col) {
|
||||
var width = _dom2.default.style(_this10.getColumnHeaderElement(col.colIndex), 'width');
|
||||
var width = _dom2.default.style(_this11.getColumnHeaderElement(col.colIndex), 'width');
|
||||
var finalWidth = Math.min(width + deltaWidth) - 2;
|
||||
|
||||
_this10.setColumnHeaderWidth(col.colIndex, finalWidth);
|
||||
_this10.setColumnWidth(col.colIndex, finalWidth);
|
||||
_this11.setColumnHeaderWidth(col.colIndex, finalWidth);
|
||||
_this11.setColumnWidth(col.colIndex, finalWidth);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
}
|
||||
@ -1742,12 +1745,12 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'setColumnAlignments',
|
||||
value: function setColumnAlignments() {
|
||||
var _this11 = this;
|
||||
var _this12 = this;
|
||||
|
||||
// align columns
|
||||
this.getColumns().map(function (column) {
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
_this11.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
|
||||
_this12.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
@ -2119,16 +2122,10 @@ Object.defineProperty(exports, "__esModule", {
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
exports.getBodyHTML = getBodyHTML;
|
||||
|
||||
var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _clusterize = __webpack_require__(7);
|
||||
|
||||
var _clusterize2 = _interopRequireDefault(_clusterize);
|
||||
|
||||
var _datamanager = __webpack_require__(8);
|
||||
|
||||
var _datamanager2 = _interopRequireDefault(_datamanager);
|
||||
@ -2145,6 +2142,10 @@ var _rowmanager = __webpack_require__(4);
|
||||
|
||||
var _rowmanager2 = _interopRequireDefault(_rowmanager);
|
||||
|
||||
var _bodyRenderer = __webpack_require__(18);
|
||||
|
||||
var _bodyRenderer2 = _interopRequireDefault(_bodyRenderer);
|
||||
|
||||
var _style = __webpack_require__(11);
|
||||
|
||||
var _style2 = _interopRequireDefault(_style);
|
||||
@ -2229,6 +2230,7 @@ var DataTable = function () {
|
||||
this.rowmanager = new _rowmanager2.default(this);
|
||||
this.columnmanager = new _columnmanager2.default(this);
|
||||
this.cellmanager = new _cellmanager2.default(this);
|
||||
this.bodyRenderer = new _bodyRenderer2.default(this);
|
||||
|
||||
if (this.options.data) {
|
||||
this.refresh(this.options.data);
|
||||
@ -2239,6 +2241,7 @@ var DataTable = function () {
|
||||
key: 'prepare',
|
||||
value: function prepare() {
|
||||
this.prepareDom();
|
||||
this.unfreeze();
|
||||
}
|
||||
}, {
|
||||
key: 'prepareDom',
|
||||
@ -2249,7 +2252,6 @@ var DataTable = function () {
|
||||
this.header = (0, _dom2.default)('.data-table-header', this.wrapper);
|
||||
this.bodyScrollable = (0, _dom2.default)('.body-scrollable', this.wrapper);
|
||||
this.freezeContainer = (0, _dom2.default)('.freeze-container', this.wrapper);
|
||||
this.unfreeze();
|
||||
}
|
||||
}, {
|
||||
key: 'refresh',
|
||||
@ -2284,98 +2286,7 @@ var DataTable = function () {
|
||||
}, {
|
||||
key: 'renderBody',
|
||||
value: function renderBody() {
|
||||
if (this.options.enableClusterize) {
|
||||
this.renderBodyWithClusterize();
|
||||
} else {
|
||||
this.renderBodyHTML();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'renderBodyHTML',
|
||||
value: function renderBodyHTML() {
|
||||
var rows = this.datamanager.getRows();
|
||||
|
||||
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML(rows) + '\n </table>\n ';
|
||||
}
|
||||
}, {
|
||||
key: 'renderBodyWithClusterize',
|
||||
value: function renderBodyWithClusterize() {
|
||||
var _this = this;
|
||||
|
||||
// empty body
|
||||
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML([]) + '\n </table>\n ';
|
||||
|
||||
this.start = 0;
|
||||
this.pageLength = 1000;
|
||||
this.end = this.start + this.pageLength;
|
||||
|
||||
// only append ${this.pageLength} rows in the beginning,
|
||||
// defer remaining
|
||||
var rows = this.datamanager.getRows(this.start, this.end);
|
||||
var initialData = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize = new _clusterize2.default({
|
||||
rows: initialData,
|
||||
scrollElem: this.bodyScrollable,
|
||||
contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
|
||||
callbacks: {
|
||||
clusterChanged: function clusterChanged() {
|
||||
_this.rowmanager.highlightCheckedRows();
|
||||
_this.cellmanager.selectAreaOnClusterChanged();
|
||||
_this.cellmanager.focusCellOnClusterChanged();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.log('dataAppended', this.pageLength);
|
||||
this.appendRemainingData();
|
||||
}
|
||||
}, {
|
||||
key: 'appendRemainingData',
|
||||
value: function appendRemainingData() {
|
||||
var dataAppended = this.pageLength;
|
||||
var promises = [];
|
||||
var rowCount = this.datamanager.getRowCount();
|
||||
|
||||
while (dataAppended + this.pageLength < rowCount) {
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPagePromise(this.start, this.end));
|
||||
dataAppended += this.pageLength;
|
||||
}
|
||||
|
||||
if (rowCount % this.pageLength > 0) {
|
||||
// last page
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPagePromise(this.start, this.end));
|
||||
}
|
||||
|
||||
return promises.reduce(function (prev, cur) {
|
||||
return prev.then(cur);
|
||||
}, Promise.resolve());
|
||||
}
|
||||
}, {
|
||||
key: 'appendNextPagePromise',
|
||||
value: function appendNextPagePromise(start, end) {
|
||||
var _this2 = this;
|
||||
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
var rows = _this2.datamanager.getRows(start, end);
|
||||
var data = _this2.getDataForClusterize(rows);
|
||||
|
||||
_this2.clusterize.append(data);
|
||||
_this2.log('dataAppended', rows.length);
|
||||
resolve();
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'getDataForClusterize',
|
||||
value: function getDataForClusterize(rows) {
|
||||
return rows.map(function (row) {
|
||||
return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
|
||||
});
|
||||
this.bodyRenderer.render();
|
||||
}
|
||||
}, {
|
||||
key: 'setDimensions',
|
||||
@ -2476,11 +2387,7 @@ var DataTable = function () {
|
||||
DataTable.instances = 0;
|
||||
|
||||
exports.default = DataTable;
|
||||
function getBodyHTML(rows) {
|
||||
return '\n <tbody>\n ' + rows.map(function (row) {
|
||||
return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
|
||||
}).join('') + '\n </tbody>\n ';
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
@ -2562,87 +2469,50 @@ var DataManager = function () {
|
||||
this.rowCount = 0;
|
||||
this.columns = [];
|
||||
this.rows = [];
|
||||
this._serialNoColumnAdded = false;
|
||||
this._checkboxColumnAdded = false;
|
||||
|
||||
// initialize sort state
|
||||
this.currentSort = {
|
||||
colIndex: -1,
|
||||
sortOrder: 'none' // asc, desc, none
|
||||
};
|
||||
|
||||
this.columns = this.prepareColumns(columns);
|
||||
this.rows = this.prepareRows(rows);
|
||||
|
||||
this.prepareNumericColumns();
|
||||
}
|
||||
|
||||
// computed property
|
||||
|
||||
}, {
|
||||
key: 'prepareColumns',
|
||||
value: function prepareColumns(columns) {
|
||||
if (!Array.isArray(columns)) {
|
||||
throw new DataError('`columns` must be an array');
|
||||
}
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
this.validateColumns(columns);
|
||||
|
||||
try {
|
||||
for (var _iterator = columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var column = _step.value;
|
||||
|
||||
if (typeof column !== 'string' && (typeof column === 'undefined' ? 'undefined' : _typeof(column)) !== 'object') {
|
||||
throw new DataError('`column` must be a string or an object');
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) {
|
||||
if (this.options.addSerialNoColumn && !this.hasColumn('Sr. No')) {
|
||||
var val = {
|
||||
content: 'Sr. No',
|
||||
align: 'center',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
align: 'center',
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
};
|
||||
|
||||
columns = [val].concat(columns);
|
||||
this._serialNoColumnAdded = true;
|
||||
}
|
||||
|
||||
if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) {
|
||||
if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
|
||||
var _val = {
|
||||
content: '<input type="checkbox" />',
|
||||
content: 'Checkbox',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
dropdown: false,
|
||||
format: function format(val) {
|
||||
return '<input type="checkbox" />';
|
||||
}
|
||||
};
|
||||
|
||||
columns = [_val].concat(columns);
|
||||
this._checkboxColumnAdded = true;
|
||||
}
|
||||
|
||||
return _prepareColumns(columns, {
|
||||
isHeader: 1,
|
||||
format: function format(value) {
|
||||
return '<span class="column-title">' + value + '</span>';
|
||||
}
|
||||
});
|
||||
return _prepareColumns(columns);
|
||||
}
|
||||
}, {
|
||||
key: 'prepareNumericColumns',
|
||||
@ -2663,31 +2533,19 @@ var DataManager = function () {
|
||||
value: function prepareRows(rows) {
|
||||
var _this = this;
|
||||
|
||||
if (!Array.isArray(rows)) {
|
||||
throw new DataError('`rows` must be an array');
|
||||
}
|
||||
|
||||
rows.forEach(function (row, i) {
|
||||
if (!Array.isArray(row)) {
|
||||
throw new DataError('`row` must be an array');
|
||||
}
|
||||
|
||||
if (row.length !== _this.getColumnCount()) {
|
||||
throw new DataError('Row index "' + i + '" doesn\'t match column length');
|
||||
}
|
||||
});
|
||||
this.validateRows(rows);
|
||||
|
||||
rows = rows.map(function (row, i) {
|
||||
var index = _this._getNextRowCount();
|
||||
|
||||
if (row.length < _this.columns.length) {
|
||||
if (_this._serialNoColumnAdded) {
|
||||
if (_this.hasColumn('Sr. No')) {
|
||||
var val = index + 1 + '';
|
||||
|
||||
row = [val].concat(row);
|
||||
}
|
||||
|
||||
if (_this._checkboxColumnAdded) {
|
||||
if (_this.hasColumn('Checkbox')) {
|
||||
var _val2 = '<input type="checkbox" />';
|
||||
|
||||
row = [_val2].concat(row);
|
||||
@ -2699,15 +2557,44 @@ var DataManager = function () {
|
||||
|
||||
return rows;
|
||||
}
|
||||
}, {
|
||||
key: 'validateColumns',
|
||||
value: function validateColumns(columns) {
|
||||
if (!Array.isArray(columns)) {
|
||||
throw new DataError('`columns` must be an array');
|
||||
}
|
||||
|
||||
columns.forEach(function (column, i) {
|
||||
if (typeof column !== 'string' && (typeof column === 'undefined' ? 'undefined' : _typeof(column)) !== 'object') {
|
||||
throw new DataError('column "' + i + '" must be a string or an object');
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'validateRows',
|
||||
value: function validateRows(rows) {
|
||||
var _this2 = this;
|
||||
|
||||
if (!Array.isArray(rows)) {
|
||||
throw new DataError('`rows` must be an array');
|
||||
}
|
||||
|
||||
rows.forEach(function (row, i) {
|
||||
if (!Array.isArray(row)) {
|
||||
throw new DataError('`row` must be an array');
|
||||
}
|
||||
|
||||
if (row.length !== _this2.getColumnCount(true)) {
|
||||
throw new DataError('Row index "' + i + '" doesn\'t match column length');
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'appendRows',
|
||||
value: function appendRows(rows) {
|
||||
if (Array.isArray(rows) && !Array.isArray(rows[0])) {
|
||||
rows = [rows];
|
||||
}
|
||||
var _rows = this.prepareRows(rows);
|
||||
this.validateRows(rows);
|
||||
|
||||
this.rows = this.rows.concat(_rows);
|
||||
this.rows = this.rows.concat(this.prepareRows(rows));
|
||||
}
|
||||
}, {
|
||||
key: 'sortRows',
|
||||
@ -2716,6 +2603,21 @@ var DataManager = function () {
|
||||
|
||||
colIndex = +colIndex;
|
||||
|
||||
// reset sortOrder and update for colIndex
|
||||
this.getColumns().map(function (col) {
|
||||
if (col.colIndex === colIndex) {
|
||||
col.sortOrder = sortOrder;
|
||||
} else {
|
||||
col.sortOrder = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
this._sortRows(colIndex, sortOrder);
|
||||
}
|
||||
}, {
|
||||
key: '_sortRows',
|
||||
value: function _sortRows(colIndex, sortOrder) {
|
||||
|
||||
if (this.currentSort.colIndex === colIndex) {
|
||||
// reverse the array if only sortOrder changed
|
||||
if (this.currentSort.sortOrder === 'asc' && sortOrder === 'desc' || this.currentSort.sortOrder === 'desc' && sortOrder === 'asc') {
|
||||
@ -2744,9 +2646,6 @@ var DataManager = function () {
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.currentSort.colIndex = colIndex;
|
||||
this.currentSort.sortOrder = sortOrder;
|
||||
}
|
||||
}, {
|
||||
key: 'reverseArray',
|
||||
@ -2895,6 +2794,24 @@ var DataManager = function () {
|
||||
rows: this.rows
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: 'hasColumn',
|
||||
value: function hasColumn(name) {
|
||||
return Boolean(this.columns.find(function (col) {
|
||||
return col.content === name;
|
||||
}));
|
||||
}
|
||||
}, {
|
||||
key: 'currentSort',
|
||||
get: function get() {
|
||||
var col = this.columns.find(function (col) {
|
||||
return col.sortOrder !== 'none';
|
||||
});
|
||||
return col || {
|
||||
colIndex: -1,
|
||||
sortOrder: 'none'
|
||||
};
|
||||
}
|
||||
}]);
|
||||
|
||||
return DataManager;
|
||||
@ -2903,34 +2820,59 @@ var DataManager = function () {
|
||||
exports.default = DataManager;
|
||||
|
||||
|
||||
function _prepareColumns(columns) {
|
||||
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
function prepareRow(row, i) {
|
||||
var baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
var _columns = columns.map(prepareCell);
|
||||
|
||||
return _columns.map(function (col) {
|
||||
return Object.assign({}, col, props);
|
||||
return row.map(prepareCell).map(function (cell) {
|
||||
return Object.assign({}, baseRowCell, cell);
|
||||
});
|
||||
}
|
||||
|
||||
function prepareRow(row, i) {
|
||||
return _prepareColumns(row, {
|
||||
rowIndex: i
|
||||
function _prepareColumns(columns) {
|
||||
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
var baseColumn = {
|
||||
isHeader: 1,
|
||||
editable: true,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: function format(value) {
|
||||
return '<span class="column-title">' + value + '</span>';
|
||||
}
|
||||
};
|
||||
|
||||
return columns.map(prepareCell).map(function (col) {
|
||||
return Object.assign({}, baseColumn, col);
|
||||
});
|
||||
}
|
||||
|
||||
function prepareCell(col, i) {
|
||||
var baseCell = {
|
||||
content: '',
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: 0,
|
||||
width: 40
|
||||
};
|
||||
|
||||
if (typeof col === 'string') {
|
||||
col = {
|
||||
content: col
|
||||
};
|
||||
}
|
||||
return Object.assign(col, {
|
||||
|
||||
return Object.assign({}, baseCell, col, {
|
||||
colIndex: i
|
||||
});
|
||||
}
|
||||
|
||||
var DataError = function (_extendableBuiltin2) {
|
||||
// Custom Errors
|
||||
|
||||
var DataError = exports.DataError = function (_extendableBuiltin2) {
|
||||
_inherits(DataError, _extendableBuiltin2);
|
||||
|
||||
function DataError() {
|
||||
@ -2944,8 +2886,6 @@ var DataError = function (_extendableBuiltin2) {
|
||||
|
||||
;
|
||||
|
||||
exports.DataError = DataError;
|
||||
|
||||
/***/ }),
|
||||
/* 9 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
@ -3683,6 +3623,154 @@ module.exports = function (css) {
|
||||
|
||||
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-plugin-transform-builtin-extend":"^1.1.2","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0","sortablejs":"^1.7.0"}}
|
||||
|
||||
/***/ }),
|
||||
/* 18 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
exports.getBodyHTML = getBodyHTML;
|
||||
|
||||
var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _clusterize = __webpack_require__(7);
|
||||
|
||||
var _clusterize2 = _interopRequireDefault(_clusterize);
|
||||
|
||||
var _rowmanager = __webpack_require__(4);
|
||||
|
||||
var _utils = __webpack_require__(1);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var BodyRenderer = function () {
|
||||
function BodyRenderer(instance) {
|
||||
_classCallCheck(this, BodyRenderer);
|
||||
|
||||
this.instance = instance;
|
||||
this.options = instance.options;
|
||||
this.datamanager = instance.datamanager;
|
||||
this.rowmanager = instance.rowmanager;
|
||||
this.cellmanager = instance.cellmanager;
|
||||
this.bodyScrollable = instance.bodyScrollable;
|
||||
this.log = instance.log;
|
||||
this.appendNextPage = (0, _utils.promisify)(this.appendNextPage, this);
|
||||
}
|
||||
|
||||
_createClass(BodyRenderer, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
if (this.options.enableClusterize) {
|
||||
this.renderBodyWithClusterize();
|
||||
} else {
|
||||
this.renderBodyHTML();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'renderBodyHTML',
|
||||
value: function renderBodyHTML() {
|
||||
var rows = this.datamanager.getRows();
|
||||
|
||||
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML(rows) + '\n </table>\n ';
|
||||
}
|
||||
}, {
|
||||
key: 'renderBodyWithClusterize',
|
||||
value: function renderBodyWithClusterize() {
|
||||
var _this = this;
|
||||
|
||||
// empty body
|
||||
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML([]) + '\n </table>\n ';
|
||||
|
||||
this.start = 0;
|
||||
this.pageLength = 1000;
|
||||
this.end = this.start + this.pageLength;
|
||||
|
||||
// only append ${this.pageLength} rows in the beginning,
|
||||
// defer remaining
|
||||
var rows = this.datamanager.getRows(this.start, this.end);
|
||||
var initialData = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize = new _clusterize2.default({
|
||||
rows: initialData,
|
||||
scrollElem: this.bodyScrollable,
|
||||
contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
|
||||
callbacks: {
|
||||
clusterChanged: function clusterChanged() {
|
||||
_this.rowmanager.highlightCheckedRows();
|
||||
_this.cellmanager.selectAreaOnClusterChanged();
|
||||
_this.cellmanager.focusCellOnClusterChanged();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.log('dataAppended', this.pageLength);
|
||||
this.appendRemainingData();
|
||||
}
|
||||
}, {
|
||||
key: 'appendRemainingData',
|
||||
value: function appendRemainingData() {
|
||||
var dataAppended = this.pageLength;
|
||||
var promises = [];
|
||||
var rowCount = this.datamanager.getRowCount();
|
||||
|
||||
while (dataAppended + this.pageLength < rowCount) {
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPage(this.start, this.end));
|
||||
dataAppended += this.pageLength;
|
||||
}
|
||||
|
||||
if (rowCount % this.pageLength > 0) {
|
||||
// last page
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPage(this.start, this.end));
|
||||
}
|
||||
|
||||
return promises.reduce(function (prev, cur) {
|
||||
return prev.then(cur);
|
||||
}, Promise.resolve());
|
||||
}
|
||||
}, {
|
||||
key: 'appendNextPage',
|
||||
value: function appendNextPage(start, end) {
|
||||
var rows = this.datamanager.getRows(start, end);
|
||||
var data = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize.append(data);
|
||||
this.log('dataAppended', rows.length);
|
||||
}
|
||||
}, {
|
||||
key: 'getDataForClusterize',
|
||||
value: function getDataForClusterize(rows) {
|
||||
return rows.map(function (row) {
|
||||
return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return BodyRenderer;
|
||||
}();
|
||||
|
||||
exports.default = BodyRenderer;
|
||||
;
|
||||
|
||||
function getBodyHTML(rows) {
|
||||
return '\n <tbody>\n ' + rows.map(function (row) {
|
||||
return (0, _rowmanager.getRowHTML)(row, { rowIndex: row[0].rowIndex });
|
||||
}).join('') + '\n </tbody>\n ';
|
||||
}
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
113
src/body-renderer.js
Normal file
113
src/body-renderer.js
Normal file
@ -0,0 +1,113 @@
|
||||
import $ from './dom';
|
||||
import Clusterize from 'clusterize.js';
|
||||
import { getRowHTML } from './rowmanager';
|
||||
import { promisify } from './utils';
|
||||
|
||||
export default class BodyRenderer {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
this.options = instance.options;
|
||||
this.datamanager = instance.datamanager;
|
||||
this.rowmanager = instance.rowmanager;
|
||||
this.cellmanager = instance.cellmanager;
|
||||
this.bodyScrollable = instance.bodyScrollable;
|
||||
this.log = instance.log;
|
||||
this.appendNextPage = promisify(this.appendNextPage, this);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.options.enableClusterize) {
|
||||
this.renderBodyWithClusterize();
|
||||
} else {
|
||||
this.renderBodyHTML();
|
||||
}
|
||||
}
|
||||
|
||||
renderBodyHTML() {
|
||||
const rows = this.datamanager.getRows();
|
||||
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML(rows)}
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
renderBodyWithClusterize() {
|
||||
|
||||
// empty body
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML([])}
|
||||
</table>
|
||||
`;
|
||||
|
||||
this.start = 0;
|
||||
this.pageLength = 1000;
|
||||
this.end = this.start + this.pageLength;
|
||||
|
||||
// only append ${this.pageLength} rows in the beginning,
|
||||
// defer remaining
|
||||
const rows = this.datamanager.getRows(this.start, this.end);
|
||||
const initialData = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize = new Clusterize({
|
||||
rows: initialData,
|
||||
scrollElem: this.bodyScrollable,
|
||||
contentElem: $('tbody', this.bodyScrollable),
|
||||
callbacks: {
|
||||
clusterChanged: () => {
|
||||
this.rowmanager.highlightCheckedRows();
|
||||
this.cellmanager.selectAreaOnClusterChanged();
|
||||
this.cellmanager.focusCellOnClusterChanged();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.log('dataAppended', this.pageLength);
|
||||
this.appendRemainingData();
|
||||
}
|
||||
|
||||
appendRemainingData() {
|
||||
let dataAppended = this.pageLength;
|
||||
const promises = [];
|
||||
const rowCount = this.datamanager.getRowCount();
|
||||
|
||||
while (dataAppended + this.pageLength < rowCount) {
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPage(this.start, this.end));
|
||||
dataAppended += this.pageLength;
|
||||
}
|
||||
|
||||
if (rowCount % this.pageLength > 0) {
|
||||
// last page
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPage(this.start, this.end));
|
||||
}
|
||||
|
||||
return promises.reduce(
|
||||
(prev, cur) => prev.then(cur), Promise.resolve()
|
||||
);
|
||||
}
|
||||
|
||||
appendNextPage(start, end) {
|
||||
const rows = this.datamanager.getRows(start, end);
|
||||
const data = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize.append(data);
|
||||
this.log('dataAppended', rows.length);
|
||||
}
|
||||
|
||||
getDataForClusterize(rows) {
|
||||
return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));
|
||||
}
|
||||
};
|
||||
|
||||
export function getBodyHTML(rows) {
|
||||
return `
|
||||
<tbody>
|
||||
${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
|
||||
</tbody>
|
||||
`;
|
||||
}
|
||||
@ -37,20 +37,21 @@ export default class ColumnManager {
|
||||
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
|
||||
return;
|
||||
}
|
||||
// column sorted or order changed
|
||||
// update colIndex of each header cell
|
||||
$cols.map(($col, i) => {
|
||||
$.data($col, {
|
||||
colIndex: columns[i].colIndex
|
||||
});
|
||||
});
|
||||
|
||||
// show sort indicator
|
||||
const sortColIndex = this.datamanager.currentSort.colIndex;
|
||||
if (sortColIndex !== -1) {
|
||||
const order = this.datamanager.currentSort.sortOrder;
|
||||
$('.sort-indicator', $cols[sortColIndex]).innerHTML = this.options.sortIndicator[order];
|
||||
}
|
||||
$cols.map(($col, i) => {
|
||||
const column = columns[i];
|
||||
// column sorted or order changed
|
||||
// update colIndex of each header cell
|
||||
$.data($col, {
|
||||
colIndex: column.colIndex
|
||||
});
|
||||
|
||||
// refresh sort indicator
|
||||
const sortIndicator = $('.sort-indicator', $col);
|
||||
if (sortIndicator) {
|
||||
sortIndicator.innerHTML = this.options.sortIndicator[column.sortOrder];
|
||||
}
|
||||
});
|
||||
}
|
||||
// reset columnMap
|
||||
this.$columnMap = [];
|
||||
|
||||
106
src/datatable.js
106
src/datatable.js
@ -1,13 +1,10 @@
|
||||
import $ from './dom';
|
||||
import Clusterize from 'clusterize.js';
|
||||
import DataManager from './datamanager';
|
||||
import CellManager from './cellmanager';
|
||||
import ColumnManager from './columnmanager';
|
||||
import RowManager from './rowmanager';
|
||||
import BodyRenderer from './body-renderer';
|
||||
import Style from './style';
|
||||
|
||||
import { getRowHTML } from './rowmanager';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
const DEFAULT_OPTIONS = {
|
||||
@ -91,6 +88,7 @@ class DataTable {
|
||||
this.rowmanager = new RowManager(this);
|
||||
this.columnmanager = new ColumnManager(this);
|
||||
this.cellmanager = new CellManager(this);
|
||||
this.bodyRenderer = new BodyRenderer(this);
|
||||
|
||||
if (this.options.data) {
|
||||
this.refresh(this.options.data);
|
||||
@ -99,6 +97,7 @@ class DataTable {
|
||||
|
||||
prepare() {
|
||||
this.prepareDom();
|
||||
this.unfreeze();
|
||||
}
|
||||
|
||||
prepareDom() {
|
||||
@ -120,7 +119,6 @@ class DataTable {
|
||||
this.header = $('.data-table-header', this.wrapper);
|
||||
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
||||
this.freezeContainer = $('.freeze-container', this.wrapper);
|
||||
this.unfreeze();
|
||||
}
|
||||
|
||||
refresh(data) {
|
||||
@ -149,95 +147,7 @@ class DataTable {
|
||||
}
|
||||
|
||||
renderBody() {
|
||||
if (this.options.enableClusterize) {
|
||||
this.renderBodyWithClusterize();
|
||||
} else {
|
||||
this.renderBodyHTML();
|
||||
}
|
||||
}
|
||||
|
||||
renderBodyHTML() {
|
||||
const rows = this.datamanager.getRows();
|
||||
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML(rows)}
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
renderBodyWithClusterize() {
|
||||
// empty body
|
||||
this.bodyScrollable.innerHTML = `
|
||||
<table class="data-table-body">
|
||||
${getBodyHTML([])}
|
||||
</table>
|
||||
`;
|
||||
|
||||
this.start = 0;
|
||||
this.pageLength = 1000;
|
||||
this.end = this.start + this.pageLength;
|
||||
|
||||
// only append ${this.pageLength} rows in the beginning,
|
||||
// defer remaining
|
||||
const rows = this.datamanager.getRows(this.start, this.end);
|
||||
const initialData = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize = new Clusterize({
|
||||
rows: initialData,
|
||||
scrollElem: this.bodyScrollable,
|
||||
contentElem: $('tbody', this.bodyScrollable),
|
||||
callbacks: {
|
||||
clusterChanged: () => {
|
||||
this.rowmanager.highlightCheckedRows();
|
||||
this.cellmanager.selectAreaOnClusterChanged();
|
||||
this.cellmanager.focusCellOnClusterChanged();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.log('dataAppended', this.pageLength);
|
||||
this.appendRemainingData();
|
||||
}
|
||||
|
||||
appendRemainingData() {
|
||||
let dataAppended = this.pageLength;
|
||||
const promises = [];
|
||||
const rowCount = this.datamanager.getRowCount();
|
||||
|
||||
while (dataAppended + this.pageLength < rowCount) {
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPagePromise(this.start, this.end));
|
||||
dataAppended += this.pageLength;
|
||||
}
|
||||
|
||||
if (rowCount % this.pageLength > 0) {
|
||||
// last page
|
||||
this.start = this.end;
|
||||
this.end = this.start + this.pageLength;
|
||||
promises.push(this.appendNextPagePromise(this.start, this.end));
|
||||
}
|
||||
|
||||
return promises.reduce(
|
||||
(prev, cur) => prev.then(cur), Promise.resolve()
|
||||
);
|
||||
}
|
||||
|
||||
appendNextPagePromise(start, end) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const rows = this.datamanager.getRows(start, end);
|
||||
const data = this.getDataForClusterize(rows);
|
||||
|
||||
this.clusterize.append(data);
|
||||
this.log('dataAppended', rows.length);
|
||||
resolve();
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
getDataForClusterize(rows) {
|
||||
return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));
|
||||
this.bodyRenderer.render();
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
@ -318,11 +228,3 @@ class DataTable {
|
||||
DataTable.instances = 0;
|
||||
|
||||
export default DataTable;
|
||||
|
||||
export function getBodyHTML(rows) {
|
||||
return `
|
||||
<tbody>
|
||||
${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}
|
||||
</tbody>
|
||||
`;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user