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