html表格列拖拽,一个可拖拽列宽表格实例演示

body{

font:12px/1.5 Tahoma;

}

#gannt_left{

width:500px;

}

#left-scroll-panel{

width:520px;

height:100px;

overflow-y: auto;

}

table{

table-layout:fixed;

border-collapse: collapse;

border-spacing: 0px;

text-align:center;

width:500px;

}

table,th,td{

border:1px solid #afe0ea;

}

th,td{

height:20px;

line-height:20px;

overflow: hidden;

text-overflow:ellipsis;

white-space:nowrap;

word-wrap:normal;

word-break:keep-all;

}

th{

background:#adf5ff;

}

td{

background:#f6fcff;

}

#gannt_grid,#gannt_grid td{

border-top:0px none;

}

序号操作标题执行人开始时间结束时间天数

1编辑任务标题：阿斯卡是大家啊Firefox2012-07-152012-08-15322编辑任务标题：阿斯卡是大家啊Firefox2012-07-152012-08-15323编辑任务标题：阿斯卡是大家啊Firefox2012-07-152012-08-15324编辑任务标题：阿斯卡是大家啊Firefox2012-07-152012-08-15325编辑任务标题：阿斯卡是大家啊Firefox2012-07-152012-08-1532

(function(){ //fixed table header ，还可以封装一下做成类

var leftScrollPanel = $("#left-scroll-panel");

var ganntBody = $("#gannt_grid>tbody");

var fixedThead = leftScrollPanel.prev(".fixed-header-tb");

if(!fixedThead.length){

fixedThead = $('

');

fixedThead.append(ganntBody.prev());

leftScrollPanel.before(fixedThead);

}else{

//do not create table head again when gannt body repaint,

//because it is not created in function render

ganntBody.prev().remove();

}

var tds = ganntBody.find("tr:first>td");

var ths = fixedThead.find("th");

var thWidth;

$.each(tds,function(index,td){

//jq width() or css('width') may has 1px disparity, use attr width

thWidth = ths.eq(index).attr("width");

(thWidth!=undefined) && $(td).attr("width",thWidth);

});

})();

(function(){//table header resize

var sideOffset = {

left:null,

right:null,

td:null,

tdLocked:null,

tdLeft:null,

tdRight:null

};

var pos = {

resizedTime: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 resizing = false;

var forbiddenResize = function(){

var frag = false;

var o = sideOffset;

var index = o.td.index();

if($.inArray(index,notResizeCells)>-1){

frag = true;

}else if((index==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;

}

return frag;

};

var stopResize = function(){

if(!resizing){return ;}

resizing = false;

resizeAllow = false;

sideOffset = {

left:null,

right: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.resizedTime = new Date()*1;

pos.beginPos = e.pageX;

}

return;

}

if(sideOffset.tdLocked){

th = sideOffset.tdLocked;

}

if(new Date()-pos.resizedTime

return;

}else{

pos.resizedTime = new Date()*1;

}

var offset = (e.pageX-pos.beginPos);

if(!offset){

return;

}else{

pos.beginPos = e.pageX;

}

var leftWidth = sideOffset.tdLeft.width();

var rightWidth = sideOffset.tdRight.width();

if(offset<0&&leftWidth==minWidth){

return;

}else if(offset>0&&rightWidth==minWidth){

return;

}

var fixedLWidth,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+offset;

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;

}

resizing = true;

return false;

}

});

$(document).bind("mouseup",stopResize);

})();