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

30
src/style.js
View File

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