grainsoft/david
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
grainsoft
2026-07-06 19:23:12 +03:00
parent 3d658bbd13
commit 1d7e70aa15
2 changed files with 504 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/table/Table.js
+54 -4
View File
@@ -78,6 +78,8 @@ export class Table {
this.setSortable();
}
this.setTableEvents();
Ut.trigger(this.opts.onInit, this);
}
@@ -235,15 +237,38 @@ export class Table {
return;
}
let header = this.opts.header;
const header = this.opts.header;
let thead = El('div', { className: 'thead' + (header.cls ? ' ' + header.cls : '') });
const thead = El('div', { className: 'thead' + (header.cls ? ' ' + header.cls : '') });
let n = 1;
for (; n < this.data.items[0].length; n++) {
let cell = header.cell ? (header.cell[ n - 1 ] || {}) : {};
thead.append( El('div', { className: 'th' + (cell.cls ? ' ' + cell.cls : '') }, (cell.text || '') ) );
const cell = header.cell ? (header.cell[ n - 1 ] || {}) : {};
const th = El('div');
th.className = 'th';
if (cell.cls) {
th.className += ` ${cell.cls}`;
}
if (cell.sortable) {
const sortMode = this.vars.get('sort_mode');
if (this.vars.get('sort_by') === cell.sortable && (sortMode === 'asc' || sortMode === 'desc')) {
th.className += ` sort-${sortMode}`;
}
th.dataset.sortable = cell.sortable;
}
th.textContent = cell.text || '';
thead.append(th);
}
this.table.prepend(thead);
@@ -475,6 +500,31 @@ export class Table {
});
}
// Set Table Events
setTableEvents() {
this.table.dxOn('click', '.th[data-sortable]', (_, t) => {
this.vars.set('sort_by', t.dataset.sortable);
if (!t.classList.contains('sort-asc')) {
t.className = 'th sort-asc';
this.vars.set('sort_mode', 'asc');
this.update();
return;
}
t.className = 'th sort-desc';
this.vars.set('sort_mode', 'desc');
this.update();
});;
}
// Update pagination area
updatePagination() {
src/widgets/table/table.css
+27
View File
@@ -224,6 +224,8 @@
.sp-table .th {
display: table-cell;
font-weight: bold;
user-select: none;
-webkit-user-select: none;
}
.sp-table .td,
@@ -231,6 +233,31 @@
vertical-align: middle;
}
.sp-table .th[data-sortable] {
cursor: pointer;
}
.sp-table .th[data-sortable]::after {
content: '';
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23d3d3d3%22%20d%3D%22M7%2013h18a1%201%200%200%200%20.707-1.707l-9-9a1%201%200%200%200-1.414%200l-9%209A1%201%200%200%200%207%2013z%22%2F%3E%3Cpath%20fill%3D%22%23d3d3d3%22%20d%3D%22M25%2019H7a1%201%200%200%200-.707%201.707l9%209a1%201%200%200%200%201.414%200l9-9A1%201%200%200%200%2025%2019z%22%2F%3E%3C%2Fsvg%3E);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sp-table .th[data-sortable].sort-asc::after {
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%238b8b8b%22%20d%3D%22M7%2013h18a1%201%200%200%200%20.707-1.707l-9-9a1%201%200%200%200-1.414%200l-9%209A1%201%200%200%200%207%2013z%22%2F%3E%3Cpath%20fill%3D%22%23d3d3d3%22%20d%3D%22M25%2019H7a1%201%200%200%200-.707%201.707l9%209a1%201%200%200%200%201.414%200l9-9A1%201%200%200%200%2025%2019z%22%2F%3E%3C%2Fsvg%3E);
}
.sp-table .th[data-sortable].sort-desc::after {
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23d3d3d3%22%20d%3D%22M7%2013h18a1%201%200%200%200%20.707-1.707l-9-9a1%201%200%200%200-1.414%200l-9%209A1%201%200%200%200%207%2013z%22%2F%3E%3Cpath%20fill%3D%22%238b8b8b%22%20d%3D%22M25%2019H7a1%201%200%200%200-.707%201.707l9%209a1%201%200%200%200%201.414%200l9-9A1%201%200%200%200%2025%2019z%22%2F%3E%3C%2Fsvg%3E);
}
.sp-table .tbody {
display: table-row;
border-bottom: 1px solid #dee2e6;