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 相关文章推荐
使用js实现雪花飘落效果
Aug 26 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
js实现图片上传即时显示效果
Sep 30 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
JavaScript中的相等操作符使用详解
Dec 21 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
非常好的js代码
2006/06/27 Javascript
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
用cssText批量修改样式
2009/08/29 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python多线程和队列操作实例
2015/06/21 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
中海讯通笔试题
2015/09/15 面试题
三年级评语大全
2014/04/23 职场文书
个人收入证明格式
2015/06/24 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书