1. 테이블 관련 자바스크립트 소스 리팩토링(function에서 class로 변경)
2. HTML테이블의 스크롤을 내린 상태에서 테이블 열너비를 조절할 수 있도록 기능 수정main
parent
e091d6dfe2
commit
86d48cddb3
@ -1,153 +1,170 @@
|
||||
/**************************************************************************
|
||||
* 스크롤 테이블
|
||||
**************************************************************************/
|
||||
function fnMakeScrollableTable(tableScrollEl, thisScrollendEvent){
|
||||
class Componentization {
|
||||
|
||||
tableScrollEl.thisScrollendEvent = thisScrollendEvent;
|
||||
static help(){
|
||||
console.log("fnMakeScrollableTable(테이블 컨테이너 엘리먼트, 스크롤 이벤트 처리 메소드) : 특정 테이블을 무한스크롤 페이징 테이블로 만든다.");
|
||||
console.log("fnMakeResizableTable(테이블 컨테이너 엘리먼트) : 특정 테이블을 마우스드래그로 열너비 조정 가능한 테이블로 만든다.");
|
||||
console.log("fnMakeRowNumberingTable(tbody엘리먼트, 행번호를 표시할 영역을 구하는 메소드, 행번호 표시 영역에 행번호를 넣는 메소드) : 특정 테이블을 행 번호를 자동으로 표시하는 테이블로 만든다.");
|
||||
}
|
||||
|
||||
tableScrollEl.changeContent = function(content, initScrollPosition, noMore){
|
||||
var beforeRender = this.scrollTop;
|
||||
/**************************************************************************
|
||||
* 스크롤 테이블
|
||||
**************************************************************************/
|
||||
static fnMakeScrollableTable(containerEl, thisScrollendEvent){
|
||||
containerEl.thisScrollendEvent = thisScrollendEvent;
|
||||
|
||||
$(this).find("tbody").html(content);
|
||||
containerEl.changeContent = function(content, initScrollPosition, noMore){
|
||||
let beforeRender = this.scrollTop;
|
||||
|
||||
this.scrollTop = 0;
|
||||
var min = this.scrollTop;
|
||||
this.scrollTop = this.scrollHeight;
|
||||
var max = this.scrollTop;
|
||||
var hasScroll = (min != max);
|
||||
$(this).find("tbody").html(content);
|
||||
|
||||
var more = document.createElement("tr");
|
||||
this.scrollTop = 0;
|
||||
let min = this.scrollTop;
|
||||
this.scrollTop = this.scrollHeight;
|
||||
let max = this.scrollTop;
|
||||
let hasScroll = (min != max);
|
||||
|
||||
if(hasScroll && !noMore){
|
||||
more.classList.add("h-px-30");
|
||||
let more = document.createElement("tr");
|
||||
|
||||
$(this).find("tbody").append(more);
|
||||
if(hasScroll && !noMore){
|
||||
more.classList.add("h-px-30");
|
||||
|
||||
var ioCallbackFunc = function(entries, observer){
|
||||
var entry = entries[0];
|
||||
var target = entry.target;
|
||||
if(entry.isIntersecting){
|
||||
observer.unobserve(target);
|
||||
tableScrollEl.thisScrollendEvent();
|
||||
}
|
||||
};
|
||||
$(this).find("tbody").append(more);
|
||||
|
||||
var io = new IntersectionObserver(ioCallbackFunc, {threshold : 0});
|
||||
io.observe(more);
|
||||
}
|
||||
let ioCallbackFunc = function(entries, observer){
|
||||
let entry = entries[0];
|
||||
let target = entry.target;
|
||||
if(entry.isIntersecting){
|
||||
observer.unobserve(target);
|
||||
containerEl.thisScrollendEvent();
|
||||
}
|
||||
};
|
||||
|
||||
if(initScrollPosition){
|
||||
this.scrollTop = 0;
|
||||
} else {
|
||||
let io = new IntersectionObserver(ioCallbackFunc, {threshold : 0});
|
||||
io.observe(more);
|
||||
}
|
||||
|
||||
if(initScrollPosition){
|
||||
this.scrollTop = 0;
|
||||
} else {
|
||||
|
||||
var afterRender = this.scrollTop;
|
||||
let afterRender = this.scrollTop;
|
||||
|
||||
if(beforeRender < afterRender){
|
||||
this.scrollTop = beforeRender;
|
||||
if(beforeRender < afterRender){
|
||||
this.scrollTop = beforeRender;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**************************************************************************
|
||||
* 컬럼 크기 조절 테이블
|
||||
**************************************************************************/
|
||||
function fnMakeResizableTable(containerEl){
|
||||
|
||||
var cur_container, cur_handle, cur_index, cur_col, cur_col_width;
|
||||
var cursorStart = 0, dragStart = false;
|
||||
/**************************************************************************
|
||||
* 컬럼 크기 조절 테이블
|
||||
**************************************************************************/
|
||||
static fnMakeResizableTable(containerEl){
|
||||
|
||||
function fnMouseDown(e){
|
||||
var cur_container, cur_handle, cur_index, cur_col, cur_col_width;
|
||||
var cursorStart = 0, dragStart = false;
|
||||
|
||||
e.preventDefault();
|
||||
function fnMouseDown(e){
|
||||
|
||||
cur_handle = this;
|
||||
cur_container = cur_handle.tableContainer;
|
||||
e.preventDefault();
|
||||
|
||||
cur_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1;
|
||||
cur_handle = this;
|
||||
cur_container = cur_handle.tableContainer;
|
||||
|
||||
var thEls = $(cur_container.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
|
||||
cur_col = thEls[cur_index];
|
||||
cur_col_width = cur_col.getBoundingClientRect().width;
|
||||
cur_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1;
|
||||
|
||||
dragStart = true;
|
||||
cursorStart = event.pageX;
|
||||
let thEls = $(cur_container.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
|
||||
cur_col = thEls[cur_index];
|
||||
cur_col_width = cur_col.getBoundingClientRect().width;
|
||||
|
||||
document.onmouseup = fnCloseResize;
|
||||
document.onmousemove = fnMouseMove;
|
||||
dragStart = true;
|
||||
cursorStart = event.pageX;
|
||||
|
||||
}
|
||||
document.onmouseup = fnCloseResize;
|
||||
document.onmousemove = fnMouseMove;
|
||||
|
||||
function fnMouseMove(e){
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if(dragStart){
|
||||
var cursorPosition = event.pageX;
|
||||
var mouseMoved = (cursorPosition - cursorStart);
|
||||
var newWidth = cur_col_width + mouseMoved;
|
||||
function fnMouseMove(e){
|
||||
e.preventDefault();
|
||||
|
||||
if(newWidth > 30){
|
||||
cur_col.style.width = newWidth+"px";
|
||||
if(dragStart){
|
||||
let cursorPosition = event.pageX;
|
||||
let mouseMoved = (cursorPosition - cursorStart);
|
||||
let newWidth = cur_col_width + mouseMoved;
|
||||
|
||||
if(newWidth > 30){
|
||||
cur_col.style.width = newWidth+"px";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fnCloseResize(e){
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
cur_container.removeHandle();
|
||||
cur_container.addHandle();
|
||||
}
|
||||
function fnCloseResize(e){
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
cur_container.removeHandle();
|
||||
cur_container.addHandle();
|
||||
}
|
||||
|
||||
containerEl.style.position = "relative";
|
||||
|
||||
let handleContainer = document.createElement("span");
|
||||
handleContainer.className = "resize-handle-container";
|
||||
let table = containerEl.querySelector("table")
|
||||
containerEl.insertBefore(handleContainer, table);
|
||||
|
||||
|
||||
containerEl.addHandle = function(){
|
||||
let thEls = $(this.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
|
||||
let th_length = thEls.length;
|
||||
let widthAcc = 0;
|
||||
for(let i=0; i < th_length; i++){
|
||||
widthAcc += thEls[i].getBoundingClientRect().width;
|
||||
let yDiv = document.createElement("div");
|
||||
yDiv.className = "resize-handle";
|
||||
yDiv.setAttribute("data-resizecol",i+1);
|
||||
yDiv.style.cssText = "left: "+widthAcc+"px;";
|
||||
this.querySelector(".resize-handle-container").append(yDiv);
|
||||
}
|
||||
|
||||
let handleEls = this.getElementsByClassName("resize-handle");
|
||||
let handle_length = handleEls.length;
|
||||
for(let i = 0; i < handle_length; i++){
|
||||
handleEls[i].tableContainer = this;
|
||||
handleEls[i].onmousedown = fnMouseDown;
|
||||
}
|
||||
};
|
||||
|
||||
containerEl.style.position = "relative";
|
||||
|
||||
containerEl.addHandle = function(){
|
||||
var thEls = $(this.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
|
||||
var th_length = thEls.length;
|
||||
var widthAcc = 0;
|
||||
for(var i=0; i < th_length; i++){
|
||||
widthAcc += thEls[i].getBoundingClientRect().width;
|
||||
var yDiv = document.createElement("div");
|
||||
yDiv.className = "resize-handle";
|
||||
yDiv.setAttribute("data-resizecol",i+1);
|
||||
yDiv.style.cssText = "left: "+widthAcc+"px;";
|
||||
this.append(yDiv);
|
||||
containerEl.removeHandle = function(){
|
||||
$(this).find(".resize-handle").remove();
|
||||
}
|
||||
|
||||
handleEls = this.getElementsByClassName("resize-handle");
|
||||
var handle_length = handleEls.length;
|
||||
for(var i = 0; i < handle_length; i++){
|
||||
handleEls[i].tableContainer = this;
|
||||
handleEls[i].onmousedown = fnMouseDown;
|
||||
containerEl.changeColumn = function(ths){
|
||||
this.removeHandle();
|
||||
$(this).find("table thead tr").html(ths);
|
||||
this.addHandle();
|
||||
}
|
||||
};
|
||||
|
||||
containerEl.removeHandle = function(){
|
||||
$(this).find(".resize-handle").remove();
|
||||
}
|
||||
containerEl.addHandle();
|
||||
|
||||
containerEl.changeColumn = function(ths){
|
||||
this.removeHandle();
|
||||
$(this).find("table thead tr").html(ths);
|
||||
this.addHandle();
|
||||
}
|
||||
|
||||
containerEl.addHandle();
|
||||
}
|
||||
/**************************************************************************
|
||||
* 행 번호 표시 테이블
|
||||
**************************************************************************/
|
||||
static fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){
|
||||
|
||||
/**************************************************************************
|
||||
* 행 번호 표시 테이블
|
||||
**************************************************************************/
|
||||
function fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){
|
||||
let moCallbackFunc = function(mutationList, observer){
|
||||
let target = mutationList[0].target;
|
||||
|
||||
var moCallbackFunc = function(mutationList, observer){
|
||||
var target = mutationList[0].target;
|
||||
$(target).find("tr").each(function(idx, item){
|
||||
markerSetter(markerFinder(item),idx+1);
|
||||
});
|
||||
};
|
||||
let mo = new MutationObserver(moCallbackFunc);
|
||||
mo.observe(tbody, {childList : true});
|
||||
}
|
||||
|
||||
$(target).find("tr").each(function(idx, item){
|
||||
markerSetter(markerFinder(item),idx+1);
|
||||
});
|
||||
};
|
||||
var mo = new MutationObserver(moCallbackFunc);
|
||||
mo.observe(tbody, {childList : true});
|
||||
}
|
||||
Loading…
Reference in New Issue