1번 테이블 : 마우스를 가져가면 커서가 바뀐다. (태그는 소스 보기로 확인)
| Sub Ch.ID | Main ID | Main Tkin | Plan | Step Seq | EQP ID | PPID | Tkout | Carrier ID | Slot | LSL | USL | Check | DSA | SPC |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Sub Ch.ID | Main ID | Main Tkin | Plan | Step Seq | EQP ID | PPID | Tkout | Carrier ID | Slot | LSL | USL | Check | DSA | SPC |
| Sub Ch.ID | Main ID | Main Tkin | Plan | Step Seq | EQP ID | PPID | Tkout | Carrier ID | Slot | LSL | USL | Check | DSA | SPC |
2번 테이블 : 복잡한 2중구조를 TableScroller 로 호출한 예제. (태그는 소스 보기로 확인)
|
|
핵심 Javascript
/**
해더를 드래그 한다.
1: 대상 table 영역의 selector
2: 드래그할 태그 selector
3: 제3의 위치를 드래그 해야할 경우에 호출하는 함수. function또는 "colgroup" 으로 해도됨.
4: 함께 전체 사이즈를 조절할 selector
//3인자는 자동 class 주입.
new TdDrag("#scroll4","td:lt(3)",function(tdObj,idx,width){
$('#table3 tr:eq(0)').find('td').eq(idx).width(width);
}
,"col:eq(0)");
new TdDrag("#mainstepGrid","th:lt(3)",function(tdObj,idx,width,dist){
var $leftCols = $('#mainstepGrid table:eq(0) col');
$leftCols.eq(idx).width(width); //클때만 컬럼 사이즈를 조정한다.
//자기 영역의 사이즈 변경
var w1 = $leftCols.eq(0).width();
var w2 = $leftCols.eq(1).width();
var w3 = $leftCols.eq(2).width();
$("#mainstepGrid col:eq(0)").width(w1+w2+w3);
}); //앞에꺼
*/
function TdDrag(sourceObject,classInject, callbackFn, totalSizeTrigger){
if(!window.TdDragId) window.TdDragId = 0;
this.id = "TdDrag"+window.TdDragId++;
this.classInject = classInject;
this.totalSizeTrigger = totalSizeTrigger;
this.sObj = document.querySelector(sourceObject); //조정할 대상.
this.callbackFn = callbackFn// //document.querySelector(target_object); //스크롤될 대상.
this.totalCols = {}; //{"2:3":"1:8"} key는 event에서 클릭한 곳의 row,cell value는 움직여햐하는 객체의 row,cell,.. (table의 rowspan의 경우. 앞에꺼를 따로 처리하기 위함. )
if(classInject != null){
var tempTotalCols = [];
//TODO colspan이 있으면 movable을 넣지 않는다.
var colsTot = 0;
var lineNum = 0;
var that = this;
$(classInject,this.sObj).each(function(i){
//console.log($(this).index());
//rowspan
if($(this).index() == 0){ lineNum++; colsTot = 0;} //line 초기화.
if($(this).attr("rowspan") != null ){ //TODO 일단 2줄짜리만 됨
var currRowSpan = Number($(this).attr("rowspan"));
var tarnum = lineNum + currRowSpan; //$$$$ 여기서 1회 만들고.
if($(this).prev().attr("rowspan") != null){
var prevRowSpan = Number($(this).prev().attr("rowspan"));
if(currRowSpan > 1 && prevRowSpan < currRowSpan){ //rownum의 위치가 아래에 해당해야함.
tarnum = lineNum + currRowSpan - prevRowSpan; //$$$$ rownum이 차이가 있으면 바꾼다.
}
}
tempTotalCols[lineNum+":"+$(this).index()] = (tarnum -1) + ":" +(colsTot-1);
}
//colspan
var cols = $(this).attr("colspan") == null?0:Number($(this).attr("colspan"));
if(cols > 0){
$(this).removeClass(that.id);
colsTot += cols; //총col수
}else{
$(this).addClass(that.id);
colsTot ++ ;//총col수
}
});
this.totalCols = tempTotalCols;
}
this.mousedown = false; //마우스를 누른 상태
this.td = ""; //사이즈 변경할 td
this.td_width; //변경할 td의 width,
this.x = 0; //마우스 드레그전 가로위치
//object를 잠시 할당하는부분.
this.TCstartColResize = function(obj,cellindex){
this.mousedown = true;
this.td = obj;
//obj.clientWidth; //important
this.td_width = $(obj).width();
this.cellindex = cellindex;
this.x = event.clientX;
};
//object할당 해제.
this.TCstopColResize = function(){
this.mousedown = false;
this.td = '';
};
//td 사이즈 변경. ..... TODO 마지막일때는 2배씩 늘려야 할것 같은데
this.TCColResize = function()
{
if (this.mousedown){
//자신의 사이즈 변경.
var distX = event.x - this.x; //이동한 간격
//this.td.width = Number(this.td_width) + Number(distX);
$(this.td).width(Number(this.td_width) + Number(distX)); //$$$ 해당객체 사이즈 조절.
//다른 곳에 있는 사이즈 변경.
try{
if(this.callbackFn != null){
//TODO cellindex를 3이상일때 x를 더해라 라는 것을 만들어야 한다. 초기에 colspan을 더해서 결정해야 한다.
if(callbackFn == "colgroup"){
//colgroup을 조정하고 끝낸다.
$("col",this.sObj).eq(this.cellindex).width((Number(this.td_width) + Number(distX))); //$$$
//전체 사이즈를 반영하기.
// if(this.totalSizeTrigger != null){
// var tw = 0;
// $(this.classInject,that.sObj).each(function(i){
// tw += $(this).width();
// });
// if(tw > 0) $(this.totalSizeTrigger).width(tw);
// }
}else{
this.callbackFn(this,this.cellindex,(Number(this.td_width) + Number(distX)), Number(distX));
}
}
}catch(e){}
}
};
this.cell_left = function(obj){//마우스가 셀의 왼쪽인지 측정
if(event.offsetX < 5 && obj.cellIndex!= 0 ) return true;
else return false;
};
this.cell_right = function(obj){//마우스가 셀의 오른쪽인지 측정
if(event.offsetX > $(obj).width()-4) //obj.clientWidth
return true;
else
return false;
};
//찾기
this.getRowspanIndex = function(now_mousedown){
var cellindex = now_mousedown.cellIndex; //현재 위치의 index
var rowindex = now_mousedown.parentNode.sectionRowIndex; //0,1 현재의 TR(line) INDEX
var currRowSpan = 1;
var prevRowSpan = 1;
if($(now_mousedown).attr("rowspan") != null){
currRowSpan = Number($(now_mousedown).attr("rowspan"));
}
if($(now_mousedown).prev().attr("rowspan") != null){
prevRowSpan = Number($(now_mousedown).prev().attr("rowspan"));
}
if( this.cell_left(now_mousedown) ){ //앞에꺼 찾기.
var cellIdx4Row = this.totalCols[(rowindex+1)+":"+cellindex]; //rowNum이 rowspan2일때 -1인 1이 들어 온다.
if(cellIdx4Row != null){
//너비만 가져온다.
var arr = cellIdx4Row.split(":"); //line, co
if(currRowSpan > 1 && prevRowSpan < currRowSpan){ //rowspan경계면
var $tr = $(this.sObj).find('tr').eq(Number(arr[0]));
now_mousedown = $tr.find(this.classInject).eq(Number(arr[1]));
}
cellindex = Number(arr[1]);
}
}else{
var cellIdx4Row = this.totalCols[(rowindex+1)+":"+cellindex]; //rowNum이 rowspan2일때 -1인 1이 들어 온다.
if(cellIdx4Row != null){
//너비만 가져온다.
var arr = cellIdx4Row.split(":"); //line, co
cellindex = Number(arr[1])+1;
}
}
return cellindex;
};
//리사이즈시작
this.sObj.onmousedown = function(){
try{
var now_mousedown = window.event.srcElement;
var cellindex = now_mousedown.cellIndex;
//자신의 영역에 속한 객체 인지를 체크 한다.
//return true;
if(now_mousedown.className.indexOf(that.id) > -1 ){
if($(now_mousedown).attr("rowspan") != null){ //rowspan은 값을 배열에서 가져온다.
cellindex = that.getRowspanIndex(now_mousedown); //cellindex와 now_mousedown가 바뀐다.
}else{
if( that.cell_left(now_mousedown) ){ //앞에꺼 찾기.
//now_mousedown = now_mousedown.parentNode.childNodes[now_mousedown.cellIndex-1];
now_mousedown = $(now_mousedown).prev().get(); //rowspan을 하면 아래에서 카운트 한다..;
cellindex--;
}else if( !that.cell_right(now_mousedown) ){
return true;//오른쪽도 왼쪽도 아니면 사이즈 조절 안함
}
}
that.TCstartColResize(now_mousedown,cellindex);
}
}catch(e){ return true; }
};
//리사이즈
this.sObj.onmousemove = function(){
try{
var now_mousemove = window.event.srcElement;
if(now_mousemove.className.indexOf(that.id) > -1 || that.td!=""){
//셀의 가장자리면 마우스 커서 변경
if( that.cell_left(now_mousemove) || that.cell_right(now_mousemove) ){
now_mousemove.style.cursor = "col-resize";
}else{
now_mousemove.style.cursor = "";
}
that.TCColResize();
// }else{
// now_mousemove.style.cursor = "";
}
}catch(e){ return true; }
};
//리사이즈종료
this.sObj.onmouseup = function(){
try{
//var now_mouseup = window.event.srcElement;
that.TCstopColResize();
}catch(e){ return true; }
};
//리사이즈 도중 텍스트 선택 금지
this.sObj.onselectstart = function(){
try{
if(that.td != ""){
return false;
}
}catch(e){ return true; }
};
}
1번 테이블에 colgroup과 theader가 함께 있는경우 3번항에 “colgroup”이라는 값만 주면된다.
/**
* 처음 테이블 단순 호출
*/
new TdDrag("#TABLE111","th","colgroup");
2번처럼 좌측 고정된 테이블의 경우 면서 해더와 바디가 분리된 복잡한 구조는 아래와 같이 따로 TableScroller 를 만들었다.
/**
* 2개중에 우측은고정 되어 있고 좌측 이즈를 조정하면 좌측의 col틀이 함께 움직이도록 설계.
3번째 인자 2는 좌측부터 2개가 고정된다는 뜻
TableScroller("macroGrid","macroLeftGrid","macroRightGrid",2);
*/
var useTableScroll = true;
function TableScroller(parentGrid,grid1, grid2, grid1Cnt, extraScroll){
new TdDrag("#"+parentGrid,"th:lt("+grid1Cnt+")",function(tdObj,idx,width,dist){
var $leftCols = $('#'+grid1+' col');
$leftCols.eq(idx).width(width); //클때만 컬럼 사이즈를 조정한다.
// //자기 영역의 사이즈 변경
var cnt = grid1Cnt;
var w = 0;
for(var i = 0;i < cnt; i++ ){
w += $leftCols.eq(i).width();
}
if(w > 0) $("#"+parentGrid+" col:eq(0)").width(w);
}); //앞에꺼
if(extraScroll != null){ //추가 스크롤이 있으면 그서의 id값.
new TdDrag("#"+grid2,"th",function(tdObj,idx,width,dist){
var $rightCols = $('#'+grid2+' col');
var $extraCols = $('#'+extraScroll+' col');
$rightCols.eq(idx).width(width); //클때만 컬럼 사이즈를 조정한다.
$extraCols.eq(idx).width(width);
}); //뒤에꺼
}else{
new TdDrag("#"+grid2,"th","colgroup"); //뒤에꺼
}
}
//파티클 테이블이 헤더랑 바디가 분리되어있어서
$('#particleScrolldiv').on('scroll', function () {
$('#particleHeaderDiv').scrollLeft($(this).scrollLeft());
});
TableScroller("PARTICLETABLE","PARTICLETABLE_LEFT","PARTICLETABLE_RIGHT",1,"particleScrolldiv"); //추가 스크롤.