jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Fix sorting

Browse Source
This commit is contained in:
Faris Ansari 2017-09-30 23:20:55 +05:30
parent 9b1e19dcac
commit 86d6b19277
5 changed files with 78 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
lib/ReGrid.js
View File

File diff suppressed because one or more lines are too long

2
lib/ReGrid.js.map
View File

File diff suppressed because one or more lines are too long

65
src/regrid.js
View File

@ -68,11 +68,7 @@ export default class ReGrid {
} }
this.renderHeader(); this.renderHeader();
if (this.enableClusterize) { this.renderBody();
this.renderBodyWithClusterize();
} else {
this.renderBody();
}
this.setDimensions(); this.setDimensions();
} }
@ -82,6 +78,14 @@ export default class ReGrid {
} }
renderBody() { renderBody() {
if (this.enableClusterize) {
this.renderBodyWithClusterize();
} else {
this.renderBodyHTML();
}
}
renderBodyHTML() {
// scrollable body // scrollable body
this.bodyScrollable.html(` this.bodyScrollable.html(`
<table class="data-table-body table table-bordered"> <table class="data-table-body table table-bordered">
@ -250,9 +254,10 @@ export default class ReGrid {
this.setBodyWidth(); this.setBodyWidth();
this.bodyScrollable.css({ this.setStyle(
marginTop: this.header.height() + 1 '.data-table .body-scrollable',
}); `margin-top: ${this.header.height() + 1}px;`
);
this.bodyScrollable.find('.table').css('margin', 0); this.bodyScrollable.find('.table').css('margin', 0);
} }
@ -341,50 +346,48 @@ export default class ReGrid {
this.header.on('click', '.data-table-col .content span', function () { this.header.on('click', '.data-table-col .content span', function () {
const $cell = $(this).closest('.data-table-col'); const $cell = $(this).closest('.data-table-col');
const sortBy = $cell.attr('data-sort-by'); const sortAction = getDefault($cell.attr('data-sort-action'), 'none');
const colIndex = $cell.attr('data-col-index'); const colIndex = $cell.attr('data-col-index');
if (sortBy === 'none') { if (sortAction === 'none') {
$cell.attr('data-sort-by', 'asc'); $cell.attr('data-sort-action', 'asc');
$cell $cell.find('.sort-indicator').text('▲');
.find('.content') } else if (sortAction === 'asc') {
.append('<span class="octicon octicon-chevron-up">'); $cell.attr('data-sort-action', 'desc');
} else if (sortBy === 'asc') { $cell.find('.sort-indicator').text('▼');
$cell.attr('data-sort-by', 'desc'); } else if (sortAction === 'desc') {
$cell $cell.attr('data-sort-action', 'none');
.find('.content .octicon') $cell.find('.sort-indicator').text('');
.removeClass('octicon-chevron-up')
.addClass('octicon-chevron-down');
} else if (sortBy === 'desc') {
$cell.attr('data-sort-by', 'none');
$cell.find('.content .octicon').remove();
} }
const sortByAction = $cell.attr('data-sort-by'); // sortWith this action
const sortWith = $cell.attr('data-sort-action');
if (self.events.on_sort) { if (self.events.onSort) {
self.events.on_sort.apply(null, [colIndex, sortByAction]); self.events.onSort(colIndex, sortWith);
} else { } else {
self.sortRows(colIndex, sortByAction); self.sortRows(colIndex, sortWith);
self.refreshRows(); self.refreshRows();
} }
}); });
} }
sortRows(colIndex, sortBy = 'none') { sortRows(colIndex, sortAction = 'none') {
colIndex = +colIndex;
this.data.rows.sort((a, b) => { this.data.rows.sort((a, b) => {
const _aIndex = a[0].rowIndex; const _aIndex = a[0].rowIndex;
const _bIndex = b[0].rowIndex; const _bIndex = b[0].rowIndex;
const _a = a[colIndex].content; const _a = a[colIndex].content;
const _b = b[colIndex].content; const _b = b[colIndex].content;
if (sortBy === 'none') { if (sortAction === 'none') {
return _aIndex - _bIndex; return _aIndex - _bIndex;
} else if (sortBy === 'asc') { } else if (sortAction === 'asc') {
if (_a < _b) return -1; if (_a < _b) return -1;
if (_a > _b) return 1; if (_a > _b) return 1;
if (_a === _b) return 0; if (_a === _b) return 0;
} else if (sortBy === 'desc') { } else if (sortAction === 'desc') {
if (_a < _b) return 1; if (_a < _b) return 1;
if (_a > _b) return -1; if (_a > _b) return -1;
if (_a === _b) return 0; if (_a === _b) return 0;

8
src/style.scss
View File

@ -34,9 +34,17 @@
.content span { .content span {
cursor: pointer; cursor: pointer;
} }
.sort-indicator {
position: absolute;
right: 8px;
top: 9px;
}
} }
.data-table-col { .data-table-col {
position: relative;
.content { .content {
padding: 8px; padding: 8px;
border: 1px solid white; border: 1px solid white;

1
src/utils.js
View File

@ -29,6 +29,7 @@ function getColumnHTML(column) {
<td class="data-table-col noselect" ${dataAttr}> <td class="data-table-col noselect" ${dataAttr}>
<div class="content ellipsis"> <div class="content ellipsis">
${column.format ? column.format(column.content) : column.content} ${column.format ? column.format(column.content) : column.content}
<span class="sort-indicator"></span>
</div> </div>
</td> </td>
`; `;