JQuery拖动表头边框线调整表格列宽效果代码


Posted in Javascript onSeptember 10, 2014

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

首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.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; });
Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 #Javascript
javascipt:filter过滤介绍及使用
Sep 10 #Javascript
用javascript将数据导入Excel示例代码
Sep 10 #Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 #Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 #Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 #Javascript
使用typeof方法判断undefined类型
Sep 09 #Javascript
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
告诉大家什么是JSON
2008/06/10 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
react redux入门示例
2018/04/19 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python实现的简单模板引擎功能示例
2017/09/02 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
python 中字典嵌套列表的方法
2018/07/03 Python
python处理数据,存进hive表的方法
2018/07/04 Python
python实现可变变量名方法详解
2019/07/01 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
工作自我评价分享
2013/12/01 职场文书
网络编辑职责
2014/03/01 职场文书
总经理检讨书
2014/09/15 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android