1. 테이블 관련 자바스크립트 소스 리팩토링(function에서 class로 변경)
2. HTML테이블의 스크롤을 내린 상태에서 테이블 열너비를 조절할 수 있도록 기능 수정main
parent
e091d6dfe2
commit
86d48cddb3
@ -1,153 +1,170 @@
|
|||||||
/**************************************************************************
|
class Componentization {
|
||||||
* 스크롤 테이블
|
|
||||||
**************************************************************************/
|
|
||||||
function fnMakeScrollableTable(tableScrollEl, thisScrollendEvent){
|
|
||||||
|
|
||||||
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;
|
$(this).find("tbody").html(content);
|
||||||
var min = this.scrollTop;
|
|
||||||
this.scrollTop = this.scrollHeight;
|
|
||||||
var max = this.scrollTop;
|
|
||||||
var hasScroll = (min != max);
|
|
||||||
|
|
||||||
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){
|
let more = document.createElement("tr");
|
||||||
more.classList.add("h-px-30");
|
|
||||||
|
|
||||||
$(this).find("tbody").append(more);
|
if(hasScroll && !noMore){
|
||||||
|
more.classList.add("h-px-30");
|
||||||
|
|
||||||
var ioCallbackFunc = function(entries, observer){
|
$(this).find("tbody").append(more);
|
||||||
var entry = entries[0];
|
|
||||||
var target = entry.target;
|
|
||||||
if(entry.isIntersecting){
|
|
||||||
observer.unobserve(target);
|
|
||||||
tableScrollEl.thisScrollendEvent();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var io = new IntersectionObserver(ioCallbackFunc, {threshold : 0});
|
let ioCallbackFunc = function(entries, observer){
|
||||||
io.observe(more);
|
let entry = entries[0];
|
||||||
}
|
let target = entry.target;
|
||||||
|
if(entry.isIntersecting){
|
||||||
|
observer.unobserve(target);
|
||||||
|
containerEl.thisScrollendEvent();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if(initScrollPosition){
|
let io = new IntersectionObserver(ioCallbackFunc, {threshold : 0});
|
||||||
this.scrollTop = 0;
|
io.observe(more);
|
||||||
} else {
|
}
|
||||||
|
|
||||||
|
if(initScrollPosition){
|
||||||
|
this.scrollTop = 0;
|
||||||
|
} else {
|
||||||
|
|
||||||
var afterRender = this.scrollTop;
|
let afterRender = this.scrollTop;
|
||||||
|
|
||||||
if(beforeRender < afterRender){
|
if(beforeRender < afterRender){
|
||||||
this.scrollTop = beforeRender;
|
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;
|
e.preventDefault();
|
||||||
cur_container = cur_handle.tableContainer;
|
|
||||||
|
|
||||||
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_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1;
|
||||||
cur_col = thEls[cur_index];
|
|
||||||
cur_col_width = cur_col.getBoundingClientRect().width;
|
|
||||||
|
|
||||||
dragStart = true;
|
let thEls = $(cur_container.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
|
||||||
cursorStart = event.pageX;
|
cur_col = thEls[cur_index];
|
||||||
|
cur_col_width = cur_col.getBoundingClientRect().width;
|
||||||
|
|
||||||
document.onmouseup = fnCloseResize;
|
dragStart = true;
|
||||||
document.onmousemove = fnMouseMove;
|
cursorStart = event.pageX;
|
||||||
|
|
||||||
}
|
document.onmouseup = fnCloseResize;
|
||||||
|
document.onmousemove = fnMouseMove;
|
||||||
|
|
||||||
function fnMouseMove(e){
|
}
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if(dragStart){
|
function fnMouseMove(e){
|
||||||
var cursorPosition = event.pageX;
|
e.preventDefault();
|
||||||
var mouseMoved = (cursorPosition - cursorStart);
|
|
||||||
var newWidth = cur_col_width + mouseMoved;
|
|
||||||
|
|
||||||
if(newWidth > 30){
|
if(dragStart){
|
||||||
cur_col.style.width = newWidth+"px";
|
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){
|
function fnCloseResize(e){
|
||||||
document.onmousemove = null;
|
document.onmousemove = null;
|
||||||
document.onmouseup = null;
|
document.onmouseup = null;
|
||||||
cur_container.removeHandle();
|
cur_container.removeHandle();
|
||||||
cur_container.addHandle();
|
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.removeHandle = function(){
|
||||||
|
$(this).find(".resize-handle").remove();
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEls = this.getElementsByClassName("resize-handle");
|
containerEl.changeColumn = function(ths){
|
||||||
var handle_length = handleEls.length;
|
this.removeHandle();
|
||||||
for(var i = 0; i < handle_length; i++){
|
$(this).find("table thead tr").html(ths);
|
||||||
handleEls[i].tableContainer = this;
|
this.addHandle();
|
||||||
handleEls[i].onmousedown = fnMouseDown;
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
containerEl.removeHandle = function(){
|
containerEl.addHandle();
|
||||||
$(this).find(".resize-handle").remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
containerEl.changeColumn = function(ths){
|
|
||||||
this.removeHandle();
|
|
||||||
$(this).find("table thead tr").html(ths);
|
|
||||||
this.addHandle();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
containerEl.addHandle();
|
/**************************************************************************
|
||||||
}
|
* 행 번호 표시 테이블
|
||||||
|
**************************************************************************/
|
||||||
|
static fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){
|
||||||
|
|
||||||
/**************************************************************************
|
let moCallbackFunc = function(mutationList, observer){
|
||||||
* 행 번호 표시 테이블
|
let target = mutationList[0].target;
|
||||||
**************************************************************************/
|
|
||||||
function fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){
|
|
||||||
|
|
||||||
var moCallbackFunc = function(mutationList, observer){
|
$(target).find("tr").each(function(idx, item){
|
||||||
var target = mutationList[0].target;
|
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