드래그 가능한 열 너비 table_javascript 기술의 예시 데모

코드 복사 코드는 다음과 같습니다.

序号	操作	标题	执行人	开始时间	结束时间	天数
1	编辑	任务标题：阿斯卡是大家啊	Firefox	2012-07-15	2012-08-15	32
2	编辑	任务标题：阿斯卡是大家啊	Firefox	2012-07-15	2012-08-15	32
3	编辑	任务标题：阿斯卡是大家啊	Firefox	2012-07-15	2012-08-15	32
4	编辑	任务标题：阿斯卡是大家啊	Firefox	2012-07-15	2012-08-15	32
5	编辑	任务标题：阿斯卡是大家啊	Firefox	2012-07-15	2012-08-15	32

<스크립트>
(function(){ //고정 테이블 헤더 ，还可以封装一下做成类
var leftScrollPanel = $("#left-scroll-panel");
var ganntBody = $("#gannt_grid> ;tbody");
varfixedThead = leftScrollPanel.prev(".fixed-header-tb");
if(!fixedThead.length){
fixedThead = $('');
fixedThead.append(ganntBody.prev());
leftScrollPanel.before(fixedThead);
}else{
/ /gannt body repaint 시 테이블 헤드를 다시 생성하지 마세요.
//렌더링 함수에서 생성되지 않기 때문입니다.
ganntBody.prev().remove()
var tds = ganntBody. find("tr:first>td");
var ths =fixedThead.find("th")
var thWidth
$.each(tds,function(index,td){
//jq width() 또는 css('width')에는 1px 차이가 있을 수 있습니다. attr width를 사용하세요.
thWidth = ths.eq(index).attr("width")
(thWidth!=undefine) && $(td).attr("width",thWidth)
})
})();
(function(){//테이블 헤더 크기 조정
var sideOffset = {
left:null,
right:null,
td:null,
tdLocked:null,
tdLeft:null,
tdRight:null
};
var pos = {
resizeTime:0,
beginPos:0
}; var tableHead = $(" .fixed-header-tb").find("tr:first");
var headCellTagName = "th";
var bodyHead = $("#gannt_grid>tbody").find("tr:first ");
var minInterVal = 0;
var minWidth = 30;
var borderBeside = 5;
var notResizeCells = [0,1,6];
var freeCells = [2] ;
var forceSize = false;
var resizeAllow = false;
var allowedResize = function(){
var o = sideOffset ;
var index = o.td.index();
if($.inArray(index,notResizeCells)>-1){
frag = true; ==0||$.inArray(index-1,notResizeCells)>-1)&&o.left<=borderBeside){
frag = true
}else if((index==o.td. siblings().length||$.inArray(index 1,notResizeCells)>-1)&&o.right<=borderBeside){
frag = true
}else if(o.left>borderBeside&&o.right> ;borderBeside){
frag = true;
}
조각 반환;
};
var stopResize = function(){
if(!resizing){return ;}
resizing = false;
resizeAllow = false;
sideOffset = {
왼쪽:null,
오른쪽:null,
td:null,
tdLocked:null,
tdLeft:null,
tdRight:null
};
};
var isFreeCell = function(td){
return forceSize==false && $.inArray(td.index(),freeCells)!=-1;
};
tableHead.bind({
mousemove:function(e){
var th = $(e.target).closest(headCellTagName);
if(!th.length){
return;
}
if(!resizing){
sideOffset.td = th;
sideOffset.left = e.pageX - th.offset().left
sideOffset.right; th.width()-(e.pageX-th.offset().left);
if(forbiddenResize()){
resizeAllow = false
sideOffset.td.css("cursor", "default");
}else{
resizeAllow = true;
sideOffset.td.css("cursor","e-resize")
pos.resizeTime = new Date()* 1;
pos.beginPos = e.pageX;
return;
}
if(sideOffset.tdLocked){
th = sideOffset.tdLocked; 🎜>if(new Date()-pos.resizeTimereturn;
}else{
pos.resizeTime = new Date()*1; = (e.pageX-pos.beginPos);
if(!offset){
return;
}else{
pos.beginPos =
}
var leftWidth = sideOffset.tdLeft.width();
var rightWidth = sideOffset.tdRight.width();
if(offset<0&&leftWidth==minWidth){
return; ;0&&rightWidth==minWidth){
return;
}
varfixedLWidth,fixedRWidth;
if(leftWidth-Math.abs(offset)fixedLWidth = minWidth;
fixedRWidth = rightWidth - (minWidth-leftWidth);
}else if(rightWidth-offset0){
fixedRWidth = minWidth;
fixedLWidth = leftWidth - (minWidth-rightWidth);
}else{
fixedLWidth = leftWidth 오프셋;
fixedRWidth = rightWidth-offset;
}
var adjustCells = [
{cell:sideOffset.tdLeft,width:fixedLWidth},
{cell:sideOffset.tdRight,width:fixedRWidth}
];
if(offset<0){
adjustCells = adjustCells.reverse();
}
var inOneTable = bodyHead.parents("table:first").get(0)==tableHead.parents("table:first").get(0);
$.each(adjustCells,function(i,cellConf){
if(isFreeCell(cellConf.cell)){return;}
cellConf.cell.attr("width",cellConf.width);
if(!inOneTable){
bodyHead.children().eq(cellConf.cell.index()).attr("width",cellConf.width)
}
});
},
mousedown:function(){
if(!resizeAllow){
return;
}
sideOffset.tdLocked = sideOffset.td;
if(sideOffset.left<=5){
sideOffset.tdRight = sideOffset.td;
sideOffset.tdLeft = sideOffset.td.prev();
}else{
sideOffset.tdRight = sideOffset.td.next();
sideOffset.tdLeft = sideOffset.td;
}
크기 조정 = true;
거짓을 반환합니다.
}
});
$(document).bind("mouseup",stopResize);
})();