An example demonstration of a draggable column width table_javascript skills

Copy code The code is as follows:

序号	操作	标题	执行人	开始时间	结束时间	天数
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

<script> <br>(function(){ //fixed table header ，还可以封装一下做成类 <br>var leftScrollPanel = $("#left-scroll-panel"); <br>var ganntBody = $("#gannt_grid>tbody"); <br>var fixedThead = leftScrollPanel.prev(".fixed-header-tb"); <br>if(!fixedThead.length){ <br>fixedThead = $('<table class="fixed-header-tb"></table>'); <br>fixedThead.append(ganntBody.prev()); <br>leftScrollPanel.before(fixedThead); <br>}else{ <br>//do not create table head again when gannt body repaint, <br>//because it is not created in function render <br>ganntBody.prev().remove(); <br>} <br>var tds = ganntBody.find("tr:first>td"); <br>var ths = fixedThead.find("th"); <br>var thWidth; <br>$.each(tds,function(index,td){ <br>//jq width() or css('width') may has 1px disparity, use attr width <br>thWidth = ths.eq(index).attr("width"); <br>(thWidth!=undefined) && $(td).attr("width",thWidth); <br>}); <br>})(); <br>(function(){//table header resize <br>var sideOffset = { <br>left:null, <br>right:null, <br>td:null, <br>tdLocked:null, <br>tdLeft:null, <br>tdRight:null <br>}; <br>var pos = { <br>resizedTime:0, <br>beginPos:0 <br>}; <br>var tableHead = $(".fixed-header-tb").find("tr:first"); <br>var headCellTagName = "th"; <br>var bodyHead = $("#gannt_grid>tbody").find("tr:first"); <br>var minInterVal = 0; <br>var minWidth = 30; <br>var borderBeside = 5; <br>var notResizeCells = [0,1,6]; <br>var freeCells = [2]; <br>var forceSize = false; <br>var resizeAllow = false; <br>var resizing = false; <br>var forbiddenResize = function(){ <br>var frag = false; <br>var o = sideOffset; <br>var index = o.td.index(); <br>if($.inArray(index,notResizeCells)>-1){ <br>frag = true; <br>}else if((index==0||$.inArray(index-1,notResizeCells)>-1)&&o.left<=borderBeside){ <BR>frag = true; <BR>}else if((index==o.td.siblings().length||$.inArray(index 1,notResizeCells)>-1)&&o.right<=borderBeside){ <BR>frag = true; <BR>}else if(o.left>borderBeside&&o.right>borderBeside){ <br>frag = true; <br>} <br>return frag; <br>}; <br>var stopResize = function(){ <br>if(!resizing){return ;} <br>resizing = false; <br>resizeAllow = false; <br>sideOffset = { <br>left:null, <br>right:null, <br>td:null, <br>tdLocked:null, <br>tdLeft:null, <br>tdRight:null <br>}; <br>}; <br>var isFreeCell = function(td){ <br>return forceSize==false && $.inArray(td.index(),freeCells)!=-1; <br>}; <br>tableHead.bind({ <br>mousemove:function(e){ <br>var th = $(e.target).closest(headCellTagName); <br>if(!th.length){ <br>return; <br>} <br>if(!resizing){ <br>sideOffset.td = th; <br>sideOffset.left = e.pageX - th.offset().left; <br>sideOffset.right = th.width()-(e.pageX-th.offset().left); <br>if(forbiddenResize()){ <br>resizeAllow = false; <br>sideOffset.td.css("cursor","default"); <br>}else{ <br>resizeAllow = true; <br>sideOffset.td.css("cursor","e-resize"); <br>pos.resizedTime = new Date()*1; <br>pos.beginPos = e.pageX; <br>} <br>return; <br>} <br>if(sideOffset.tdLocked){ <br>th = sideOffset.tdLocked; <br>} <br>if(new Date()-pos.resizedTime<minInterVal){ <BR>return; <BR>}else{ <BR>pos.resizedTime = new Date()*1; <BR>} <BR>var offset = (e.pageX-pos.beginPos); <BR>if(!offset){ <BR>return; <BR>}else{ <BR>pos.beginPos = e.pageX; <BR>} <BR>var leftWidth = sideOffset.tdLeft.width(); <BR>var rightWidth = sideOffset.tdRight.width(); <BR>if(offset<0&&leftWidth==minWidth){ <BR>return; <BR>}else if(offset>0&&rightWidth==minWidth){ <br>return; <br>} <br>var fixedLWidth,fixedRWidth; <br>if(leftWidth-Math.abs(offset)<minWidth&&offset<0){ <BR>fixedLWidth = minWidth; <BR>fixedRWidth = rightWidth - (minWidth-leftWidth); <BR>}else if(rightWidth-offset<minWidth&&offset>0){ <br>fixedRWidth = minWidth; <br>fixedLWidth = leftWidth - (minWidth-rightWidth); <br>}else{ <br>fixedLWidth = leftWidth offset; <br>fixedRWidth = rightWidth-offset; <br>} <br>var adjustCells = [ <br>{cell:sideOffset.tdLeft,width:fixedLWidth}, <br>{cell:sideOffset.tdRight,width:fixedRWidth} <br>]; <br>if(offset<0){ <br>adjustCells = adjustCells.reverse(); <br>} <br>var inOneTable = bodyHead.parents("table:first").get(0)==tableHead.parents("table:first").get(0); <br>$.each(adjustCells,function(i,cellConf){ <br>if(isFreeCell(cellConf.cell)){return;} <br>cellConf.cell.attr("width",cellConf.width); <br>if(!inOneTable){ <br>bodyHead.children().eq(cellConf.cell.index()).attr("width",cellConf.width); <br>} <br>}); <br>}, <br>mousedown:function(){ <br>if(!resizeAllow){ <br>return; <br>} <br>sideOffset.tdLocked = sideOffset.td; <br>if(sideOffset.left<=5){ <br>sideOffset.tdRight = sideOffset.td; <br>sideOffset.tdLeft = sideOffset.td.prev(); <br>}else{ <br>sideOffset.tdRight = sideOffset.td.next(); <br>sideOffset.tdLeft = sideOffset.td; <br>} <br>resizing = true; <br>return false; <br>} <br>}); <br>$(document).bind("mouseup",stopResize); <br>})(); <br></script>