Heim > Web-Frontend > js-Tutorial > 一个可拖拽列宽表格实例演示_javascript技巧

一个可拖拽列宽表格实例演示_javascript技巧

WBOY
Freigeben: 2016-05-16 17:47:50
Original
1253 Leute haben es durchsucht
复制代码 代码如下:







































































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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage