一个可拖拽列宽表格实例演示_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

<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">'); <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>