jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

fix(filterRows): Show/hide rows using setStyle and removeStyle

Browse Source 
Finding row elements and adding/removing classes on them is slower and unreliable
This commit is contained in:
Faris Ansari 2018-09-23 14:45:12 +05:30
parent a04a5a1d7c
commit 4f57bb1b64
2 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/rowmanager.js
View File

@ -14,7 +14,8 @@ export default class RowManager {
'fireEvent',
'wrapper',
'bodyScrollable',
'bodyRenderer'
'bodyRenderer',
'style'
]);
this.bindEvents();
@ -176,18 +177,16 @@ export default class RowManager {
hideRows(rowIndices) {
rowIndices = ensureArray(rowIndices);
rowIndices.map(rowIndex => {
const $tr = this.getRow$(rowIndex);
$tr.classList.add('dt-row--hide');
const selector = rowIndices.map(this.selector).join(',');
this.style.setStyle(selector, {
display: 'none'
});
}
showRows(rowIndices) {
rowIndices = ensureArray(rowIndices);
rowIndices.map(rowIndex => {
const $tr = this.getRow$(rowIndex);
$tr.classList.remove('dt-row--hide');
});
const selector = rowIndices.map(this.selector).join(',');
this.style.removeStyle(selector);
}
openSingleNode(rowIndex) {

30
src/style.js
View File

@ -60,14 +60,14 @@ export default class Style {
return;
}
selector = selector.trim();
if (!selector) return;
this._styleRulesMap = this._styleRulesMap || {};
const prefixedSelector = this._getPrefixedSelector(selector);
if (this._styleRulesMap[prefixedSelector]) {
// find and remove
const index = Array.from(this.stylesheet.cssRules)
.findIndex(rule => rule.selectorText === prefixedSelector);
this.stylesheet.deleteRule(index);
this.removeStyle(selector);
// merge with old styleobject
styleObject = Object.assign({}, this._styleRulesMap[prefixedSelector], styleObject);
@ -80,6 +80,28 @@ export default class Style {
this.stylesheet.insertRule(ruleString);
}
removeStyle(selector) {
if (selector.includes(',')) {
selector.split(',')
.map(s => s.trim())
.forEach(selector => {
this.removeStyle(selector);
});
return;
}
selector = selector.trim();
if (!selector) return;
// find and remove
const prefixedSelector = this._getPrefixedSelector(selector);
const index = Array.from(this.stylesheet.cssRules)
.findIndex(rule => rule.selectorText === prefixedSelector);
if (index === -1) return;
this.stylesheet.deleteRule(index);
}
_getPrefixedSelector(selector) {
return `.${this.scopeClass} ${selector}`;
}