任意表格(table)实现拖动列(column)改变列大小

发布时间:2017-7-9 7:30:48编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"任意表格(table)实现拖动列(column)改变列大小 ",主要涉及到任意表格(table)实现拖动列(column)改变列大小 方面的内容,对于任意表格(table)实现拖动列(column)改变列大小 感兴趣的同学可以参考一下。

直接上代码吧,原理可以看我上一篇博文。本实现基于jquery,完美实现拖动改变表格的列大小功能,只需将代码放置在你页面的底部即可(jquery必须先引入)。

$(function () {    var isMouseDown = false;    var currentTh = null;   $('table th').bind({       mousedown:function (e) {           var $th = $(this);           var left = $th.offset().left; //元素距左           var rightPos = left + $th.outerWidth();           if (rightPos-4<= e.pageX && e.pageX <= rightPos) {               isMouseDown = true;               currentTh = $th;               $('table th').css('cursor','ew-resize');               //创建遮罩层,防止mouseup事件被其它元素阻止冒泡,导致mouseup事件无法被body捕获,导致拖动不能停止               var bodyWidth = $('body').width();               var bodyHeight = $('body').height();               $('body').append('<div id="mask" style="opacity:0;top:0px;left:0px;cursor:ew-resize;background-color:green;position:absolute;z-index:9999;width:'+bodyWidth+'px;height:'+bodyHeight+'px;"></div>');           }       }          });   $('body').bind({       mousemove:function(e) {           //移动到column右边缘提示           $('table th').each(function (index,eleDom) {               var ele = $(eleDom);               var left = ele.offset().left; //元素距左               var rightPos = left + ele.outerWidth();               if (rightPos-4<= e.pageX && e.pageX <= rightPos) { //移到列右边缘                   ele.css('cursor','ew-resize');               }else{                   if(!isMouseDown){ //不是鼠标按下的时候取消特殊鼠标样式                       ele.css("cursor","auto");                   }               }           });           //改变大小           if(currentTh != null){               if(isMouseDown){ //鼠标按下了,开始移动                   var left = currentTh.offset().left;                   var paddingBorderLen = currentTh.outerWidth()-currentTh.width();                   currentTh.width((e.pageX-left-paddingBorderLen)+'px');               }           }       },       mouseup:function (e) {           isMouseDown = false;           currentTh = null;           $('table th').css('cursor','auto');           $('#mask').remove();       }


上一篇:java-方法 - 阳光
下一篇:Navicat操作Oracle

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款