JQuery 表格拖动调整列宽效果-白红宇

JQuery 表格拖动调整列宽效果

阅读量：5096 次

发布时间：2019-06-13

本文共 3181 字，大约阅读时间需要 10 分钟。

　　类似于桌面程序中的表格拖动表头的效果，当鼠标停留在表头边框线上时，鼠标会变成表示左右拖动的形状，接着拖动鼠标，会在表格中出现一条随鼠标移动的竖线，最后放开鼠标，表格列宽会被调整。，便自己动手尝试实现，在此分享下小小的成果。

　　首先需要如图所示的鼠标图标文件，在自己的硬盘中搜索*.cur，肯定能找到。

　　为了能在所有需要该效果的页面使用，并且不需要更改页面任何HTML，我把所有的代码整合在 $(document).ready(function() {}); 中，并写入一个独立的JS文件。

　　用一个1像素宽的DIV来模拟一条竖线，在页面载入后添加到body元素中

                            
$(document).ready(
function
() { 
     
$(
"body"
).append(
"<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> "
);
 
});
         
       

　　接下来是鼠标移动到表格纵向边框上鼠标变型的问题，起初我考虑在表头中添加一个很小的块级元素触发mousemove 和mouseout事件，但为了简单起见，我还是选择为整个表头添加该事件。

　　在TH的mousemove事件中处理鼠标变型：

                            
$(
"th"
).bind(
"mousemove"
, 
function
(event) { 
    
var
th = $(
this
);
    
//不给第一列和最后一列添加效果
    
if
(th.prevAll().length <= 1 || th.nextAll().length < 1) { 
        
return
;
    
}
    
var
left = th.offset().left;
    
//距离表头边框线左右4像素才触发效果
    
if
(event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) { 
        
th.css({ 
'cursor'
: 
'/web/Page/frameset/images/splith.cur'
});
        
//修改为你的鼠标图标路径
    
}
    
else
{ 
        
th.css({ 
'cursor'
: 
'default'
});
    
}
});
         
       

　　当鼠标按下时，显示竖线，并设置它的高度，位置CSS属性，同时记录当前要改变列宽的TH对象，因为一条边框线由两个TH共享，这里总是取前一个TH对象。

                            
$(
"th"
).bind(
"mousedown"
, 
function
(event) { 
    
var
th = $(
this
);
   
//与mousemove函数中同样的判断
    
if
(th.prevAll().length < 1 | th.nextAll().length < 1) { 
        
return
;
    
}
    
var
pos = th.offset();
    
if
(event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) { 
        
var
height = th.parent().parent().height();
        
var
top = pos.top;
        
$(
"#line"
).css({ 
"height"
: height, 
"top"
: top,
"left"
:event .clientX,
"display"
:
""
});
        
//全局变量，代表当前是否处于调整列宽状态
        
lineMove = 
true
;
        
//总是取前一个TH对象
        
if
(event.clientX - pos.left < th.width() / 2) { 
            
currTh = th.prev();
        
}
        
else
{ 
            
currTh = th;
        
}
    
}
});
         
       

　　接下来是鼠标移动时，竖线随之移动的效果，因为需要当鼠标离开TH元素也要能有该效果，该效果写在BODY元素的mousemove函数中

                            
$(
"body"
).bind(
"mousemove"
, 
function
(event) { 
    
if
(lineMove == 
true
) { 
        
$(
"#line"
).css({ 
"left"
: event.clientX }).show();
     
}
});
         
       

　　最后是鼠标弹起时，最后的调整列宽效果。这里我给BODY 和TH两个元素添加了同样的mouseup代码。我原先以为我只需要给BODY添加mouseup函数，但不明白为什么鼠标在TH中时，事件没有触发，我只好给TH元素也添加了代码。水平有限，下面完全重复的代码不知道怎么抽出来。

                            
$(
"body"
).bind(
"mouseup"
, 
function
(event) { 
    
if
(lineMove == 
true
) { 
        
$(
"#line"
).hide();
        
lineMove = 
false
;
        
var
pos = currTh.offset();
        
var
index = currTh.prevAll().length;
        
currTh.width(event.clientX - pos.left);
        
currTh.parent().parent().find(
"tr"
).each(
function
() { 
            
$(
this
).children().eq(index).width(event.clientX - pos.left);
        
}); 
    
}
});
$(
"th"
).bind(
"mouseup"
, 
function
(event) { 
    
if
(lineMove == 
true
) { 
        
$(
"#line"
).hide();
        
lineMove = 
false
;
        
var
pos = currTh.offset();
        
var
index = currTh.prevAll().length;
        
currTh.width(event.clientX - pos.left);
        
currTh.parent().parent().find(
"tr"
).each(
function
() { 
            
$(
this
).children().eq(index).width(event.clientX - pos.left);
        
});
    
}
});
         
       

　好了，只要在需要这个效果的页面中引入包含以上代码的JS文件，就可以为页面中表格添加该效果。

另外以上代码在火狐中自定义鼠标图标的代码没出效果，所用的jquery为1.2.6

效果文件下载：

————————————————————————更新——————————————

关于拖动时会选中内容的BUG，将以下一行代码添加到$(document).ready函数里就行了

$("body").bind("selectstart", function() { return !lineMove; });

转载于:https://www.cnblogs.com/ranzige/p/3938751.html

你可能感兴趣的文章