Add project files.
This commit is contained in:
login
199
SysApp/wwwroot/js/libs/js-AbsTable.js
Normal file
199
SysApp/wwwroot/js/libs/js-AbsTable.js
Normal file
@ -0,0 +1,199 @@
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user