테이블의 열 크기를 변경하는 방법에 대한 튜토리얼

이 구현은 테이블의 열 크기를 드래그하고 변경하는 기능을 완벽하게 구현하는 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;
               $(&#39;table th&#39;).css(&#39;cursor&#39;,&#39;e-resize&#39;);               //创建遮罩层，防止mouseup事件被其它元素阻止冒泡，导致mouseup事件无法被body捕获，导致拖动不能停止   var bodyWidth = $(&#39;body&#39;).width();               var bodyHeight = $(&#39;body&#39;).height();
               $(&#39;body&#39;).append(&#39;<div id="mask" style="opacity:0;top:0px;left:0px;cursor:e-resize;background-color:green;position:absolute;z-index:9999;width:&#39;+bodyWidth+&#39;px;height:&#39;+bodyHeight+&#39;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','e-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();
       }
   });


});

수정이 필요한 플러그인의 위치

1. 마스크 레이어의 ID와 마스크가 일부 요소와 충돌할 수 있습니다.

2. 마스크 레이어의 Z-인덱스가 충분하지 않을 수 있습니다. 드래그를 멈출 수 없으면 최대값은 2147483647

입니다.

위 내용은 테이블의 열 크기를 변경하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!