jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

append first page, and rest in next tick

Browse Source
This commit is contained in:
Faris Ansari 2017-12-29 15:38:55 +05:30
parent 0e6e9a7639
commit eb800beb90
4 changed files with 53 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
lib/frappe-datatable.js
View File

@ -942,12 +942,6 @@ var CellManager = function () {
});
});
['left', 'right', 'up', 'down'].map(function (direction) {
return _keyboard2.default.on(direction, function () {
return _this2.scrollToCell(_this2.$focusedCell);
});
});
_keyboard2.default.on('esc', function () {
_this2.deactivateEditing();
});
@ -1049,6 +1043,7 @@ var CellManager = function () {
$cell.classList.add('selected');
this.highlightRowColumnHeader($cell);
this.scrollToCell($cell);
}
}, {
key: 'highlightRowColumnHeader',
@ -2727,6 +2722,19 @@ var DataManager = function () {
}
return 0;
});
if (this.hasColumn('Sr. No')) {
// update Sr. No indexes
var srNoColIndex = this.getColumnIndex('Sr. No');
this.rows = this.rows.map(function (row, index) {
return row.map(function (cell) {
if (cell.colIndex === srNoColIndex) {
cell.content = index + 1 + '';
}
return cell;
});
});
}
}
}, {
key: 'reverseArray',
@ -2943,6 +2951,13 @@ var DataManager = function () {
return col.content === name;
}));
}
}, {
key: 'getColumnIndex',
value: function getColumnIndex(name) {
return this.columns.findIndex(function (col) {
return col.content === name;
});
}
}, {
key: 'currentSort',
get: function get() {
@ -3076,7 +3091,7 @@ var BodyRenderer = function () {
this.cellmanager = instance.cellmanager;
this.bodyScrollable = instance.bodyScrollable;
this.log = instance.log;
this.appendNextPage = (0, _utils.promisify)(this.appendNextPage, this);
this.appendRemainingData = (0, _utils.promisify)(this.appendRemainingData, this);
}
_createClass(BodyRenderer, [{
@ -3100,14 +3115,18 @@ var BodyRenderer = function () {
value: function renderBodyWithClusterize() {
var _this = this;
// first page
var rows = this.datamanager.getRows(0, 20);
var initialData = this.getDataForClusterize(rows);
if (!this.clusterize) {
// empty body
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML([]) + '\n </table>\n ';
// Rows will be appended as promises, so we don't block
// even for the first page render
// first 20 rows will appended
// rest of them in nextTick
this.clusterize = new _clusterize2.default({
rows: [],
rows: initialData,
scrollElem: this.bodyScrollable,
contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
callbacks: {
@ -3118,61 +3137,24 @@ var BodyRenderer = function () {
}
},
/* eslint-disable */
no_data_text: 'Loading..',
no_data_text: this.options.loadingText,
no_data_class: 'empty-state'
/* eslint-enable */
});
// setDimensions requires atleast 1 row to exist in dom
this.instance.setDimensions();
} else {
this.clusterize.update([]);
this.clusterize.update(initialData);
}
this.appendRemainingData();
// setDimensions will work only if there is atleast one row appended
// so we call it as soon as the first Page is appended
this.firstPagePromise.then(function () {
_this.instance.setDimensions();
});
}
}, {
key: 'appendRemainingData',
value: function appendRemainingData() {
var chunkSize = 1000;
var start = 0,
end = chunkSize;
var dataAppended = 0;
this.firstPagePromise = null;
var promises = [];
var rowCount = this.datamanager.getRowCount();
while (dataAppended + chunkSize < rowCount) {
var promise = this.appendNextPage(start, end);
if (!this.firstPagePromise) this.firstPagePromise = promise;
promises.push(promise);
dataAppended += chunkSize;
start = end;
end += chunkSize;
}
if (rowCount % chunkSize > 0) {
// last page
var _promise = this.appendNextPage(start, end);
if (!this.firstPagePromise) this.firstPagePromise = _promise;
promises.push(_promise);
dataAppended += rowCount % chunkSize;
}
return (0, _utils.chainPromises)(promises);
}
// promisified
}, {
key: 'appendNextPage',
value: function appendNextPage(start, end) {
var rows = this.datamanager.getRows(start, end);
var rows = this.datamanager.getRows(20);
var data = this.getDataForClusterize(rows);
this.clusterize.append(data);
}
}, {
@ -3321,7 +3303,8 @@ exports.default = {
addCheckboxColumn: true,
enableClusterize: true,
enableLogs: false,
takeAvailableSpace: false
takeAvailableSpace: false,
loadingText: 'Loading...'
};
module.exports = exports['default'];

2
lib/frappe-datatable.js.map
View File

File diff suppressed because one or more lines are too long

2
lib/frappe-datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long

58
src/body-renderer.js
View File

@ -1,7 +1,7 @@
import $ from './dom';
import Clusterize from 'clusterize.js';
import { getRowHTML } from './rowmanager';
import { promisify, chainPromises } from './utils';
import { promisify } from './utils';
export default class BodyRenderer {
constructor(instance) {
@ -12,7 +12,7 @@ export default class BodyRenderer {
this.cellmanager = instance.cellmanager;
this.bodyScrollable = instance.bodyScrollable;
this.log = instance.log;
this.appendNextPage = promisify(this.appendNextPage, this);
this.appendRemainingData = promisify(this.appendRemainingData, this);
}
render() {
@ -34,6 +34,9 @@ export default class BodyRenderer {
}
renderBodyWithClusterize() {
// first page
const rows = this.datamanager.getRows(0, 20);
const initialData = this.getDataForClusterize(rows);
if (!this.clusterize) {
// empty body
@ -43,10 +46,10 @@ export default class BodyRenderer {
</table>
`;
// Rows will be appended as promises, so we don't block
// even for the first page render
// first 20 rows will appended
// rest of them in nextTick
this.clusterize = new Clusterize({
rows: [],
rows: initialData,
scrollElem: this.bodyScrollable,
contentElem: $('tbody', this.bodyScrollable),
callbacks: {
@ -57,56 +60,23 @@ export default class BodyRenderer {
}
},
/* eslint-disable */
no_data_text: 'Loading..',
no_data_text: this.options.loadingText,
no_data_class: 'empty-state'
/* eslint-enable */
});
// setDimensions requires atleast 1 row to exist in dom
this.instance.setDimensions();
} else {
this.clusterize.update([]);
this.clusterize.update(initialData);
}
this.appendRemainingData();
// setDimensions will work only if there is atleast one row appended
// so we call it as soon as the first Page is appended
this.firstPagePromise.then(() => {
this.instance.setDimensions();
});
}
appendRemainingData() {
const chunkSize = 1000;
let start = 0, end = chunkSize;
let dataAppended = 0;
this.firstPagePromise = null;
const promises = [];
const rowCount = this.datamanager.getRowCount();
while (dataAppended + chunkSize < rowCount) {
const promise = this.appendNextPage(start, end);
if (!this.firstPagePromise) this.firstPagePromise = promise;
promises.push(promise);
dataAppended += chunkSize;
start = end;
end += chunkSize;
}
if (rowCount % chunkSize > 0) {
// last page
const promise = this.appendNextPage(start, end);
if (!this.firstPagePromise) this.firstPagePromise = promise;
promises.push(promise);
dataAppended += rowCount % chunkSize;
}
return chainPromises(promises);
}
// promisified
appendNextPage(start, end) {
const rows = this.datamanager.getRows(start, end);
const rows = this.datamanager.getRows(20);
const data = this.getDataForClusterize(rows);
this.clusterize.append(data);
}