jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

fix(class selector): Replace all selectors with class based selectors

Browse Source 
Class based selectors are faster than attribute based ones.
This commit is contained in:
Faris Ansari 2018-09-23 14:46:36 +05:30
parent 4f57bb1b64
commit 2ce132c0bc
5 changed files with 38 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/cellmanager.js
View File

@ -615,7 +615,7 @@ export default class CellManager {
if (!this.columnmanager.isFilterShown) {
// put focus back on cell
this.$focusedCell.focus();
this.$focusedCell && this.$focusedCell.focus();
}
}

4
src/columnmanager.js
View File

@ -34,7 +34,7 @@ export default class ColumnManager {
// refresh html
$('thead', this.header).innerHTML = this.getHeaderHTML(columns);
this.$filterRow = $('.dt-row[data-is-filter]', this.header);
this.$filterRow = $('.dt-row-filter', this.header);
if (this.$filterRow) {
$.style(this.$filterRow, { display: 'none' });
}
@ -263,7 +263,7 @@ export default class ColumnManager {
focusFilter(colIndex) {
if (!this.isFilterShown) return;
const $filterInput = $(`[data-col-index="${colIndex}"] .dt-filter`, this.$filterRow);
const $filterInput = $(`.dt-cell--col-${colIndex} .dt-filter`, this.$filterRow);
$filterInput.focus();
}

35
src/datamanager.js
View File

@ -11,6 +11,7 @@ export default class DataManager {
this.sortRows = nextTick(this.sortRows, this);
this.switchColumn = nextTick(this.switchColumn, this);
this.removeColumn = nextTick(this.removeColumn, this);
this.options.filterRows = nextTick(this.options.filterRows, this);
}
init(data, columns) {
@ -423,27 +424,29 @@ export default class DataManager {
filterRows(keyword, colIndex) {
const cells = this.rows.map(row => row[colIndex]);
let result = this.options.filterRows(keyword, cells, colIndex);
if (!result) {
result = this.getAllRowIndices();
}
return this.options.filterRows(keyword, cells, colIndex)
.then(result => {
if (!result) {
result = this.getAllRowIndices();
}
if (!result.then) {
result = Promise.resolve(result);
}
if (!result.then) {
result = Promise.resolve(result);
}
return result.then(rowsToShow => {
this._filteredRows = rowsToShow;
return result.then(rowsToShow => {
this._filteredRows = rowsToShow;
const rowsToHide = this.getAllRowIndices()
.filter(index => !rowsToShow.includes(index));
const rowsToHide = this.getAllRowIndices()
.filter(index => !rowsToShow.includes(index));
return {
rowsToHide,
rowsToShow
};
});
return {
rowsToHide,
rowsToShow
};
});
});
}
getFilteredRowIndices() {

18
src/rowmanager.js
View File

@ -40,7 +40,7 @@ export default class RowManager {
// map of checked rows
this.checkMap = [];
$.on(this.wrapper, 'click', '.dt-cell[data-col-index="0"] [type="checkbox"]', (e, $checkbox) => {
$.on(this.wrapper, 'click', '.dt-cell--col-0 [type="checkbox"]', (e, $checkbox) => {
const $cell = $checkbox.closest('.dt-cell');
const {
rowIndex,
@ -92,8 +92,7 @@ export default class RowManager {
checkRow(rowIndex, toggle) {
const value = toggle ? 1 : 0;
const selector = rowIndex =>
`.dt-cell[data-row-index="${rowIndex}"][data-col-index="0"] [type="checkbox"]`;
const selector = rowIndex => `.dt-cell--0-${rowIndex} [type="checkbox"]`;
// update internal map
this.checkMap[rowIndex] = value;
// set checkbox value explicitly
@ -117,7 +116,7 @@ export default class RowManager {
this.checkMap = [];
}
// set checkbox value
$.each('.dt-cell[data-col-index="0"] [type="checkbox"]', this.bodyScrollable)
$.each('.dt-cell--col-0 [type="checkbox"]', this.bodyScrollable)
.map(input => {
input.checked = toggle;
});
@ -255,6 +254,7 @@ export default class RowManager {
getRowHTML(row, props) {
const dataAttr = makeDataAttributeString(props);
let rowIdentifier = props.rowIndex;
if (props.isFilter) {
row = row.map(cell => (Object.assign({}, cell, {
@ -265,10 +265,16 @@ export default class RowManager {
isHeader: undefined,
editable: false
})));
rowIdentifier = 'filter';
}
if (props.isHeader) {
rowIdentifier = 'header';
}
return `
<tr class="dt-row" ${dataAttr}>
<tr class="dt-row dt-row-${rowIdentifier}" ${dataAttr}>
${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
</tr>
`;
@ -280,6 +286,6 @@ export default class RowManager {
}
selector(rowIndex) {
return `.dt-row[data-row-index="${rowIndex}"]`;
return `.dt-row-${rowIndex}`;
}
}

8
src/style.js
View File

@ -147,7 +147,7 @@ export default class Style {
}
setupMinWidth() {
$.each('.dt-cell[data-is-header]', this.header).map(col => {
$.each('.dt-cell--header', this.header).map(col => {
const { colIndex } = $.data(col);
const column = this.getColumn(colIndex);
@ -163,7 +163,7 @@ export default class Style {
if (!$('.dt-row')) return;
// set initial width as naturally calculated by table's first row
$.each('.dt-row[data-row-index="0"] .dt-cell', this.bodyScrollable).map($cell => {
$.each('.dt-row-0 .dt-cell', this.bodyScrollable).map($cell => {
const {
colIndex
} = $.data($cell);
@ -259,7 +259,7 @@ export default class Style {
setDefaultCellHeight() {
if (this.options.dynamicRowHeight) return;
if (this.__cellHeightSet) return;
const $firstCell = $('.dt-cell[data-is-header]', this.instance.header);
const $firstCell = $('.dt-cell--header', this.instance.header);
if (!$firstCell) return;
const height = this.options.cellHeight || $.style($firstCell, 'height');
@ -339,7 +339,7 @@ export default class Style {
getColumnHeaderElement(colIndex) {
colIndex = +colIndex;
if (colIndex < 0) return null;
return $(`.dt-cell[data-col-index="${colIndex}"]`, this.header);
return $(`.dt-cell--col-${colIndex}`, this.header);
}
getRowIndexColumnWidth(baseWidth) {