An example demonstration of a draggable column width table_javascript skills
Release： 2016-05-16 17:47:50
Original
1257 people have browsed it
<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>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
-
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
