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:48:30 +03:00
parent 1d7e70aa15
commit 704e3e6e85
1 changed files with 110 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/table/Table.js
+110 -118
View File
@@ -87,7 +87,7 @@ export class Table {
this.mode = mode; this.mode = mode;
if (mode == Table.CLEAN) { if (mode === Table.CLEAN) {
this.id = 0; this.id = 0;
} }
} }
@@ -131,33 +131,31 @@ export class Table {
makeFilterForm() { makeFilterForm() {
let that = this;
this.filterForm = El('form', { novalidate: true, className: 'sp-form filter-main' }); this.filterForm = El('form', { novalidate: true, className: 'sp-form filter-main' });
Render.makeUiElements(Ut.objVal(this.opts.filter).children, this.filterForm); Render.makeUiElements(Ut.objVal(this.opts.filter).children, this.filterForm);
this.ui.append(this.filterForm); this.ui.append(this.filterForm);
this.filterForm.dxOn('changed clear', 'input[type="text"]', () => that.filterForm.dxTrigger('submit.form')); this.filterForm.dxOn('changed clear', 'input[type="text"]', _ => this.filterForm.dxTrigger('submit.form'));
this.filterForm.dxOn('change', 'select, input[type="radio"], input[type="checkbox"]', () => that.filterForm.dxTrigger('submit.form')); this.filterForm.dxOn('change', 'select, input[type="radio"], input[type="checkbox"]', () => this.filterForm.dxTrigger('submit.form'));
new FormValidator(this.filterForm, { new FormValidator(this.filterForm, {
onInit: el => that.filterFormEl = el, onInit: el => this.filterFormEl = el,
onSubmit: function(vars) { onSubmit: vars => {
that.vars = vars; this.vars = vars;
that.vars.set('pg', 1); this.vars.set('pg', 1);
that.setMode(Table.CLEAN); this.setMode(Table.CLEAN);
that.makeRequest(); this.makeRequest();
} }
}); });
fillData(that.filterFormEl, this.vars); fillData(this.filterFormEl, this.vars);
} }
// Make header toolbar // Make header toolbar
@@ -198,7 +196,7 @@ export class Table {
this.makeRequest(); this.makeRequest();
}); });
this.paginationEl.dxOn('click', 'a.btn-after', function() { this.paginationEl.dxOn('click', 'a.btn-after', _ => {
this.vars.set('before', ''); this.vars.set('before', '');
this.vars.set('after', this.data.after); this.vars.set('after', this.data.after);
@@ -278,11 +276,9 @@ export class Table {
makeTableRows() { makeTableRows() {
let that = this; if (this.mode === Table.UPDATE) {
if (this.mode == Table.UPDATE) { const row = this.getRow(this.id);
let row = this.getRow(this.id);
if (row) { if (row) {
@@ -294,7 +290,7 @@ export class Table {
for (; n < data.length; n++) { for (; n < data.length; n++) {
let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {}; let cell = this.opts.header.cell ? (this.opts.header.cell[ n - 1 ] || {}) : {};
let column = El('div', { className: 't-col' }); let column = El('div', { className: 't-col' });
@@ -306,53 +302,54 @@ export class Table {
column.dxHtml(data[n]); column.dxHtml(data[n]);
} }
if (n == 1 && that.opts.sortable) { if (n === 1 && this.opts.sortable) {
column.classList.add('flex', 'v-center'); column.classList.add('flex', 'v-center');
column.prepend( El('i', { className: 'handle' }) ); column.prepend( El('i', { className: 'handle' }) );
} }
} }
} }
return;
} }
else {
this.data.items.forEach((data, i) => { this.data.items.forEach((data, i) => {
let tbody = El('div', { let tbody = El('div', {
className: 'tbody' + (that.opts.body && that.opts.body.cls ? ' ' + that.opts.body.cls : ''), className: 'tbody' + (this.opts.body && that.opts.body.cls ? ' ' + this.opts.body.cls : ''),
'data-id': data[0], 'data-id': data[0],
'data-pos': i 'data-pos': i
});
let n = 1;
for (; n < data.length; n++) {
let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {};
let column = El('div', { className: 't-col' });
tbody.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
column
));
if (data[n]) {
column.dxHtml(data[n]);
}
if (n == 1 && that.opts.sortable) {
column.classList.add('flex', 'v-center');
column.prepend( El('i', { className: 'handle' }) );
}
if (that.mode == Table.PREPEND) {
that.table.prepend(tbody);
}
else {
that.table.append(tbody);
}
}
}); });
}
let n = 1;
for (; n < data.length; n++) {
let cell = this.opts.header.cell ? (this.opts.header.cell[ n - 1 ] || {}) : {};
let column = El('div', { className: 't-col' });
tbody.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
column
));
if (data[n]) {
column.dxHtml(data[n]);
}
if (n === 1 && this.opts.sortable) {
column.classList.add('flex', 'v-center');
column.prepend( El('i', { className: 'handle' }) );
}
if (this.mode === Table.PREPEND) {
this.table.prepend(tbody);
continue;
}
this.table.append(tbody);
}
});
} }
// Set info rows // Set info rows
@@ -365,11 +362,9 @@ export class Table {
makeRequest() { makeRequest() {
let that = this;
let vars = {}; let vars = {};
if (this.mode == Table.UPDATE) { if (this.mode === Table.UPDATE) {
vars.id = this.id; vars.id = this.id;
} }
else { else {
@@ -381,12 +376,12 @@ export class Table {
this.caller(this.reqOpts).then(jr => { this.caller(this.reqOpts).then(jr => {
if (jr.code != Rc.DONE) { if (jr.code != Rc.DONE) {
that.setInfo('No Data'); this.setInfo('No Data');
return; return;
} }
that.setTableData(jr.data); this.setTableData(jr.data);
}).catch(error => console.error(error)); }).catch(error => console.error(error));
} }
@@ -395,12 +390,11 @@ export class Table {
setSortable() { setSortable() {
let that = this,
isHandle = false, isHandle = false,
toDrag; toDrag;
let isBefore = function(a, b) { const isBefore = (a, b) => {
if (a.parentNode == b.parentNode) { if (a.parentNode === b.parentNode) {
for (let cur = a; cur; cur = cur.previousSibling) { for (let cur = a; cur; cur = cur.previousSibling) {
if (cur === b) { if (cur === b) {
return true; return true;
@@ -411,51 +405,48 @@ export class Table {
return false; return false;
} }
this.table.dxOn('mousedown mouseup', 'i.handle', function(e) { this.table.dxOn('mousedown mouseup', 'i.handle', e => {
let parent = this.dxParents('.tbody'); const parent = this.dxParents('.tbody');
if (e.type == 'mousedown') { if (e.type === 'mousedown') {
isHandle = true; isHandle = true;
parent.setAttribute('draggable', true); parent.setAttribute('draggable', true);
} return;
else {
isHandle = false;
parent.removeAttribute('draggable');
} }
isHandle = false;
parent.removeAttribute('draggable');
}); });
this.table.dxOn('dragenter', '.tbody', function(e) { this.table.dxOn('dragenter', '.tbody', (e, t) => {
if (!isHandle) { if (!isHandle) {
return; return;
} }
let target = this.matches('.tbody') ? this : this.dxParents('.tbody'); const target = t.matches('.tbody') ? t : t.dxParents('.tbody');
if (isBefore( toDrag, target )) { if (isBefore( toDrag, target )) {
target.before(toDrag); target.before(toDrag);
} return;
else {
if (target.nextElementSibling === null) {
$('.sp-table').append( toDrag );
}
else {
target.nextElementSibling.before(toDrag);
}
} }
if (target.nextElementSibling === null) {
$('.sp-table').append( toDrag );
return;
}
target.nextElementSibling.before(toDrag);
}); });
this.table.dxOn('dragstart', '.tbody', function(e) { this.table.dxOn('dragstart', '.tbody', (e, t) => {
if (!isHandle) { if (!isHandle) {
return; return;
} }
toDrag = this; toDrag = t;
e.dataTransfer.setData('text/plain', null); e.dataTransfer.setData('text/plain', null);
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.effectAllowed = 'move';
@@ -463,7 +454,7 @@ export class Table {
toDrag.style.opacity = 0.4; toDrag.style.opacity = 0.4;
}); });
this.table.dxOn('dragend', '.tbody', function(e) { this.table.dxOn('dragend', '.tbody', _ => {
if (!isHandle) { if (!isHandle) {
return; return;
@@ -478,7 +469,7 @@ export class Table {
let data = {}; let data = {};
that.table.dxFind('.tbody', (el, i) => { this.table.dxFind('.tbody', (el, i) => {
if (el.dataset.pos != i && !onSort) { if (el.dataset.pos != i && !onSort) {
onSort = true; onSort = true;
@@ -487,16 +478,14 @@ export class Table {
if (el.dataset.pos != i) { if (el.dataset.pos != i) {
data[ el.dataset.id ] = i; data[ el.dataset.id ] = i;
el.dataset.pos = i; el.dataset.pos = i;
} }
}); });
if (onSort) { if (onSort) {
Ut.trigger(that.opts.onSort, that, data); Ut.trigger(this.opts.onSort, this, data);
onSort = false; onSort = false;
} }
}); });
} }
@@ -546,10 +535,12 @@ export class Table {
j = 1; j = 1;
} }
const currentPage = parseInt(this.vars.get('pg'));
for (let i = this.data.pagination.start; i <= this.data.pagination.end; i++) { for (let i = this.data.pagination.start; i <= this.data.pagination.end; i++) {
pg_btns[j] = [ pg_btns[j] = [
i, i, (this.vars.get('pg') == i) i, i, (currentPage === i)
] ]
j++; j++;
@@ -604,10 +595,10 @@ export class Table {
if (data) { if (data) {
this.setTableData(data); this.setTableData(data);
return;
} }
else {
this.makeRequest(); this.makeRequest();
}
} }
// Update All Rows // Update All Rows
@@ -618,38 +609,39 @@ export class Table {
if (data) { if (data) {
this.setTableData(data); this.setTableData(data);
return;
} }
else {
this.makeRequest(); this.makeRequest();
}
} }
// Delete Row // Delete Row
deleteRow(id) { deleteRow(id) {
let row = this.getRow(id); const row = this.getRow(id);
if (row) { if (!row) {
return;
}
this.rows--; this.rows--;
this.updateInfoRows(); this.updateInfoRows();
row.remove(); row.remove();
if (!this.rows) { if (!this.rows) {
let pg = this.vars.get('pg'); let pg = parseInt(this.vars.get('pg'));
if (pg > 1) { if (pg > 1) {
this.vars.set('pg', --pg); this.vars.set('pg', --pg);
}
this.update();
} }
Ut.trigger(this.opts.onUpdate, this); this.update();
} }
Ut.trigger(this.opts.onUpdate, this);
} }
// Add Row At The End of the table // Add Row At The End of the table
@@ -660,10 +652,10 @@ export class Table {
if (data) { if (data) {
this.setTableData(data); this.setTableData(data);
return;
} }
else {
this.makeRequest(); this.makeRequest();
}
} }
// Add Row At Begining of the table // Add Row At Begining of the table
@@ -674,10 +666,10 @@ export class Table {
if (data) { if (data) {
this.setTableData(data); this.setTableData(data);
return;
} }
else {
this.makeRequest(); this.makeRequest();
}
} }
// Set Info Table // Set Info Table