Files
MikaltoResort/ManagementApp/wwwroot/js/libs/js-AbsTable.js
2025-06-04 14:17:32 +07:00

200 lines
7.1 KiB
JavaScript

export default class AbsTable extends window.AObject {
constructor(e) {
super();
this.data = [];
this.idCheckBox = 1;
this.pElement = e;
this.Headers = [];
this.lSysRows = [];
this.InitStructure();
this.InitCss();
this.SetIdCheckBox();
}
SetIdCheckBox() {
if (window.nAbsTable == null) {
window.nAbsTable = 1;
} else {
window.nAbsTable += 1;
}
}
SetScrollBarY(height) {
this.absContainerRows.style.height = height + "px";
}
AddHeader(name, width, minWidth, id = "", rowTemp = null) {
var d = document.createElement("th");
d.innerHTML = name;
d.style.width = width;
if (id != "") {
d.setAttribute("header-id", id);
}
this.Headers.push({ "id": id, "nameCol": name, "element": d, "rowTemp": rowTemp });
this.absHeaders.appendChild(d);
if (width == "") {
this.UpdateWidth(minWidth);
} else {
this.UpdateWidth(width);
}
}
UpdateWidth(width) {
this.absTableH.style.minWidth = (parseInt(width) + parseInt(this.absTableH.style.minWidth == "" ? 0 : this.absTableH.style.minWidth)) + "px";
this.absTable.style.minWidth = this.absTableH.style.minWidth;
this.absContainerRows.style.minWidth = this.absTableH.style.minWidth;
}
AddRow(temp) {
if (this.lSysRows.length > 0) {
this.absRows.insertBefore(temp, this.lSysRows[0]);
} else {
this.absRows.appendChild(temp);
}
temp.querySelectorAll("td").forEach((o, i) => {
o.style.width = this.Headers[i].element.style.width;
});
}
AddSysRow(temp, id) {
this.absRows.insertBefore(temp, this.absRows.nextSibling);
this.lSysRows.push({ "id": id, "element": temp });
}
InitCss() {
this.pElement.classList.add("abs-pContainer");
this.absContainer.setAttribute("data-style", "default");
this.absContainer.classList.add("abs-container");
this.absScrollbar.classList.add("abs-scrollbar");
this.absTable.classList.add("abs-table", "virtual");
this.absTableH.classList.add("abs-table");
}
IsCheckBox(f) {
this.isCheckBox = f;
if (f) {
var t = this.InitCheckBox("checkItemAll" + window.nAbsTable);
this.UpdateWidth(65);
this.absHeaders.insertBefore(t, this.absHeaders.children[0]);
this.Headers.unshift({
"id": "", "nameCol": "", "element": t, "rowTemp": (function (id, data) {
this.idCheckBox += 1;
return this.InitCheckBox(("checkEle" + window.nAbsTable) + (this.idCheckBox - 1), false).children[0];
}).bind(this)
});
var cBox = this.absHeaders.querySelector("#checkItemAll" + window.nAbsTable);
var evF = function (evt) {
this.CheckAll_EvtHandler.call(this, evt);
}.bind(this);
cBox.addEventListener("change", evF, false);
this.stackEvent.push({ "event": "change", "callback": evF, "element": cBox, "parent": null });
var lTD = this.absRows.querySelectorAll("tr");
lTD.forEach(u => {
u.insertBefore(this.InitCheckBox(("checkEle" + window.nAbsTable) + idCheckBox, false), u.children[0]);
this.idCheckBox += 1;
});
} else {
var t = this.absHeaders.querySelector("#checkItemAll" + window.nAbsTable);
if (t != null) {
this.UpdateWidth(-65);
this.removeEvent(t);
var tm = this.Headers.shift();
tm.element.remove();
var lTD = this.absRows.querySelectorAll("tr");
lTD.forEach(u => {
u.children[0].remove();
});
this.idCheckBox = 1;
}
}
}
InitCheckBox(name, isHeader = true) {
var td = document.createElement((isHeader) ? "th" : "td");
var con = document.createElement("div");
con.classList.add("custom-checkbox", "mr-0", "mt-auto", "mb-auto");
var cb = document.createElement("input");
cb.setAttribute("id", name);
cb.setAttribute("type", "checkbox");
var lb = document.createElement("label");
lb.classList.add("a-checkbox-label");
lb.setAttribute("for", name);
if (isHeader) {
td.style.width = "65px";
} else {
cb.setAttribute("rowCheck", "");
}
con.appendChild(cb);
con.appendChild(lb);
td.appendChild(con);
return td
}
InitStructure() {
this.absContainer = document.createElement("div");
this.absScrollbar = document.createElement("div");
this.absContainer.appendChild(this.absScrollbar);
this.pElement.appendChild(this.absContainer);
var options = {
damping: 0.25,
thumbMinSize: 5,
renderByPixel: true,
alwaysShowTracks: true,
continuousScrolling: true,
plugins: {
overscroll: {
effect: 'bounce',
damping: 0.15,
maxOverscroll: 80
}
}
};
Scrollbar.init(this.absScrollbar, options);
this.absScrollbarCon = this.absScrollbar.querySelector(".scroll-content");
this.absTableH = document.createElement("table");
this.absTable = document.createElement("table");
var d1 = document.createElement("thead");
var d2 = document.createElement("tr");
this.absTableH.appendChild(d1);
this.absHeaders = d2;
d1.appendChild(d2);
d1 = document.createElement("tbody");
this.absTable.appendChild(d1);
this.absRows = d1;
this.absScrollbarCon.appendChild(this.absTableH);
var c = document.createElement("div");
c.classList.add("atable-scroll");
c.setAttribute("data-scrollbar", "");
c.appendChild(this.absTable);
this.absContainerRows = c;
this.absScrollbarCon.appendChild(c);
Scrollbar.init(this.absContainerRows, options);
}
CheckAll_EvtHandler(e) {
var listC = this.absRows.querySelectorAll("input[type=checkbox][rowCheck]");
listC.forEach(el => {
if (e.currentTarget.checked) {
el.checked = true;
} else {
el.checked = false;
}
});
}
LoadData(data) {
this.absRows.innerHTML = "";
this.data = JSON.parse(data);
this.data.forEach((e, i) => {
var r = document.createElement("tr");
r.setAttribute("data-id", i);
this.Headers.forEach((o) => {
var td = document.createElement("td");
if (o.rowTemp != null) {
td.appendChild(o.rowTemp(i, e));
} else {
td.innerHTML = e[o.id];
}
r.appendChild(td);
});
this.AddRow(r);
});
}
}