Класс Javascript для сортировки HTML-таблиц. Метод отмены сортировки не работаетHtml

Программисты Html
Ответить
Anonymous
 Класс Javascript для сортировки HTML-таблиц. Метод отмены сортировки не работает

Сообщение Anonymous »

Мой класс сортирует таблицу в алфавитном порядке по именам сотрудников, а также по отработанному времени. Проблема, с которой я столкнулся, заключается в том, что я могу заставить ее «отсортировать» таблицу (отсортировать ее до исходного состояния) после щелчка по имени или заголовкам рабочего времени. Я думал, что это будет просто, но нет, я не могу понять.
Извините, если это плохой код. Я учусь и, по сути, написал курс, не зная слишком много JS.
Спасибо!

Код: Выделить всё

export { SortingTable };

class SortingTable {
#data = null;
#sortedData = null;
#sortedTimeData = null;
#originalData = null;

constructor(table, selector) {
this.table = table;
this.selector = selector;
}

#getBodyData() {
const body = this.table;
const rows = body.getElementsByTagName('tr');
const data = [];
const originalData = [];

for (let i = 0; i < rows.length; i++) {
data.push(rows[i]); // Push the actual row
originalData.push(rows[i].cloneNode(true)); // Push a deep copy of the row
}

this.data = data;
this.originalData = originalData;
}

#removeBody(){
const body = this.table.getElementsByTagName('tbody')[0]
while (body.childElementCount){
body.removeChild(body.firstElementChild)
}
}

#sortAlphaData() {
this.data.sort((a, b) => {
const elementA = a.querySelector(this.selector);
const elementB = b.querySelector(this.selector);

const nameA = elementA ? elementA.innerText : '';
const nameB = elementB ? elementB.innerText : '';

return nameA.localeCompare(nameB);
});
this.sortedData = this.data;
}

#sortTimeData(){
const data = this.data
const seconds = []
const newData = []
for (let i = 0; i < data.length; i++){
let wholeTime = data[i].querySelector('#workedTime')?.innerText ?? '';
// console.log(wholeTime)
const splitTime = wholeTime.split(':')
const totalSeconds = (parseFloat(splitTime[0]) * 3600) +
(parseFloat(splitTime[1]) * 60) +
(parseFloat(splitTime[2]))
seconds.push(totalSeconds)
const objectData = {
totalSeconds: totalSeconds,
originalData: data[i]
}
newData.push(objectData)
}
newData.sort((a, b) => a.totalSeconds - b.totalSeconds)
this.sortedTimeData = newData
}

#rebuildAlphaBody() {
const body = this.table.getElementsByTagName('tbody')[0];
const data = this.sortedData;

// Append the sorted rows directly to the body
for (let i = 0; i < data.length; i++) {
body.appendChild(data[i]); // Reuse the original row elements
}
}

#rebuildOriginalBody() {
const body = this.table.getElementsByTagName('tbody')[0];
const data = this.originalData;

// Append the sorted rows directly to the body
for (let i = 0; i < data.length; i++) {
body.appendChild(data[i]); // Reuse the original row elements
}
}

#rebuildTimeBody(){
const data = this.sortedTimeData
const body = this.table.getElementsByTagName('tbody')[0]
for (let i = 0; i < data.length; i++){
body.appendChild(data[i]['originalData'])
}
}

sortAlpha(){
this.#getBodyData()
this.#sortAlphaData()
this.#removeBody()
this.#rebuildAlphaBody()
}

sortTime(){
this.#getBodyData()
this.#sortTimeData()
this.#removeBody()
this.#rebuildTimeBody()
}

unsort() {
console.log("Original Data:", this.originalData);

if (!this.originalData) {
console.error("Error: originalData is not initialized.  Call a sorting method first.");
return;
}

this.#removeBody();
this.#rebuildOriginalBody();
}
}
Я пытался создать глубокую копию исходных данных, чтобы сортировка this.data не влияла на исходные данные, кроме этого console.log("Исходные данные:", this.originalData); отпечатки не определены.
Я не знаю, что делать после этого.
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-working
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»