一个可拖拽列宽表格实例演示_javascript技巧
Freigeben: 2016-05-16 17:47:50
Original
1242 Leute haben es durchsucht
<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>
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
Neueste Artikel des Autors
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31